如何在 Vue 项目中优雅地使用图标

1. 字体图标与矢量图标

目前主要有两种图标类型：字体图标和矢量图标。

字体图标是在网页打开时，下载一整个图标库，通常可以通过特定标签例如 来使用，优点是方便地实现文字混排，缺点是包体积大，且难以自定义。

矢量图标本质是

本文推荐并主要使用矢量图标。

2. 矢量图标源

目前比较全面的图标集：

1. Google Material Symbols (之前的 Google Icon)：比较现代化的图标集，包括圆角尖角图标集、空心实心图标集，主打交互图标，没有商标。

2. Material Design Icons：Material 风格的另一个图标集，大而全。

3. Iconfont：阿里的图标库，包括很多带颜色的特殊图标

4. Iconify：一个各种图标集的收集站，我们后文使用的包可以使用其中的所有图标集。

以上基本可以满足任何使用要求了。

3. 安装图标包及其剪枝策略

为了在 Vue 中便捷地使用图标，可以使用 iconify-prerendered 库，包含了所有 iconify 中图标集的图标的组件：

# 安装 Material Symbols 包
npm i @iconify-prerendered/vue-material-symbols

# 安装 Material Design Icons 包
npm i @iconify-prerendered/vue-mdi

当需要引入时，可以使用：

@iconify-prerendered/vue-material-symbols 的图标一般命名格式为：

Icon + 图标名 + 可选: Outline (空心) + 可选: Rounded (圆角)

同时，这里我们需要引入各个所需的图标，而不能使用通配符：

# 不能这样
import * from '@iconify-prerendered/vue-mdi';

这是因为我们的代码需要剪枝友好。剪枝是一种代码编译策略，毕竟不可能将包中所有的图标都发往客户端浏览器，所以编译为 js 包时，只会包含已经被 import 的图标，因此最大程度地减少了包体积。

注意：当 vite 运行在 dev 模式时，iconify-prerendered 会将整个图标包 (10M) 发送到浏览器，而不会剪枝，因此首次加载会很慢，请耐心等待。build 后会自动剪枝，不会再出现这种情况。

4. 图标与文字混排

由于我们使用的图标包本质上会将图标以

5. 自定义 SVG 图标

自定义 SVG 图标一般需要关注：viewBox（代表定义的画布范围）、fill（颜色）两个属性：

这个 SVG 可以由 Adobe Illustrator 生成 (另存为 SVG)，略微修改即可做成 Vue 组件使用。

如果需要修改图标颜色，可以直接设置 color 属性：

如果需要分别设定各个路径，可以直接在 path 上进行修改，例如使用 fill 属性修改填充颜色：