本文共 1720 字，大约阅读时间需要 5 分钟。

Vue3.0 + TypeScript + Element Plus 多页签应用模板：如何优雅地使用 SVG 图标

一、关于 SVG Sprite 技术

雪碧图（Sprite）是一种通过将多个小图标嵌入到单一图片中，根据需求切换不同位置来实现图片展示的技术。与传统雪碧图类似，SVG Sprite 技术通过将多个 <symbol> 标签嵌入到一个 <svg> 标签中，每个 symbol 元素都有唯一的 ID。开发者在使用时，只需调用对应的 ID 即可显示所需 SVG 图标。

二、使用的插件

在封装组件之前，我们需要了解并配置以下两个插件。

1. svg-sprite-loader

这个插件用于生成 SVG 雪碧图。它会将加载的 SVG 图片拼接成一个完整的 SVG 文件，并在页面中通过 <use> 标签复用各个图标。

2. svgo-loader

这个插件用于优化 SVG 代码。它可以删除 SVG 文件中冗余的属性（如 fill），从而实现通过 CSS 自定义颜色和大小的目的。与 svg-sprite-loader 结合使用，可以实现更灵活的 SVG 处理。

三、安装与配置插件

1. 安装插件

在项目根目录下执行以下命令安装插件：

npm i svg-sprite-loader svgo-loader --save-dev

2. 下载 SVG 图标

将 SVG 图标下载到项目中，建议将文件保存到 src/assets/icons/svg 目录下。

3. 配置 webpack

修改 vue.config.js 文件，添加 SVG 文件的处理规则：

// 配置 svg-sprite-loader 与 svgo-loader
const svgRule = config.module.rule('svg')
svgRule
  .test(/\.svg$/)
  .include.add(path.resolve('src/assets/icons'))
  .end()
  .use('svg-sprite-loader')
  .loader('svg-sprite-loader')
  .options({
    symbolId: 'icon-[name]'
  })
  .end()
  .use('svgo-loader')
  .loader('svgo-loader')
  .options({
    configFile: path.resolve('../svgo.config.js')
  })
  .end()
// 配置正常 SVG 文件
const normalSvgRule = config.module.rule('normal_svg')
normalSvgRule
  .test(/\.(svg)(\?.*)?$/)
  .include.add(path.resolve('public/imgs'))
  .end()
  .use('file-loader')
  .loader(path.resolve('node_modules/file-loader/dist/cjs.js'))
  .options({
    name: 'static/img/[name].[hash:8].[ext]'
  })
  .end()

4. 生成 SVG 雪碧图

在浏览器开发者工具中，你应该能看到所有 SVG 文件已经被成功处理，并生成了一个包含所有图标的 SVG 雪碧图。

四、封装 SvgIcon 组件

以下是完整的组件代码：

五、使用说明

下一篇预告

· Vue3.0 + TypeScript + Element Plus 多页签应用模板：侧边导航菜单（上）