sakura/scripts/import-svg-icons.mjs

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>
</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%' },
    },
    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)

writeFileSync(targetDir, vueContent, { flag: 'w+' })