vite-plugin-svgtovue v0.1.1

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图标

插件参数列表

组件引入使用

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>