VUE3 使用 vite-plugin-svg-icons加载SVG
目录
1. 装依赖
2. 在src里面创建文件夹
3. 封装svg组件
4. vite.config.js 中配置svg
5. 引入+挂载（在main.js中）
6. 单页面直接用
1. 装依赖
npm i vite-plugin-svg-icons -D2. 在src里面创建文件夹
3. 封装svg组件
代码明细：
<template><svg aria-hidden="true"><use :xlink:href="symbolId" /></svg> </template><script> import { defineComponent, computed } from "vue";export default defineComponent({name: "SvgIcon",props: {prefix: {type: String,default: "icon",},name: {type: String,required: true,},},setup(props) {const symbolId = computed(() => `#${props.prefix}-${props.name}`);return { symbolId };}, }); </script>
4. vite.config.js 中配置svg
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({resolve: {alias: {'@': path.resolve(__dirname, 'src')}},plugins: [vue(),createSvgIconsPlugin({// 指定需要缓存的图标文件夹iconDirs: [path.resolve(process.cwd(), 'src/icons/svg')],// 指定symbolId格式symbolId: '[name]',})],css: {preprocessorOptions: {less: {javascriptEnabled: true,},},},})
5. 引入+挂载（在main.js中）
代码：
//导入Svg图片插件，可以在页面上显示Svg图片 import "virtual:svg-icons-register"; import SvgIcon from "./components/SvgIcon.vue"; app.component("SvgIcon", SvgIcon);
6. 单页面直接用
代码：
<el-icon class="icon"><SvgIcon name="Out" class="icon-svg" /> </el-icon><div class="details"><p class="price">{{ CardEight.OutCount }} 台</p><p class="desc">本年度出厂设备数量</p></div>
ps: 下载的svg文件保存在 src\icons\svg 内，如图：
修改svg 的背景色 （改变fill的值即可）
