Vue BaseIcon component - integrate with IcoMoon App

BaseIcon.vue

<template>
  <i class="base-icon" :class="iconClass" :style="iconStyle">
    <i v-for="n in paths" :class="`path${n}`" :key="icon + n"></i>
  </i>
</template>

<script>
import './icons/style.scss'
import icons from './icons.json'

const fillColors = {
  dark: '#4a4a4a',
  white: '#fff',
  active: '#88184c'
}

export default {
  computed: {
    iconClass() {
      return 'icon-' + this.icon
    },
    paths() {
      return icons[this.icon]
    },
    iconStyle() {
      return {
        fontSize: this.size + 'px',
        color: fillColors[this.fill] || this.fill
      }
    }
  },
  props: {
    icon: {
      type: String,
      validator: v => {
        if (!icons[v]) {
          console.error(`Icon ${v} not exist!`)
        }
        return icons[v]
      },
      required: true,
      default: ''
    },
    fill: {
      type: String,
      validator: v => {
        return (
          fillColors[v] ||
          (v.startsWith('#') && v.length === 7) ||
          v.length === 6
        )
      }
    },
    size: {
      type: Number,
      default: 14
    }
  }
}
</script>

<style scoped>
.base-icon {
  display: inline-block;
  align-items: center;
}

.dark > path,
.dark > g {
  fill: #4a4a4a;
}

.white > path,
.white > g {
  fill: #fff;
}

.active > path,
.active > g {
  fill: #88184c;
}
</style>

generateJsonMap.js

const fs = require('fs');

let rawdata = fs.readFileSync(__dirname + '/iconmoon/selection.json');
let iconsData = JSON.parse(rawdata);

const icons = iconsData.icons.reduce((acc, icon) => {
  acc[icon.properties.name] = icon.icon.paths.length
  return acc
}, {});

const json = JSON.stringify(icons)
const path = __dirname + '/icons.json'

fs.writeFileSync(path, json);

icons.json

{
  "calendar": 1,
  "camera": 1,
  "facebook": 2,
  "facebook-circle": 1,
  "feed": 10,
  "google": 4,
  "badge": 7,
  "badge-gold": 7,
  "schedule-solid": 3,
  "home": 2,
  "instagram": 3,
  "music-play": 1,
  "photo": 2,
  "schedule": 6,
  "select-down": 1,
  "twitter": 1,
  "sphere": 1,
  "checkmark": 1,
  "play": 1,
  "share": 1,
  "whatsapp": 1,
  "spotify": 1,
  "youtube": 6,
  "paypal": 2
}