Skip to content

Instantly share code, notes, and snippets.

@ademilter
Forked from SinanMtl/Close.vue
Created May 23, 2019 20:32
Show Gist options
  • Save ademilter/1b2e3f73a47901c0d12561fccb415a40 to your computer and use it in GitHub Desktop.
Save ademilter/1b2e3f73a47901c0d12561fccb415a40 to your computer and use it in GitHub Desktop.
Vue Icon Generate as Component
module.exports = {
presets: [
'@vue/app'
],
plugins: [
'codegen'
]
}
// 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>
// mixins/icon.js
export default function icon (key = 'opts') {
return {
computed: {
[key] () {
return {
...this.defaults,
...this.options
}
}
},
props: {
options: {
type: Object
}
}
}
}
// 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>
// 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}
`
// assets/icons/index.js
import /* codegen */ './icons.macro'
{
"devDependencies": {
"babel-plugin-codegen": "^3.0.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment