3：svgicon的使用的整体步骤

1：在src下创建icons文件放入svg文件的icon，并切创建index.js, 来处理icon

主要创建：1：src/icons/svg/svg格式icon

2：src/icons/index.js

2：src/icons/index.js 写入代码如下（注释比较明确，可以参考注释）

复制代码

import SvgIcon from "@/components/SvgIcon";

// https://webpack.docschina.org/guides/dependency-management/#requirecontext
// 通过 require.context() 函数来创建自己的 context
const svgRequire = require.context("./svg", false, /\.svg$/);
// 此时返回一个 require 的函数，可以接受一个 request 的参数，用于 require 的导入。
// 该函数提供了三个属性，可以通过 require.keys() 获取到所有的 svg 图标
// 遍历图标，把图标作为 request 传入到 require 导入函数中，完成本地 svg 图标的导入
svgRequire.keys().forEach((svgIcon) => svgRequire(svgIcon));

export default (app) => {
  app.component("svg-icon", SvgIcon);
};

/**
 * 对以上代码进行解析
 * 1. import SvgIcon from '@/components/SvgIcon'：
    - 从 @/components/SvgIcon 路径导入了名为 SvgIcon 的组件。

2. const svgRequire = require.context('./svg', false, /\.svg$/)：
    - 使用 require.context() 函数创建了一个上下文。
    - './svg'表示要扫描的目录路径，即当前目录下的 svg 文件夹。
    - false 表示不递归扫描子目录。
    - /\\.svg$/ 是一个正则表达式，用于匹配以 .svg 结尾的文件。

3. svgRequire.keys().forEach(svgIcon => svgRequire(svgIcon))：
    - svgRequire.keys() 获取了匹配到的所有 SVG 文件的路径。
    - forEach 方法遍历这些路径。
    - 对于每个路径 svgIcon，通过 svgRequire(svgIcon) 来导入对应的 SVG 图标文件。

4. export default app => { app.component('svg-icon', SvgIcon) }：
    - 这是一个默认导出的函数，接收一个 app 参数。
    - 使用 app.component('svg-icon', SvgIcon) 将 SvgIcon 组件注册为名为 svg-icon 的组件，以便在应用中可以使用 <svg-icon> 标签来调用该组件。

总体来说，这段代码的主要目的是自动导入 svg 文件夹下的所有 SVG 图标文件，并将 `SvgIcon` 组件注册到应用中以便使用。

例如，如果 svg 文件夹下有 icon1.svg 和 icon2.svg 两个文件，通过上述代码的处理，就能够在应用中使用 <svg-icon> 标签来展示这两个图标对应的内容。
 */

3：在man.js 中全局引入icons

复制代码

// 导入svgIcon
import installIcons from "@/icons/index.js";
app.use(installIcons);

4：在utils创建validate.js，整体结构是 src/utils/validate.js

5: 在validate.js中写入代码（注释比较明确可以参考注释，这里的用途是解析是不是链接形式的icon，这里会在注册icon组件时，会使用到这个方法）

复制代码

export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path);
}

/**
 * 以下是对这段代码的解释：
 * 1. export function isExternal(path) ：
    - 这是一个被导出的函数，名为 `isExternal` ，它接收一个参数 `path` 。

 * 2. return /^(https?:|mailto:|tel:)/.test(path)：
    - 使用正则表达式 `/^(https?:|mailto:|tel:)/` 来匹配 `path` 的值。
    - `^` 表示匹配字符串的开始位置。
    - `https?:` 匹配 `http` 或者 `https` 开头的字符串。
    - `|` 表示逻辑或，即可以匹配其后的部分。
    - `mailto:` 匹配以 `mailto:` 开头的字符串。
    - `tel:` 匹配以 `tel:` 开头的字符串。
    - `.test(path)` 方法用于测试 `path` 是否匹配这个正则表达式，如果匹配则返回 `true` ，否则返回 `false` 。

总的来说，这个函数的作用是判断传入的 `path` 参数是否是以 `http` 或 `https` 、 `mailto:` 或 `tel:` 开头，
如果是则返回 `true` ，表示是外部链接，否则返回 `false` 。

例如，如果 `path` 的值为 `https://www.example.com` ，函数将返回 `true` ；如果 `path` 的值为 `internal/path` ，
函数将返回 `false` 。
*/

