sakura/scripts/import-svg-icons.mjs

61 lines
1.5 KiB
JavaScript
Raw Normal View History

2021-07-09 18:28:29 +08:00
import { readdirSync, writeFileSync } from 'fs'
import camelCase from 'camelcase'
const iconDir = './src/assets/icons/ui'
const targetDir = './src/components/icon/UiIcon.vue'
const template = (importContent, dataContent) => `
<!-- # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
<!-- # Generated by scripts/import-svg-icons.js -->
<template>
<svg-icon
:data="svg[$props.name]"
:width="$props.width"
:height="$props.height"
original
></svg-icon>
2021-07-09 18:28:29 +08:00
</template>
<script>
import { defineComponent } from 'vue'
${importContent}
export default defineComponent({
name: 'Icon',
props: {
name: { type: String },
width: { type: String, default: '100%' },
height: { type: String, default: '100%' },
2021-07-09 18:28:29 +08:00
},
setup(){
const svg = {
${dataContent}
}
return {
svg
}
}
})
</script>
`
const importTemplate = (name, camelCaseName) =>
`import ${camelCaseName} from '@/assets/icons/ui/${name}.svg';\n`
const dataTemplate = (name, camelCaseName) => `'${name}':${camelCaseName},\n`
let importContent = '',
dataContent = ''
readdirSync(iconDir).forEach((file) => {
if (/(.*)\.svg$/.test(file)) {
// console.log(file)
const name = file.match(/(.*)\.svg$/)[1]
const camelCaseName = camelCase(name)
importContent += importTemplate(name, camelCaseName)
dataContent += dataTemplate(name, camelCaseName)
} else {
return false
}
})
const vueContent = template(importContent, dataContent)
2021-07-18 19:52:09 +08:00
writeFileSync(targetDir, vueContent, { flag: 'w+' })