前言

在现代前端开发中，SVG（可缩放矢量图形）因其高质量和灵活性成为了图标和图形设计的热门选择。对于 Vue 3 项目而言，将 SVG 图标封装和引用到项目中不仅能提升性能，还能带来更高的可维护性和一致性。SVG 图标本质上是矢量图形，因此无论放大还是缩小，图像都不会失真，这使得它们在响应式设计中表现尤为出色。此外，通过封装 SVG 图标，可以将图标的样式和行为与组件紧密结合，简化管理和重用的过程。这种做法不仅优化了开发流程，也提升了用户体验。接下来，我们将探讨如何在 Vue 3 项目中有效地封装和引用 SVG 图标，帮助你充分发挥它们的优势。

一、如何在线使用svg图标

1、打开iconfont素材网站，集成 svg 图标

iconfont素材网站

icomoon素材网站

• 创建 iconfont 项目
• 找到合适的 svg 图标
• 添加购物车到项目中

2、本地上传svg图标

• 挑选 svg 图标下载
• 打开iconfont上传 svg 图标
• 上传的svg图标添加至iconfont 项目

3、symbol 引用

官方帮助文档：查看，推荐使用 symbol 方式

• 支持多色图标了，不再受单色限制。
• 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
• 兼容性较差，支持 ie9+,及现代浏览器。
• 浏览器渲染svg的性能一般，还不如png。

1. 第一步：拷贝项目下面生成的symbol代码：

<script src="//at.alicdn.com/t/c/font_4546577_a2gvbkwn7z.js"></script>

2. 第二步：加入通用css代码（引入一次就行:

<style type="text/css">
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
</style>

3. 第三步：挑选相应图标并获取类名，应用于页面：

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

4、封装 svg 组件

1. 外部引用 symbol 链接

2. 接收 icon name

在vue3项目public/index.html中引入symbol 链接

<script src="//at.alicdn.com/t/c/font_4546577_a2gvbkwn7z.js"></script>

3. icon 外层样式封装

创建src/components/Icon.vue

<template>
  <div class="icon-wrapper" :style="{ ...style }">
    <svg class="icon">
      <use :href="iconName"></use>
    </svg>
  </div>
</template>

<script setup>
import { computed, defineProps } from "vue";

const props = defineProps({
  name: String,
  prefix: {
    type: String,
    default: "icon-",
  },
  style: Object,
});

const iconName = computed(() => `#${props.prefix}${props.name}`);
</script>

<style lang="scss" scoped>
.icon {
  width: 100%;
  height: 100%;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.icon-wrapper {
  display: inline-block;
}
</style>

4. 引用Svg组件

<template>
  <div class="wrapper">
    <i-icon name="vuejs_icon" />
  </div>
</template>

<script setup>
import IIcon from "@/components/Icon.vue";
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  height: 100%;
}
</style>

二、如何直接使用外部、内部的svg图标

• 显示外部svg图标
• 显示内部svg图标

1、封装svg图标组件

新建src/components/SvgIcon/index.vue

<template>
  <div
    v-if="isExternal"
    :style="styleExternalIcon"
    class="svg-external-icon svg-icon"
    :class="className"
  />
  <!-- 即使 aria-hidden="true" 可以阻止内容被辅助技术读取，它并不会影响内容的视觉显示。因此，您可能需要使用CSS来隐藏这些元素（如果适用）。但是，请注意，仅仅使用CSS隐藏元素并不足以确保它们对辅助技术用户是不可见的。 -->
  <svg v-else class="svg-icon" :class="className" aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script setup>
// 避免重名，将 external当做isExternal来使用
import { isExternal as external } from '@/utils/validate'
import { defineProps, computed } from 'vue'
// defineProps接受父组件传入的对象
const props = defineProps({
  // icon 图标
  icon: {
    type: String,
    required: true
  },
  // 图标类名
  className: {
    type: String,
    default: ''
  }
})

/**
 * 判断是否为外部图标
 */
const isExternal = computed(() => external(props.icon))
/**
 * 外部图标样式
 */
/**
 * mask: 是一个 CSS 属性，用于将图像用作元素的遮罩。遮罩定义了
 * 哪些部分应该显示（图像的白色或透明部分），哪些部分应该隐藏
 * （图像的黑色部分）。no-repeat 50% 50% 表示图像不会重复，并且会居中放置。
 */
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 scoped>
.svg-icon {
  width: 100%;
  height: 100%;
  fill: currentColor;
  overflow: hidden;
}

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

2、判断是否为外部图标

新建src/utils/validate.js

/**
 * 判断是否为外部资源
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}
/**
 * return /^(https?:|mailto:|tel:)/.test(path)：这行代码是函数的
 * 主体，它返回一个布尔值。这里使用了正则表达式
 * ^(https?:|mailto:|tel:) 来检查 path 字符串是否以 http:、https:、mailto: 或 tel: 开头。
 */

