artrayd

<template>
  <iconLove class="icon-large icon-red" />
</template>

<style>
.icon-red path {
  fill: red;
}
</style>

artrayd

<template>
  <iconLove class="icon-large" />
</template>

<style>
.icon-large {
  width: 48px;
  height: 48px;
}
.icon-default {

artrayd

<template>
  <h1>SVG Icon Font</h1>
  <p>You can easily customize these icons with CSS only</p>
  <iconLove />
</template>
<script>
import svgLove from "./components/icon/Love.vue";

export default {
  name: "App",

artrayd

<template>
  <div></div>
</template>

<script>
export default {
  name: "Love",
};
</script>

artrayd

export let facebookSDK = {
  mounted () {
    let _this = this
    this.$nextTick(() => {
      window.fbAsyncInit = function () {
        FB.init({
          appId: 'XXX',
          xfbml: true,
          version: 'v2.6'
        })

artrayd

// inside html template
<span>{{ lettersAmount }} letters</span>

// inside script
 computed: {
    lettersAmount: function() {
      return this.letters.length;
    },
  },

artrayd

<img :src="letterIcon(letter.path)" />

artrayd

  methods: {
    letterIcon: function(path) {
      return require("@/" + path);
    },
  },

artrayd

<template>
  <ul class="alphabet">
    <li v-for="letter in letters" :key="letter.name">
      <img :src="letterIcon(letter.path)" />
      <span>{{ letter.name }}</span>
      <div class="tooltip">{{ letter.alt }}</div>
    </li>
  </ul>
</template>

artrayd

// Importing array from local JSON file
import json from "@/assets/letters/greek-alphabet.json";

export default {
  name: "Alphabet",
  data: function() {
    return {
      letters: json.letters, // passing array data into Vue
    };
  },