vue3+vite实现自定义svg图标组件，自定义图标颜色，一次封装永久使用。附带源码亲测有效额

一、项目中为何使用svg图标

通常在项目中使用的icon图标是组件库自带的，有时候并不能满足我们的需求，有人会说可以使用图片代替，当然这也是可以解决问题的，但我们需要考虑项目的性能。如果大量使用图片会导致页面加载耗时，而如果大量使用svg矢量图标，页面上加载的不再是图片资源，因为SVG文件比img要小的很多，放在项目中几乎不占用资源，这对页面性能来说是个很大的提升。

推荐的svg图标库:iconfont-阿里巴巴矢量图标库,里面包含了多种图标和字体

二、实现

1.安装插件

npm i fast-glob@3.2.11 -D
npm i vite-plugin-svg-icons@2.0.1 -D

2.创建图标文件夹，用于存放svg图标

3.SvgIcon组件封装，一般放在全局组件下面

<template>
    <svg
      class="svg-icon"
      :class="className"
      aria-hidden="true"
      :style="{ width: size + 'px', height: size + 'px' }"
    >
      <use :href="iconName" />
    </svg>
  </template>
  
  <script setup lang="ts">
  import { computed } from "vue";
  
  const props = defineProps({
    icon: {
      type: String,
      default: "",
    },
    className: {
      type: String,
      default: "",
    },
    size: {
      type: Number,
      default: 20,
    },
  });
  
  const iconName = computed(() => `#icon-${props.icon}`);
  </script>
  
  <style lang="scss" scoped>
  .svg-icon {
    fill: currentColor;
  }
  </style>

4.vite配置：vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { TDesignResolver } from "unplugin-vue-components/resolvers";
import { join ,resolve} from "path";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      vue(),
       /** 组件按需引入配置 */
      AutoImport({
        resolvers: [
          TDesignResolver({
            library: "vue-next",
          }),
        ],
      }),
      Components({
        resolvers: [
          TDesignResolver({
            library: "vue-next",
          }),
        ],
      }),
      /** svg 图标配置 */
      createSvgIconsPlugin({
        iconDirs: [resolve(process.cwd(), "src/assets/svg-icons")],
        symbolId: "icon-[dir]-[name]",
      }),
    ],
   /**路径别名配置 */
    resolve: {
      alias: {
        "@": join(__dirname, "src"),
      },
    },
  };
});

5.main.js 引入注册脚本，全局注册SvgIcon组件

import { createApp } from 'vue'
import App from './App.vue'
import SvgIcon from '@/components/SvgIcon.vue'
//引入注册脚本
import 'virtual:svg-icons-register';

const app=createApp(App)
// 注册全局SvgIcon组件
app.component('SvgIcon',SvgIcon)
app.mount('#app')

6.使用自定义icon图标

<script setup lang="ts">
const icon1="hot-pot"
const icon2="lantern"
const icon3="fan"
</script>

<template>
  <div>
    <h2>自定义svg图标</h2>
    <SvgIcon :icon="icon1" :size="48" color="red" />
    <SvgIcon :icon="icon2" :size="48" color="red" />
    <SvgIcon :icon="icon3" :size="48" color="red" />
  </div>
</template>

<style scoped>
</style>

7.效果展示

三、改变svg图标颜色：仅用于纯色系图标

在项目中有些图标有颜色要求，所以代码优化一下

1.找到我们用的svg图标，将我们需要自定义的颜色fill属性删掉

2.封装的代码做调整

3.使用

4.展示效果

vue2（vue-cli）自定义图标参考Vue2封装svg-icon组件在项目开发中，svg的使用非常广泛，其中常见便是展示各种类型的图标了。因此，如何在vue - 掘金