安装

pnpm install vite-plugin-svg-icons -D

在vite.config.ts中配置插件

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
export default () => {
  return {
    plugins: [
      createSvgIconsPlugin({
        // Specify the icon folder to be cached
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // Specify symbolId format
        symbolId: 'icon-[dir]-[name]',
      }),
    ],
  }
}

入口文件导入

import 'virtual:svg-icons-register'

创建assets/iocns文件夹放svg

使用

👆以上少一步，错一步都不会生效。快点给我回去复查！(╯▔皿▔)╯

// #icon-home 图标名
<svg style="width: 100px; height: 100px">
    <use xlink:href="#icon-home" fill="pink"></use>
 </svg>

封装组件

// 创建 components/SvgIcon/index.vue
<script setup lang="ts">
defineProps({
  // 前缀
  prefix: {
    type: String,
    default: '#icon-',
  },
  name: String, // icon名字
  width: String, // 图标宽度
  height: String, // 图标高度
  color: String, // 图标颜色
})
</script>

<template>
  <svg :style="{ width: width, height: height }">
    <use :xlink:href="prefix + name" :fill="color"></use>
  </svg>
</template>

使用svg组件

import svgIcon from '@/components/SvgIcon/index.vue'

<svg-icon name="store" width="200px" height="200px" color="pink"></svg-icon>

问题：color不生效

原因： 复制的svg图标自带fill属性，所以不生效。

解决： 删除svg中的fill属性 <一个一个删好麻烦@_@>