Vue 2 中引入 SVG 图标

前言

在 Vue 2 项目中使用 SVG 图标有多种方式，本节将详细介绍如何在项目中集成 SVG 图标，包括如何配置、封装组件以及使用阿里图标库的图标。此外，还会介绍更简单的方式通过 class 使用阿里图标库。

---

1. 安装依赖

首先，需要安装 svg-sprite-loader 来处理项目中的 SVG 图标。

npm install svg-sprite-loader -D

依赖说明：

• svg-sprite-loader：用于将多个 SVG 图标合并为一个 symbol，方便通过 <use> 标签引用。

2. 配置 vue.config.js

在 vue.config.js 中进行配置，使得项目能够正确处理 SVG 文件。

const path = require('path');

module.exports = {
  chainWebpack: config => {
    // 1. 删除默认的 SVG 处理规则
    config.module.rules.delete('svg');

    // 2. 配置 svg-sprite-loader 仅处理 src/assets/icons 目录下的 SVG 文件
    config.module
      .rule('svg')
      .test(/\.svg$/) // 匹配所有 .svg 文件
      .include.add(path.resolve(__dirname, 'src/assets/icons')) // 指定目录为 src/assets/icons
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]' // 设置 symbolId 的命名规则，如：icon-home
      });

    // 3. 配置其他目录的 SVG 文件使用 file-loader 进行处理
    config.module
      .rule('file')
      .test(/\.svg$/)
      .exclude.add(path.resolve(__dirname, 'src/assets/icons')) // 排除 src/assets/icons 目录
      .end()
      .use('file-loader')
      .loader('file-loader');
  }
};

配置说明：

• symbolId: 'icon-[name]'：为每个 SVG 文件生成唯一的 symbolId，例如 icon-home，以便通过 <use> 标签引用。
• include.add 和 exclude.add：确保只有 src/assets/icons 目录下的 SVG 文件使用 svg-sprite-loader，其他目录的 SVG 文件将使用 file-loader。

3. 创建存放 SVG 图标的文件夹

在项目的 src 目录下创建 icons 文件夹，用于存放你的 SVG 图标。

项目结构示例：

src
├── assets
│   ├── icons
│   │   ├── home.svg
│   │   ├── user.svg
│   │   └── settings.svg
...

重要提示：

将所有需要用作图标的 SVG 文件放在 src/assets/icons 目录下，确保它们能够被正确处理。

4. 创建 SvgIcon 组件

为了方便使用 SVG 图标，我们封装一个 SvgIcon.vue 组件。

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="`#icon-${iconName}`"></use> <!-- 引用 symbolId -->
  </svg>
</template>

<script>
export default {
  props: {
    // 图标名称，例如：home
    iconName: {
      type: String,
      required: true
    },
    // 自定义样式类名
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    svgClass() {
      return 'svg-icon ' + this.className;
    }
  }
};
</script>

<style scoped>
/* 默认样式，可以根据需要调整 */
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor; /* 继承文本颜色 */
}
</style>

组件说明：

• iconName：通过这个 prop 指定要显示的图标名称，对应 symbolId 中的 [name]。
• className：允许用户自定义 SVG 图标的样式。

5. 全局注册 SvgIcon 组件

在 src/main.js 中全局注册 SvgIcon 组件，并自动加载所有 SVG 文件。

import Vue from 'vue';
import SvgIcon from '@/components/SvgIcon.vue'; // 引入 SvgIcon 组件

Vue.component('svg-icon', SvgIcon);

// 自动加载 src/icons 目录下的所有 svg 文件
const requireAll = requireContext => requireContext.keys().map(requireContext);
const req = require.context('src/assets/icons', false, /\.svg$/);
requireAll(req);

重要 API 说明：

• require.context：这是 Webpack 提供的一个方法，用于动态引入模块。这里通过 require.context 批量加载 src/icons 目录下的所有 SVG 文件。

6. 在页面中使用 SVG 图标

1. 在项目中创建一个 svg 文件： 你可以在项目的 src/assets/icons 目录下创建一个任意命名的 SVG 文件，命名随意，如 home.svg。

