做前端的人都知道，图标几乎出现在每个界面里：按钮、菜单、提示、空状态页。早年很多团队从设计稿里切图，PNG 越堆越多，放大后边缘发虚，换个颜色又得找设计师重出一遍。阿里云矢量图标就是为了省掉这些重复劳动。
阿里云矢量图标是什么
一般说的阿里云矢量图标，指的是阿里巴巴 iconfont 图标平台上的矢量图标资源。平台里有大量设计师绘制好的图标，通用操作、电商、金融、教育、办公之类的分类都能找到。搜关键词就行，也可以建一个项目，把要用的图标收在一起统一下载。
矢量图标的基础格式是 SVG。它用路径和坐标描述形状，不依赖像素，放大多少倍线条都是清楚的。高分屏和各种尺寸的移动端上，这个特点最明显。
矢量图标的好处和局限
用矢量图标，最直接的感受是省事。同一个图标不用为 1x、2x、3x 分别出图。颜色可以通过 CSS 的 fill 或 currentColor 控制，主题切换和深色模式下不必换资源。单个文件通常只有几百字节到几 KB，对带宽也友好。同一套图标的线宽、圆角、尺寸一致，页面看起来不会东一个西一个。
但它不适合所有场景。插画、带大量渐变和阴影的图像，还是用位图或专门的图片格式更合适。图标本身是简洁的符号，放在它该在的位置，效果才好。
接入前的准备
第一次用，大致按这几步走：
- 登录平台，搜索需要的关键词，比如”订单””用户””设置”。
- 把图标加入项目。项目最好按业务线拆分，别让所有图标堆在一个包里。
- 进入项目检查图标名称。如果默认命名太随意，就在这一步改成团队约定的前缀，后面省事很多。
- 选择接入方式，下载资源包。包里一般有 SVG、字体文件和示例代码。
- 放到本地项目里，在页面上看一眼显示效果、颜色和对齐。
命名规则最好在第一步就定下来。图标少的时候随便起名没什么问题，数量一上去，找图标和后续维护都会变麻烦。
三种接入方式怎么选
常见的接入方式有三种：font-class、Symbol 和 Unicode。它们的差别主要在体积、颜色灵活性和维护难度上。
- font-class：用类名直接引用，写法最简单，适合传统页面和快速原型。缺点是字体文件整体加载，图标用得多时体积会偏大。
- Symbol：把 SVG 合并成雪碧图，通过 use 标签引用。支持多色图标，样式也更灵活，比较适合 Vue、React 这类组件化项目。
- Unicode：通过字符编码引用，兼容性好，但可读性差。别人看代码很难一眼知道编码对应哪个图标，长期维护不太方便。
如果项目已经是组件化框架，优先考虑 Symbol。也可以把 SVG 转成组件按需引入。这样既能控制体积，组件名本身还能说明用途，查找也方便。
几个容易忽略的问题
用之前，有几件事最好先看一下。
- 授权范围：不同图标的授权可能不一样。商用前去看对应的许可说明，拿不准的话和负责人确认一下。
- 按需引入：别把整个图标库打包进去，只留实际用到的图标，构建产物会干净很多。
- 尺寸规范：项目里先定几个尺寸变量，比如 16px、20px、24px。各处随意写数字，页面上的图标大小很快就会乱。
- 无障碍：纯装饰的图标加 aria-hidden。功能性图标要给 aria-label，或者旁边配文字，否则读屏用户不知道它是干什么的。
三个典型用法
后台菜单是最常见的场景。菜单选中态如果用 PNG，每个图标都要准备一张高亮版本。换成矢量图标后，选中态只需修改父元素的颜色，图片资源基本不用管。
小程序底部导航也很适合。首页、分类、购物车、我的这四个入口图标风格统一，默认态和激活态通过切换颜色类名就能实现。小程序对包体大小比较敏感，SVG 的体积优势在这里会比较实用。
官网的功能模块配图同理。比如列出几项核心优势，找一组语义接近的图标，统一尺寸和线宽，视觉上就有了统一的标识，也不用专门请人画。以后要做暗色版本，改一处颜色变量就够了。
最后
矢量图标主要解决三件事：资源分散、缩放失真和换色麻烦。用对了，页面更清楚，体积更小，维护也更轻。建议先理清命名规则和接入方式，再从一个小模块开始替换旧图标，风险最低。