6：在src/components/SvgIcon/index.vue，以这种路径进行创建文件，目的是为了封装icon组件

7：在src/components/SvgIcon/index.vue 写入一下代码

复制代码

<template>
  <div
    v-if="isExternal"
    :style="styleExternalIcon"
    class="svg-external-icon svg-icon"
    :class="className"
  ></div>

  <svg v-else class="svg-icon" :class="className" aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg>
</template>
<script setup>
import { isExternal as external } from "@/utils/validate";
import { computed, defineProps } from "vue";
const props = defineProps({
  icon: {
    type: String,
    default: "",
  },
  className: {
    type: String,
    default: "",
  },
});
/**
 * 判断是否为外部链接
 */
const isExternal = computed(() => external(props.icon));
console.log(isExternal, "isExternal");
/**
 * 外部图标链接
 */
const styleExternalIcon = computed(() => ({
  mask: `url(${props.icon}) no-repeat 50% 50%`,
  "-webkit-mask": `url(${props.icon}) no-repeat 50% 50%`,
}));
/**
 * 项目内图标
 */
const iconName = computed(() => `#icon-${props.icon}`);
</script>

<style lang="scss" scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.svg-external-icon {
  background-color: currentColor;
  mask-size: cover !important;
  display: inline-block;
}
</style>

8：在需要使用的文件中进行使用（可以根据自己的需求放入链接形式或者内部都可以）

复制代码

 <span class="show-pwd">
              <svg-icon
            :icon="passwordType === 'password' ? 'eye' : 'eye-open'"
            @click="onChangePwdType"
          />
        </span>
<!-- 以上是内部文件中的svg -->

9：这个时候图标还是不显示的需要下载 svg-sprite-loader（根据自己版本下载版本使用）

复制代码

npm i --save-dev svg-sprite-loader@6.0.9

10：在vue.config.js 中处理icon，写入一下代码（xxx是替换自己的地址）

复制代码

const path = require("path");

function resolve(dir) {
  return path.join(__dirname, dir);
}
// https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F
module.exports = {
  // devServer: {
  //   // 配置反向代理
  //   proxy: {
  //     // 当地址中有/api的时候会触发代理机制
  //     '/api': {
  //       // 要代理的服务器地址  这里不用写 api
  //       target: 'https://api.xxx.xxx.club/',
  //       // target: 'http://xxx.x.x.x:3004/',
  //       changeOrigin: true // 是否跨域
  //     }
  //   }
  // },
  chainWebpack(config) {
    // issue：https://coding.xxx.com/learn/xxx/280786.html
    // config.plugin('define').tap((args) => {
    //   args[0] = Object.assign(args[0], {
    //     __VUE_I18N_FULL_INSTALL__: true,
    //     __VUE_I18N_LEGACY_API__: true,
    //     __INTLIFY_PROD_DEVTOOLS__: false
    //   })
    //   return args
    // })

    // 设置 svg-sprite-loader
    // config 为 webpack 配置对象
    // config.module 表示创建一个具名规则，以后用来修改规则
    config.module
      // 规则
      .rule("svg")
      // 忽略
      .exclude.add(resolve("src/icons"))
      // 结束
      .end();
    // config.module 表示创建一个具名规则，以后用来修改规则
    config.module
      // 规则
      .rule("icons")
      // 正则，解析 .svg 格式文件
      .test(/\.svg$/)
      // 解析的文件
      .include.add(resolve("src/icons"))
      // 结束
      .end()
      // 新增了一个解析的loader
      .use("svg-sprite-loader")
      // 具体的loader
      .loader("svg-sprite-loader")
      // loader 的配置
      .options({
        symbolId: "icon-[name]",
      })
      // 结束
      .end();
    // 创建一个新的规则，用于处理 element-plus 2 的错误
    // config.module
    //   .rule("element-plus-2")
    //   .test(/\.mjs$/)
    //   // https://webpack.docschina.org/configuration/module/#ruletype
    //   .type("javascript/auto")
    //   .include.add(/node_modules/)
    //   .end();
  },
};

注意：以上步骤是使用svgicon的大概步骤，具体顺序可根据自己习惯进行更改，保证能正常实现即可，如有问题希望指教，谢谢大家！一起学习进步吧~~~