2. 将 SVG 图标代码复制到文件中： 打开你新建的 SVG 文件，将从设计工具或阿里图标库复制的 SVG 代码粘贴进来。

   例如，home.svg 文件内容可能是：

   <svg t="1606813019040" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2731" width="200" height="200"><path d="M512 64C264.576 64 64 264.576 64 512s200.576 448 448 448 448-200.576 448-448S759.424 64 512 64z" p-id="2732"></path></svg>
   

3. 项目中引入并使用： 通过在 main.js 中引入配置的方式，所有 src/assets/icons 目录下的 SVG 文件都会自动加载。使用时只需要在模板中引用即可：

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

   这里的 home 对应的是你新建的 home.svg 文件名，不需要带上 .svg 后缀。

注意事项

• 文件名不能重复：不同图标的文件名必须唯一，因为文件名决定了你在使用时的 symbolId。

• SVG 文件内容需要标准：确保粘贴进来的 SVG 代码是标准的 SVG 格式，不然可能会出现渲染问题。

7. 使用阿里图标库的 SVG 图标

如果需要使用阿里图标库中的 SVG 图标，可以通过以下两种方式实现：

方式一：下载 SVG 文件

将阿里图标库中的 SVG 图标下载后，放入 src/icons 目录中，按照前面介绍的方式使用即可。

方式二：通过在线链接引入

1. 在 src/assets/svg 目录下新建 iconfont.js 文件，并将阿里图标库的在线地址代码粘贴进去。
2. 在 src/main.js 中引入：

import '@/assets/svg/iconfont.js';

重要提示：

阿里图标库中的图标也可以通过 <use> 标签进行引用，类似前面的 SvgIcon 组件用法。

8. 更加简单的方式：通过 class 使用阿里图标库

阿里图标库除了支持通过 <use> 标签使用图标外，还提供了更简单的通过 class 使用图标的方式。

使用步骤：

1. 获取 iconfont.css 文件：

   在 阿里图标库 (opens new window) 上选择你的图标库，点击“下载代码”按钮。下载后的文件中包含一个 iconfont.css 文件。

   

   

   • 将 .woff, .woff2, .ttf 这几个字体文件与 iconfont.css 放在同一个目录中，例如 src/assets/iconfont 目录。

   例如：

   src
   ├── assets
   │   ├── iconfont
   │   │   ├── iconfont.css
   │   │   ├── iconfont.woff
   │   │   ├── iconfont.woff2
   │   │   └── iconfont.ttf
   

2. 引入 iconfont.css 文件：

   在你的项目中引入这个 iconfont.css 文件：

   import '@/assets/iconfont/iconfont.css'; 
   

3. 通过 class 使用图标：

   现在，你可以直接在 HTML 中通过 class 使用图标，而无需使用复杂的 <svg> 和 <use> 语法：

   <i class="iconfont icon-home"></i>
   

   其中，icon-home 是图标在阿里图标库中的类名，当然你也可以在项目设置中自定义的图标前缀，比如我下面自定义的图标前缀就是el-icon。

   

   

这种方式的优势：

• 简便：无需手动配置 SVG 相关的 loader 和处理逻辑，只需要引入 iconfont.css 文件即可。
• 快速集成：直接通过 class 使用图标，不需要关心 <use> 等复杂的语法，适合大量使用图标的场景。

注意事项

每次更新图标库（例如添加新图标或修改图标）后，需要重新下载 iconfont 文件（包括 iconfont.css 和字体文件），然后将其替换到项目中。

适用场景：

• 如果你的项目中图标种类多、变化频繁，并且不需要对图标进行特殊处理（如动态着色、尺寸调整等），这种方式更为简单和快捷。

---

总结

• 简单集成：如果你只需要快速使用图标，推荐使用阿里图标库的 iconfont.css 方式，直接通过 class 引用图标。
• 灵活控制：如果你需要对 SVG 进行更细粒度的控制，推荐使用 <use> 标签和 SVG 组合的方式。