起因

原本站博客图标一直引用的别人矢量图外部js，刚好昨天上课无聊没事，怕哪天外部调用的拉闸了图标岂不是将无法显示，于是想本地化图标，添加进自己的阿里矢量图项目里。

经过

开始面对混杂的js没有一点头绪，下载下来格式化查看也没找到相关信息，

后来在阿里矢量图的项目后台中在线链接里面发现有个json配置文件，里面记录着矢量图标相关信息，只需要在外部调用的js中将请求的js文件改为json即可获得对方的矢量图标配置文件。

例如：
at.alicdn.com/t/font_2489793_cwzf3desb3s.js
获取他的json即为
at.alicdn.com/t/font_2489793_cwzf3desb3s.json

拿到配置文件看到有个icon_id第一反应应该就是图标的唯一id，可以通过id来查找图标，但是阿里矢量图标库只提供了名称搜索，面对无数重名的图标，犹如大海里捞针。

第一反应，百度并没有找到通过id矢量图查找图标的相关接口及相关文档，尝试询问了各方dalao也没得到相关办法

后面在控制台发现输入icon_id查找，发现每个图标都会class引用对应id样式，尝试着改了下此处id，并没反应。

刚好遇上快放学了，折腾了一下午没收获，准备放弃关掉了选项卡，突然脑子里浮现出了个想法“既然是通过点击事件添加进收藏，点击事件里会不会携带icon_id”，果不其然真被我找到了。

步骤

  1. 首先打开你想添加的图标的配置文件

1700925803155.png

  1. 在矢量图表库任意获取一个图标的id

1700925629657.png

  1. 通过搜索找到点击下载按钮的事件

1700925963223.png

  1. 将现有的id改为你想添加入库的图标id

1700926096742.png

随后点击下载

1700927153717.png

你会发现原图标已改为了你想要获取的图标

1700927173210.png

点击收藏，在收藏中再依次添加到你的项目中即可。

最后恭喜你成功的将心仪的图标添加进了自己的项目中。

可能这是最笨拙的方法，但是依旧很实用，如果过有更方便的方法，欢迎大佬告知。