Vue Icon Generate as Component

babel.config.js

module.exports = {
  presets: [
    '@vue/app'
  ],
  plugins: [
    'codegen'
  ]
}

Close.vue

// assets/icons/Close.vue

<template>
  <svg class="icon" xmlns="http://www.w3.org/2000/svg" :width='opts.width' :height='opts.height' viewBox="0 0 29 32">
    <path :fill="opts.color" d="M27.507 7.418l-4.525-4.525-9.050 9.050-9.053-9.050-4.525 4.525 9.050 9.050-9.050 9.053 4.525 4.525 9.053-9.050 9.050 9.050 4.525-4.525-9.050-9.053z"></path>
  </svg>
</template>

<script>
import icon from '@/mixins/icon'

export default {
  mixins: [icon()],
  data () {
    return {
      defaults: {
        color: '#000000',
        width: 16,
        height: 16
      }
    }
  }
}
</script>

icon.js

// mixins/icon.js

export default function icon (key = 'opts') {
  return {
    computed: {
      [key] () {
        return {
          ...this.defaults,
          ...this.options
        }
      }
    },
    props: {
      options: {
        type: Object
      }
    }
  }
}

Icon.vue

// components/Icon.vue

<template lang="pug">
  keep-alive
    component(:is='`Icon${name}`', :options='$attrs')
</template>

<script>
import '@/assets/icons'

export default {
  props: {
    name: {
      type: String,
      required: true
    },
    options: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

icons.macro.js

// assets/icons/icons.macro.js

const fs = require('fs')
const components = fs.readdirSync(__dirname)
  .filter(c => c.match(/\.vue$/))
  .map(c => c.replace(/\.vue$/, ''))

const code = components.map(component => `
  import ${component} from './${component}'
  Vue.component('Icon${component}', ${component})
`).join('\n')

module.exports = `
import Vue from 'vue'

${code}
`

index.js

// assets/icons/index.js
import /* codegen */ './icons.macro'

package.json

{
  "devDependencies": {
    "babel-plugin-codegen": "^3.0.0"
  }
}