vite+vue3里使用svgIcon图标

项目地址：github.com/wangling012…

1、封装组件

<template>
 <svg aria-hidden="true">
  <use :class="fillClass" :xlink:href="symbolId" :fill="color" />
 </svg>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
 // 显示的 svg 图标名称（剔除 icon-）
 name: {
  type: String,
  required: true
 },
 // 直接指定 svg 图标的颜色
 color: {
  type: String
 },
 // 通过 tailwind 指定 svg 颜色的类名
 fillClass: {
  type: String
 }
})
// 真实显示的 svg 图标名（拼接 #icon-）
// 注意这里的icon需要与在vite.config.js里对应上
const symbolId = computed(() => `#icon-${props.name}`)
</script>

2、在vite.config.ts配置

npm i vite-plugin-svg-icons -D

import { defineConfig } from 'vite'
import * as path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
export default defineConfig({
 plugins: [
  createSvgIconsPlugin({
   // 指定需要缓存的图标文件夹
   iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
   // 指定symbolId格式
   symbolId: 'icon-[name]'
  })
 ]})

3、在main.ts中引入

import 'virtual:svg-icons-register'

4、使用

<m-svg-icon class="w-1.5 h-1.5" name="hamburger"></m-svg-icon>