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 -D

2. 在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的值即可）