vite-plugin-svgtovue

一个将SVG文件转化为Vue组件的插件，支持vue， jsx， tsx三种格式。

代码演示：

import pathe from 'node:path'
import svgComponent from 'vite-plugin-svgtovue'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    svgComponent({
      input: pathe.join(__dirname, '../wwwsvg/'),
      output: './src/components/tri-icon/',
      suffix: 'ts',
      template: 'tsx',
      outputListPath: './src/components/tri-icon/list.ts',
    }),
  ],
})

生成代码目录

tri-icon目录：
		├─── src // 组件目录
		├─── index.html // 演示demo，展示列表
		├─── index.ts  
		├─── list.ts // SVG列表，一般用于展示所有SVG图标

插件参数列表

| 参数名称 | 参数描述 | 参数值 | 默认值 | | :------------: | ------------------- | :----------: | :----: | | input | SVG文件位置 | string | 必须 | | output | 组件输出位置 | string | 必须 | | prefix | 组件前缀 | string | tri | | suffix | 组件导出前缀 | js, ts | ts | | template | 生成vue组件的模版 | vue2,tsx,jsx | vue3 | | templatePath | 自定义vue组件的模版 | string | ---- | | outputDemoPath | demo的输出路径 | string | ---- | | outputListPath | 列表的输出路径 | string | ---- |

组件引入使用

1. 全局导入

   import { createApp } from 'vue'
   import App from './App.vue'
   import TriIcon from './components/tri-icon'
      
   createApp(App).use(TriIcon).mount('#app')

2. 局部引用

   <script setup lang="ts">
   import TriUser from './components/tri-icon/src/TriUser.vue'
   </script>
      
   <template>
     <div class="tri-icon">
       <tri-icon size="28px" color="var(--color-white)" />
     </div>
   </template>