svgicon 实现自定义 svg icon

  对于后台管理框架，经常要用到自定义的 svg 来当做路由的icon图标。
https://mmf-fe.github.io/svgicon，这是这款插件的地址。这里总结下在 vue3 + vite 中使用改插件的方式。

安装

  yarn add @yzfe/svgicon @yzfe/vue3-svgicon
  yarn add vite-plugin-svgicon --dev

配置

vite.config.ts 中

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  import svgicon from 'vite-plugin-svgicon'

  export default defineConfig({
    plugins: [
      vue(),
      svgicon({
        include: ['**/svg-icon/**/*.svg']
      })
    ]
  })

main.ts 中

  import { createApp } from 'vue'
  import App from './App'
  import { VueSvgIconPlugin } from '@yzfe/vue3-svgicon'
  import '@yzfe/svgicon/lib/svgicon.css'


  createApp(App)
      .use(VueSvgIconPlugin, {
          tagName: 'icon'
      })
      .mount('#app')

使用

  <template>
    ....
    <icon :data="switchObj[onlyOneChild.meta.icon]" original></icon>
    ....
  </template>
  <script lang="ts">
    ...
    import example from '@/icons/example.svg'
    import hospital from '@/icons/hospital.svg'
    import patientList from '@/icons/patientList.svg'
    import scanCode from '@/icons/scanCode.svg'
    import home from '@/icons/home.svg'
    export default defineComponent({
      data() {
        return {
          switchObj: {
            example,
            hospital,
            patientList,
            scanCode,
            home
          }
        }
      }
    })
  </script>