vite-plugin-svgtovue

一个将 SVG 文件转化为 Vue 组件的插件，支持 vue， jsx， tsx 三种格式。子文件夹下的 color 直接转化为组件，不处理 path，polygon，circle 等中的属性

代码演示：

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

const path = require('path')
const { defineConfig } = require('@vue/cli-service')
const WebpackSvgComponent = require('../../dist/webpack.cjs')

const svgComponents = new WebpackSvgComponent({
  input: path.join(__dirname, '../wwwsvg/'),
  output: './src/components/iconfont/',
  suffix: 'ts',
  template: 'vue3',
  outputListPath: './src/components/iconfont/list.ts',
})

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: (config) => {
    const plugins = [svgComponents]
    config.plugins = [...config.plugins, ...plugins]
  },
})

生成代码目录

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>