3、通过组件来显示外部svg图标

新建src/

<template>
  <div class="wrapper">
    <span class="svg-container">
      <svg-icon
        icon="http://118.178.232.152:8001/#icon-vuejs_icon"
      />
    </span>
  </div>
</template>

<script setup>
import SvgIcon from "@/components/SvgIcon/index.vue";
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  height: 100%;
}
.svg-container {
  vertical-align: middle;
  display: inline-block;
  width: 80px;
  height: 80px;
}
</style>

请求外部图标时可能会遇到跨域问题,所以尽量下载到本地项目中进行使用

4、内部引用svg图标

收集待使用的svg图标，下载放置项目的src/icons/svg/的文件夹中,如放入一个vuejs_icon.svg图标

5、完成导入所有的svg图标

src/icons/index.js

// 导入所有的svg图标
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))
// console.log(svgRequire.keys(), 'svgRequire')
// 导入所有的svg图标
// console.log(svgRequire('./user.svg'), 'svgIcon')

// 完成svgicon的全局注册
export default (app) => {
  app.component('svg-icon', SvgIcon)
}

6、全局导入SvgIcon

src/main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
// 导入 svgIcon
import installIcons from "@/icons";

const app = createApp(App);
installIcons(app);
app.use(store).use(router).mount("#app");

7、通过组件来显示内部svg图标

<template>
  <div class="wrapper">
    <span class="svg-container">
      <svg-icon icon="vuejs_icon" />
    </span>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  height: 100%;
}
.svg-container {
  vertical-align: middle;
  display: inline-block;
  width: 80px;
  height: 80px;
}
</style>

8、使用svg-sprite-loader处理svg图标

用的symbol在线连接可以显示，但内部的svg图标需要使用svg-sprite-loader处理。svg-sprite-loader 是一个 Webpack 加载器，用于将 SVG 图标处理成 SVG 精灵（sprite）的形式。

npm i svg-sprite-loader@6.0.9

1. 性能优化

• 减少 HTTP 请求: SVG 精灵将多个 SVG 图标合并成一个 SVG 文件，这样可以减少浏览器发出的 HTTP 请求数量。每个图标都通过<use>标签来引用，这样浏览器只需要加载一次 SVG 精灵文件。
• 优化文件大小: 将 SVG 图标合并为一个精灵文件可以减少重复的 SVG 代码，从而减小整体文件大小，提高页面加载速度。

2. 简化图标管理

• 集中管理: 所有 SVG 图标集中在一个文件中，便于管理和维护。你只需要管理一个 SVG 精灵文件，而不是多个独立的 SVG 文件。
• 便于引用: 使用 svg-sprite-loader 后，可以通过图标的 ID 直接引用，避免了路径管理和重复导入的问题。图标可以像 HTML 中的 <use xlink:href="#icon-id"></use>一样被引用，简化了图标的使用。

3. 样式控制

• 统一样式: 由于所有图标在同一个 SVG 文件中，它们共享相同的样式（如 fill 和 stroke）。你可以通过 CSS 或内联样式统一控制所有图标的样式，使样式更具一致性。
• 动态改变颜色: 通过 CSS 的 fill 属性，你可以轻松地改变 SVG 图标的颜色，而无需修改 SVG 文件本身。使用 SVG 精灵，样式的动态控制更加方便。

9、修改vue.config.js

确保src/icons目录中的 SVG 文件不会被 Vue CLI 默认的 url-loader 或 file-loader 处理。
同时允许使用 svg-sprite-loader 处理这些 SVG 文件，并将它们打包成一个精灵图，以提高加载效率和优化图标的管理。

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 = {
  // 保证了引入的svg图标可以显示出来
  chainWebpack(config) {
    // 设置 svg-sprite-loader 来处理除了 'src/icons' 目录外的 SVG 文件
    // 这意味着其他地方的 SVG 文件将不会被 svg-sprite-loader 处理
    config.module.rule("svg").exclude.add(resolve("src/icons")).end();
    config.module
      // 为 'src/icons' 目录下的 SVG 文件设置一个新的处理规则
      .rule("icons")
      .test(/\.svg$/)
      .include.add(resolve("src/icons")) // 限定这个规则只处理 'src/icons' 目录下的文件
      .end() // 结束 include 的链式调用
      // 使用 svg-sprite-loader 来处理这些 SVG 文件
      .use("svg-sprite-loader")
      .loader("svg-sprite-loader")
      // 为 svg-sprite-loader 设置选项
      .options({
        symbolId: "icon-[name]",
      }) // 设置生成的 symbol 的 ID 格式为 'icon-xxx'，其中 xxx 是 SVG 文件的名称
      .end(); // 结束 use 的链式调用
  },
};

10、直接复制使用svg代码(不推荐使用)