iconfont矢量图标库介绍

iconfont是阿里妈妈MUX倾力打造的矢量图标管理、交流平台，设计师将图标上传到 iconfont 平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。

2024-10-22 WPite

iconfont是阿里妈妈MUX倾力打造的矢量图标管理、交流平台，设计师将图标上传到iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用，阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具。

矢量图标库特点

库容量大。内容包括图标、矢量插画、3D插画库、Lottie^[1]、字体等品种，以图标库为例，目前已提供上万种风格，估算超过30万个图标作品，其他品种相对少一点，但在国内也是集中度最高的存在。Lottie是Airbnb开发的一款能够为原生应用添加动画效果的开源工具，基于矢量的lottie动画，有更好的编辑性和延展性，简单理解就是APP动画图标。

搜索查询非常便捷。正如官方网站介绍的那样，支持关键词模糊搜索，查询关键词中文、English、Pinyin随便写，无缝互译，搜索展现也非常丰富，几乎你想要的都可以找到。

下载非常方便。用户只需登录即可，选好自己想要的素材后，提供各种下载格式，包括SVG、AI、PNG文件格式，还可以直接复制SVG字符串到剪贴板。

矢量应用注意事项

编辑工具。推荐使用专业的Adobe Illustrator软件对图标进行进一步编辑完善，该软件对矢量数据的尺寸裁剪、修剪、合并、拆分、着色以及各种格式输出等提供完整的支持。

手动调整。建议对重新打包的SVG数据进行手动优化，特别是尺寸自适应调整，根据个人习惯和项目需求而定，我个人一般将<svg>标签的width与height属性均设定为100%，尺寸大小由父节点来控制更为灵活，示例如下。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 {960} {960}" width="100%" height="100%" fill="{color}">

渲染模式适应。可以在svg中设置样式，控制浏览器配色方案（prefers-color-scheme）深浅的自适应。例如针对背景颜色，可为同一CSS变量在不同的配色方案中，设置不同的值，示例如下。

<style> 
  svg { --color: #fff;} 
  @media (prefers-color-scheme: dark) {
    svg { --color: #000; }
  }
</style>
<g fill="var(--color)"> … </g>

背景应用。SVG文件作为样式背景时，省去encodeURIComponent编码环节，有一种非常直接简单的写法，即只需要检查字符串中是否存在#字符，比如fill值不能用HEX色值（如#000000），请用RGB或RGBA色值予以替换，示例如下。

background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 {960} {960}" width="100%" height="100%" fill="{rgba(0,0,0,0.2)}"><path d="{path}" /></svg>');

因篇幅有限，以上较为简单的心得笔记，iconfont及其应用就简要介绍一下，如未来iconfont有新的变化或个人应用技巧，再进一步完善本文内容。

浏览iconfont资源

官网 https://www.iconfont.cn