使用vite+vue3封装使用SVG图标

1、加载svg的使用插件

npm install vite-plugin-svg-icons fast-glob -D

2、在vite.config.ts中配置

import { createSvgIconsPlugin } from "vite-plugin-svg-icons";

export default defineConfig({
  plugins: [
    vue(), 
    defineOption(),
    createSvgIconsPlugin({
      // 指定目录(svg存放目录）
      iconDirs: [path.resolve(process.cwd(), "src/assets/svgs")],
      // 使用 svg 图标的格式（name为图片名称）
      symbolId: "icon-[dir]-[name]",
    })
  ],
})

3、在src的目录下创建  src/assets/svgs/**.svg

4、在conponents中创建svg.vue文件，封装代码

<template>
    <svg
        aria-hidden="true"
        :width="width"
        :height="height"
    >
        <use :xlink:href="`#icon-${name}`" :fill="color"/>
    </svg>
  </template>
  
  <script setup lang="ts">
    defineProps<{
      name: string,
      width: string,
      height: string,
      color?: string
    }>();
  </script>

5、在main.ts中全局注册

import 'virtual:svg-icons-register';
import SvgIcon from "./components/svg/index.vue";

const app = createApp(App)
app.component("SvgIcon", SvgIcon);

6、如何在项目中使用

<template>
    <svg-icon name="home" width="24" height="24" color="#57EF0C"></svg-icon>
</template>

// name为svg的名称

7、 注意：如果在项目中color颜色值无效时，需要注意

打开svg图片代码：查看下fill值是否为空或者为currentColor