14、配置svg图标使用环境

1、安装依赖

在vue3 + vite项目中使用svg图标，需要先安装如下插件：

// 建议一起安装，避免报错
yarn add -D vite-plugin-svg-icons
// 如果因为 vite-plugin-svg-icons 版本问题导致报错，可以安装如下一个依赖
yarn add fast-glob -D

2、配置插件规则

安装完 vite-plugin-svg-icons 插件依赖之后，在vite.config.ts配置文件的plugins插件配置项中如下配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import {createSvgIconsPlugin} from "vite-plugin-svg-icons";

export default defineConfig({
  plugins: [
    vue(),
    // 配置 svg 插件
    createSvgIconsPlugin({
      // 配置图标文件夹路径（必须）
      iconDirs: [resolve(process.cwd(), 'src/assets/svg')],

      // 配置SymbolId格式
      symbolId: 'icon-[dir]-[name]',
    }),
  ],
})

在上面的示例中，我们使用svg插件库提供的 createSvgIconsPlugin 函数创建了一个插件实例，并将其配置到了全局 plugins 中，使其实例能够在全局有效。同时，我们也对该插件实例进行了定制配置，例如，其中的 iconDirs 和 symbolId 两个配置项，其中，iconDirs 指定 svg 图标的加载目录，symbolId 指定图标名称格式。
下面附赠我本人在此练习项目中使用的初版较完整的 vite.config.ts 配置，内容如下，以供参考：

import {defineConfig, loadEnv} from "vite";
import vue from "@vitejs/plugin-vue";
import {createSvgIconsPlugin} from "vite-plugin-svg-icons";
import {resolve} from "path";

// vite的相关配置
export default defineConfig(({command, mode}) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
  // 如果是两个参数则读取我们配置在 .env.mode的环境变量；加第三个参数 ”“ 则当前主机的全量环境变量配置
  const env = loadEnv(mode, process.cwd());
  console.log("读取.env中配置的环境变量", env);
  // 读取运行模式，如果是dev运行 "dev": "vite --mode development", 则mode为development
  console.log("读取mode变量", mode);
  // process.cwd() 可以获取当前工作目录，例如 D:\Git\Git-Repository\vue3-template-web
  console.log("读取工作路径变量", process.cwd());

  return {
    plugins: [
      vue(),
      createSvgIconsPlugin({
        // 配置图标文件夹路径（必须）
        iconDirs: [resolve(process.cwd(), 'src/assets/svg')],

        // 配置SymbolId格式
        symbolId: 'icon-[dir]-[name]',
      })
    ],
    // 此处配置项目服务参数
    server: {
      host: "0.0.0.0", // 项目运行地址，此处代表localhost
      port: 3000, // 项目运行端口
      open: true, //编译之后是否自动打开页面
      hmr: true, // 是否开启热加载
      https: false, // 是否开启https模式
      cors: true, // 是否开启跨域
      // 设置代理,代理所有从vite发出的url中带/api的请求
      proxy: {
        "^/api/.*": {
          // url请求路径匹配 /api
          target: env.VITE_APP_BASE_URL, // 匹配上则转发到target 目标Host
          // 将vite服务的Host更改为target目标 URL ，如果不设置true则发出的请求Host依旧是vite服务的Host
          changeOrigin: true,
          // 路径重写，剔除/api，然后将剩余的path拼接到target后，组成最终发出去请求
          // path 参数代表的是端口后的路径，例如http://localhost:6666/api/userInfo ，则path代表/api/userInfo
          rewrite: (path: string) => path.replace(/^\/api/, ""),
        },
      },
    },
    logLevel: "info",
    // 配置src的别名@
    resolve: {
      alias: {
        "@": resolve(__dirname, "./src"),
      },
    },
    // 配置 less ，使其一些新特性能够生效
    css: {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
          additionalData: '@import "@/styles/variables.less";'
        }
      }
    }
  };
});

3、全局引入svg图标注册器

在配置完成之后，我们还需要在 main.ts 中全局引入如下内容：

import 'virtual:svg-icons-register'

4、封装成svg图标组件

虽然完成了前面三步就可以在项目中使用了，使用方式如下：

<!-- 引入名称为icon-test的svg文件并渲染 -->
<svg aria-hidden="true">
  <use xlink:href="#icon-phone" fill="red"></use>
</svg>

特别说明：在上例中 xlink:href 迎来关联 svg 图标，# 井号代表 v-svg 指令的缩写。因为，上面我们已经定义好了 svg 的存放目录和使用格式，因此，想要正确使用就需要将 svg 图标存放在 src/assets/svg 目录下，然后在使用时格式要遵循 icon-[dir]-[name] ，其中中括号代表可选，所以，假如我们在 src/assets/svg目录下存放了一个名称为 release 的 svg 图标，那么，该图标使用标识就是 icon-release 。
在完成了以上步骤之后，虽然我们是可以全局使用 svg 图标了，但是每使用一次都必定会存在下面这样的重复代码：

<svg aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

因此，我们有必要考虑将其封装成一个组件来使用，具体做法如下：

<template>
    <svg aria-hidden="true" :width="size" :height="size">
        <use :href="prefix + name" :fill="color"></use>
    </svg>
</template>

<script setup lang="ts">
defineProps({
    // svg 图标前缀
    prefix: {
        type: String,
        default: "#icon-"
    },
    // svg 图标名称
    name: {
        type: String,
        required: true
    },
    // svg 图标颜色
    color: {
        type: String,
        default: ""
    },
    size: {
        type: [String, Number],
        default: 20
    }
})
</script>

<svg-icon name="release"></svg-icon>

在上面封装的svg图标组件中，为了使得每个图标能够进行自定义样式，我为该组件添加了几个组件绑定属性，通过这些属性，我们可以动态的改变每一个图标的样式。如果组件属性不够用，我们还可以继续添加。例如，上面的组件中，我们还可以添加一个 size 属性用来控制组件大小。下面从阿里巴巴图标库下载一个svg图标文件，并命名为 release ，放入项目中如下目录：

没加 size 属性测试效果如下：

添加了 size 属性测试效果如下：

额外说明

1、在SVG 2规范中，xlink:href属性已经被废弃，取而代之的是href属性。因此，在SVG 2中，可以省略xlink前缀，直接使用href属性。
但是，在一些老版本的浏览器中，可能仍然需要使用xlink:href属性。为了兼容性，可以在使用xlink:href属性时保留xlink前缀，或者使用href属性时同时添加xlink:href属性，以确保在不同的浏览器中都能正常显示。例如：

<svg>
  <use xlink:href="#icon"></use> <!-- 旧版本浏览器需要 xlin:href 属性 -->
  <use href="#icon" xlink:href="#icon"></use> <!-- 兼容性写法 -->
</svg>

2、如果想要不出错的使用 svg 图标，请务必按照我说的步骤一步一步来，同时也要仔细看好每一处的细节和文字解释，避免因粗心导致出现错误。
3、详细的使用和配置内容可以参考该插件官网，地址为vite-plugin-svg-icons官网