vite-plugin-svg-icons的用法，以及改变svg里path的fill颜色

1. 问题-已解决

1.1 vite-plugin-svg-icons无法通过use里的fill属性来改变颜色

• 在业务项目中使用的时候，有时候可能发生UI给的svg图标无法通过fill属性来调整所需要的颜色，只要把下载下来的svg里的fill删掉就行，注意可能svg和path上都有个fill。
  

2. 项目配置

2.1安装SVG依赖插件

pnpm install vite-plugin-svg-icons -D

2.2在vite.config.ts中配置插件

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

export default defineConfig({
  plugins: [
    vue(),
    /** 此处配置vite-plugin-svg-icons*/
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹
      iconDirs: [path.resolve(process.cwd(), "src/assets/svg")],
      // 指定symbolId格式
      symbolId: "icon-[dir]-[name]",
    }),
  ]
});

2.3 在main.ts中引入

import "virtual:svg-icons-register";

2.4 测试基本使用

• 图片在项目中的地址： src/assets/svg/test.svg
• 图片是阿里矢量图标库上找的：icon-phone out

<svg t="1722999264940" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6733" width="64" height="64"><path d="M764.197547 1013.987556h-13.084445a529.180444 529.180444 0 0 1-255.829333-88.234667A1139.939556 1139.939556 0 0 1 40.855324 424.106667 448.682667 448.682667 0 0 1 1.715769 275.911111a171.804444 171.804444 0 0 1 53.646222-150.528l16.099556-15.758222a311.751111 311.751111 0 0 1 52.906666-44.373333 135.68 135.68 0 0 1 168.049778 6.997333A351.118222 351.118222 0 0 1 398.231324 212.195556a141.937778 141.937778 0 0 1-34.872888 164.010666c-9.045333 8.988444-17.408 18.602667-25.031112 28.842667 5.859556 10.865778 12.572444 21.276444 20.024889 31.118222a909.937778 909.937778 0 0 0 229.489778 225.735111c7.566222 5.290667 15.416889 10.126222 23.608889 14.506667 5.518222-4.266667 15.303111-13.767111 21.048889-19.342222 62.179556-60.871111 121.173333-69.176889 197.404444-27.306667 41.528889 22.016 78.506667 51.825778 108.828445 87.779556 44.657778 48.981333 47.900444 122.88 7.793778 175.559111a405.048889 405.048889 0 0 1-90.282667 94.094222 144.497778 144.497778 0 0 1-92.046222 26.794667z m-10.069334-75.207112a88.746667 88.746667 0 0 0 56.945778-10.808888 326.030222 326.030222 0 0 0 73.216-75.207112 63.431111 63.431111 0 0 0-3.015111-87.324444 285.184 285.184 0 0 0-86.755556-69.176889c-46.876444-25.088-70.200889-22.584889-108.600888 15.018667-50.176 50.176-75.264 56.718222-138.922667 13.824a984.405333 984.405333 0 0 1-248.604445-244.280889c-48.924444-67.697778-46.648889-95.573333 12.060445-156.273778a67.697778 67.697778 0 0 0 19.057778-82.261333 272.611556 272.611556 0 0 0-83.057778-110.136889 61.952 61.952 0 0 0-81.180445-2.730667c-14.620444 10.012444-28.103111 21.617778-40.163555 34.588445l-18.033778 17.351111c-24.007111 22.926222-35.100444 56.263111-29.582222 89.031111 3.811556 42.382222 14.848 83.854222 32.597333 122.595555 87.779556 193.137778 225.678222 346.168889 426.325334 468.536889a456.476444 456.476444 0 0 0 217.713777 76.970667v0.284444z" p-id="6734"></path></svg>

• 测试效果：

<template>
  <div>
    <h1> vite-plugin-svg-icons是否生效 </h1>
    <!-- svg内部需要与use标签结合使用 -->
    <svg>
      <!-- xlink:href表示用哪一个图标，属性值为：#icon-图标名字 -->
      <!-- use标签可以通过fill属性设置图标的颜色 -->
      <use xlink:href="#icon-test" fill="#ffffff"></use>
    </svg>
  </div>
</template>

2.5 封装组件使用-建议

2.5.1 封装svg-icon组件:

路径：src/components/SvgIcon/index.vue

<template>
  <svg>
    <!-- xlink:href表示用哪一个图标 -->
    <use :xlink:href="prefix + name" :fill="color"></use>
  </svg>
</template>

<script setup lang="ts">
defineProps({
  // xlink:href属性值前缀
  prefix: {
    type: String,
    default: "#icon-",
  },
  // 使用的图标的名字
  name: String,
  // 图标颜色
  color: {
    type: String,
    default: "",
  },
});
</script>

<style scoped></style>

2.5.2 使用方法一：按需引入

<template>
  <div>
    <h1> vite-plugin-svg-icons是否生效 </h1>
    <svg-icon name="test" color="blue"></svg-icon>
  </div>
</template>

// 如果注册全局组件使用，可省略下面的引入
import SvgIcon from '@/components/SvgIcon/index.vue';

2.5.3 使用方法二：注册全局组件①

• 在main.ts中引入

import { createApp } from "vue";
import App from "@/App.vue";
import "virtual:svg-icons-register";
import SvgIcon from '@/components/SvgIcon/index.vue';

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

• 使用：参考 2.5.2
  

2.5.4 使用方法二：注册全局组件②

• 在component中引入项目中全部的全局组件，这样main.ts中的代码就不会太多了

路径：src/components/index.ts

import { App } from "vue";
// 引入项目中全部的全局组件
import SvgIcon from "./SvgIcon/index.vue";

// 全局对象
const allGloablComponent = {
  SvgIcon,
};

// 对外暴露插件对象
export default {
  install(app: App) {
    // 遍历注册全局组件
    Object.keys(allGloablComponent).forEach((key) => {
      app.component(key, allGloablComponent[key as keyof typeof allGloablComponent]);
    });
  },
};

• 在main.ts中引入全局对象

import gloabComponent from '@/components'
app.use(gloabComponent)