vscode-icon-platform-download

将Icon平台集成到 vscode 插件内部(vscode 最低要求版本为 1.35.0)

---

背景

让我们回忆一下在平时的开发过程中将图标下载到项目中的场景:

首先在外网的设计中台上找到我们需要的图标逐一下载到本地，然后在杂乱的下载目录中找到我们刚刚下载的 那些图标拷贝到项目的资源目录下，如果项目是在内网开发，还需要先将图标从外网上传到内网；假如某个图标 漏找了或者找错了，很不幸，上述的过程还需要再上演一遍。

那么如何能让我们下载图标的过程轻松而愉快呢？如果可以将设计中台的功能集成到我们最好的伙伴 vscode 内，直接在插件的ui界面上搜索以及批量选择、下载图标并自动保存到我们希望的目录下，岂不是爽歪歪？最好 还可以结合 hxmui 的 Icon组件 进行使用，并且支持本地缓存，在下次打开ui界面的时候保持上一次的搜索选择 状态，岂不是一劳永逸? 最终极的问题Icon内外网传输如果也能通过该工具解决，岂不是世界大同?

hxm-vscode-icon-download 就是为了满足上述设想而设计的vscode插件，其存在的终极目的就是让下载图标不再成为我们的烦恼，去解放我们的双手与时间去做更多有意义的事情。

---

功能

hxm-vscode-icon-download 插件目前支持如下功能特性：

• 中英文关键字模糊搜索
• 支持Enter键快速触发搜索
• 支持多部门图标筛选
• 在需要的图标右上角点击复选框即可将图标加入购物车
• 在下方可以看到已经选择的图标列表，如果选错的话可以点击右上角叉号取消选择
• 支持导出svg-symbols.js, 可以配合Hxmui的Icon组件一起使用
• 支持直接批量导出svg文件夹
• 支持了缓存功能，在下一次进入页面时依然展示上一次退出时记录
• 点击重置可以清除缓存
• 支持埋点统计查看使用情况

---

导出形式

目前支持的导出形式有两种:

• 出 svg-symbols.js   →   out
• 导出 svg文件  →  svg

其中导出svg文件不用多讲，就是将我们选择的图标批量打包到名为svg的文件夹内，里面就是一个个svg文件， 可以直接使用。

导出svg-symbols.js是什么呢?  感兴趣的同学可以参考下iconfont帮助文档上关于symbols的解释。 总的来说， 这是一种彩色图标全新的使用方式，是未来的主流! 针对其使用方式 hxmui组件库中的Icon组件 已经对其进行了封装， 在项目的 html 中引入生成的 svg-symbols.js 即可直接配合Icon组件来进行使用, 优先推荐使用该方式!

注: 在插件中点击 导出SymbolJS 和 导出SVG文件 按钮的时候会弹出选择框选择保存目录，此时会要求填写 文件名，这个随便输入即可，因为最终生成的文件夹是确定的，导出SymbolJS 会生成 out 文件夹， 导出 svg 会 生成 svg 文件夹。

---

SymbolJS + Hxmui Icon组件的使用方式

点击导出SymbolsJS生成 out 文件夹后，将 out 文件夹内的 svg-symbols.js 通过script标签在项目的 html文件内进行引入，
注意: js文件需要在hxmui组件库的cdn之前引入！

在保证引入 svg-symbols.js  以及 正常引入及初始化组件库的前提下，即可直接使用Icon组件，其中 name 属性就是下载时图标的英文名称:

out 文件夹生成的 svg-symbols.css,  该文件不需要再项目中引入，其中列举了我们所下载下来的图标名称， 我们可以直接复制其类名，需要注意的是，在传给 hxm-icon组件的name属性时需要去掉其`icon-` 前缀：

最后， 祝您使用愉快 Enjoy your self~ 😉