Vue3+Vite 实现引入svg图标

页面展示效果图如下：

1. 安装依赖插件 vite-plugin-svg-icons

npm i vite-plugin-svg-icons

2. 安装 fast-glob

npm i fast-glob

3. 配置 vite.config.js（或vite.config.ts）

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

export default defineConfig({
  plugins: [
    createSvgIconsPlugin({
      // 需要自动导入的 svg 文件目录（可自行修改）我的路径如下图所示
      iconDirs: [path.resolve(process.cwd(), "src/svgIcon/svg")],
      // 执行icon name的格式（可自行修改）
      symbolId: "icon-[dir]-[name]",
    })
  ],
})

4. 在 main.js(或main.ts) 入口注册脚本

import "virtual:svg-icons-register";
注意： vite-plugin-svg-icons 插件注册，不引入会导致svg图标无法正常显示

5. 封装 SvgIcon 组件

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

<script setup lang="ts" name="SvgIcon">
import { computed, CSSProperties } from "vue";

interface SvgProps {
	name: string; // 图标的名称（Svg 文件名） ==> 必传
	prefix?: string; // 图标的前缀 ==> 非必传（默认为"icon"）
	iconStyle?: CSSProperties; // 图标的样式 ==> 非必传
	color:string
}
// 接收父组件参数并设置默认值
const props = withDefaults(defineProps<SvgProps>(), {
	prefix: "icon",
	iconStyle: () => ({ width: "30px", height: "30px"}),
	color:"#333"
});

const symbolId = computed(() => `#${props.prefix}-${props.name}`);
</script>

6. main.js(或main.ts)引入svg组件并注册

import svgIcon from './svgIcon/index.vue'
import "virtual:svg-icons-register";
app.component('svg-icon',svgIcon)

7.组件中使用

<svg-icon name="订单" color="pink" iconStyle="{width:40px;height:40px}"></svg-icon>
<svg-icon name="chanpinshezhi" color="skyblue" iconStyle="{width:40px;height:40px}"></svg-icon>

踩坑：svg-icon图片不能改颜色，svg-icon 为啥变不了颜色？

因为字体图标库下载的时候svg文件里自带了fill属性，所以用color改不了svg的颜色。

解决方法：改变svg-icon图片代码中的fill属性的值（常用）

将所有的fill属性的颜色填充值，fill="xxxx"改为fill=“currentColor” 或者删除fill属性