v3+vite环境中使用 svg图标

在 v3+vite 的开发环境中，我们不再需要手动导入和转换每个 SVG 文件。通过引入一些强大的插件，如 vite-plugin-svg-icons，我们可以实现 SVG 图标的自动注册和按需使用。这意味着，你可以将你的 SVG 图标文件放在指定的目录中，然后在你的 Vue 组件中，通过简单的标签形式来引用它们，就像使用普通的 Vue 组件一样。

webpack中使用 svg的方法

安装插件：

npm i vite-plugin-svg-icons  --save-dev
npm i fast-glob --save-dev

fast-glob:

fast-glob 提供了遍历文件系统的方法，并根据Unix Bash shell 使用的规则返回与一组定义的指定模式匹配的路径名，并进行了一些简化，同时以任意顺序返回结果。

使用：

 <svg-icon
    icon="https://mp-12e682f6-89b1-432f-bfd8-04c11a83455d.cdn.bspapp.com/zi-x-c-02.svg"
  ></svg-icon>

  <svg-icon icon="zi-x-c-01" color="violet"></svg-icon>

svg-cions封装：

<template>
  <!-- 判断是否是外部链接 -->
  <img v-if="isExternall" :src="props.icon" v-bind="$attrs" />
  <!-- 判断是否是内置图标 -->
  <svg v-else v-bind="$attrs">
    <use :xlink:href="iconName" :style="{ fill: color }"></use>
  </svg>
</template>

<script setup>
import { computed, defineProps } from "vue";
const props = defineProps({
//图标名称，会根据传入的信息来判断是否为外链
  icon: {
    type: String,
    required: true,
  },
  //svg图标颜色
  color: {
    type: String,
  },
});
const isExternall = computed(() => /(https?:|mailto:tel:)/.test(props.icon));
const iconName = computed(() => `#icon-${props.icon}`);
</script>

<style scoped></style>

vite.config.js

vite-plugin-svg-icons 是一个第三方插件，相比 webpack 中vite使用起来要简单得多。

symbolId: "icon-[name] 在使用时候需要按照此写法，此写法也可以自定义，不一定是 icon-'xxx'。

vite会读取svg文件名作为 svg的id来使用，所以我们使用的时候只需要 icon-[svg文件名]即可。

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";

import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
export default defineConfig({
  plugins: [
    vue(),
    createSvgIconsPlugin({
    //获取绝对路径
      iconDirs: [path.resolve(process.cwd(), "src/assets/svg")],
      //在使用时候需要按照此写法，此写法也可以自定义，不一定是 icon-'xxx'
      // vite会读取svg文件名作为 svg的id来使用，所以我们使用的时候只需要 icon-[svg文件名]
      symbolId: "icon-[name]",
    }),
  ],
  resolve: {
    alias: {
      "~": "/src",
    },
  },
});

main.js

import "virtual:svg-icons-register"; 虚拟模块（Virtual Module）

这是虚拟模块的引入方式，用于给脚手架插件在打包和开发时做相应的处理。Vite 和 Rollup 中都约定以 virtual: 作为虚拟模块的前缀。

...
import "virtual:svg-icons-register";
import svgIcon from "~/components/svg-icons/index.vue";
const app = createApp(App);
app.component("svgIcon", svgIcon);
app.mount("#app");

svg中颜色的修改：如果想自定义svg的颜色，需要找到对应svg 把fill删掉，因为fill的优先级会高于 自定义传入的 fill。

下一篇 ：webpack中使用 svg的方法