如何在Vue3+Vite的项目中优雅的使用SVG

初始化项目

首先，使用create-vue创建一个基于Vite的Vue3项目

npm init vue@latest

下载和配置插件

执行 npm install vite-plugin-vue-svg-icons --save-dev 安装插件

在vite.config.js中增加如下配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { fileURLToPath, URL } from 'node:url';
import vitePluginVueSvgIcons from "vite-plugin-vue-svg-icons";
export default defineConfig({
  plugins: [
    vue(),
    vitePluginVueSvgIcons({ 
        dir: fileURLToPath(new URL("./src/assets/svg", import.meta.url)) //svg的存放目录
    }),
  ],
})

注册组件

将这个插件提供的组件在main.js中注册到全局

//main.js
import { createApp } from 'vue';
import App from './App.vue';
import SvgIcon from 'svg-icon';

createApp(App).component('SvgIcon',SvgIcon).mount('#app');

单色SVG和多色SVG

一般使用SVG图标有两种情况，一种是需要保留原色的多色图标，一种是需要动态更改颜色的单色图标，这个插件贴心的为我们考虑了这两种情况，只要是放在src/assets/svg目录下的SVG都会被当成单色图标，可以通过css的fill属性或者SvgIcon组件的color参数来改变颜色。而在src/assets/svg/multicolor目录下的SVG都会被当成多色图标，这些图标的颜色是不能更改的。

单色图标

太阳.svg是单色图标，放在src/assets/svg目录下

多色图标

地球.svg是多色图标，放在src/assets/svg/multicolor目录下

使用效果

<template>
    <div class="app">
        <SvgIcon name="太阳" color="red" size="100"/>
        <SvgIcon name="地球" color="red" size="100"/>
    </div>
</template>

黄色的太阳.svg通过SvgIcon的color被改成了红色，而由于地球.svg放在了multicolor目录中，所以无法更改其颜色。