将设计稿图标制作成iconfont（ps cs6 + ai cs6）

项目开发中需要用到icon，iconfont网站上找的icon风格各式各样，就想着把设计稿的图标直接转成icon就好了。

1、先在ps装一个脚本（ save-ps-to-svg1.0.jsx）。放在ps安装目录下的/Presets/Scripts中

参考此篇

脚本放进去后，ps就可以将文件保存为svg格式文件。



2、将设计稿的图标切出，单独保存xxx.psd。

3、把icon图层改名为xxx.svg



4、将图层save as svg。和psd同个目录下会保存有一个svg文件。(后来再试了一次发现合并的图层不能保存为svg)

5、用ai打开iconfont模板和svg文件。将svg拉到模板上，调整大小使其占满模板（模板大小为16px*16px）

6、此时的svg文件只有图标的路径，要填充颜色后转出的svg才会显示。



7、颜色和大小调整好后，再次存储为svg格式，替换之前的svg即可。

8、到iconfont网站上将svg文件上传，根据需求做微调就好了。