SF Symbols 自定义使用
2020-12-30 本文已影响0人
syihh
1.导出系统SF模板
1.1 在SF符号中选中一个符号,再选择文件导出保存。
![](https://img.haomeiwen.com/i1940575/7ed4cd0fcd4bdb5c.png)
2.编辑SF模板中的符号
2.1 将导出的SF符号模板在AI中打开。
![](https://img.haomeiwen.com/i1940575/268d5a8919e30158.png)
2.2 将SF符号模板中不需要的内容删除。
![](https://img.haomeiwen.com/i1940575/1747ac08368d5249.png)
![](https://img.haomeiwen.com/i1940575/7e3a0f258296e2f3.png)
2.3 打开一个新的SVG格式图标。
![](https://img.haomeiwen.com/i1940575/33c2acf6041608c2.png)
2.4 选中路径复制到之前打开的SF符号模板中,要注意复制到Regular-M下面。
![](https://img.haomeiwen.com/i1940575/c2456141a526647f.png)
2.5 调整大小样式,然后保存文件。
![](https://img.haomeiwen.com/i1940575/9d3b90341aaabf71.png)
2.6 将保存好的SVG文件,放入Xcode Assets.xcassets 中就可以使用了。
![](https://img.haomeiwen.com/i1940575/9794820a05aae7ba.png)
![](https://img.haomeiwen.com/i1940575/63d3e883e6aff759.png)
3.解决系统所带的问题
3.1 对比图中的SF符号发现自定义的与系统的相比少了边距,测试导出系统SF符号未编辑导入Xcode也会出现相同的问题。
![](https://img.haomeiwen.com/i1940575/1bf30e1c98508532.png)
3.2 使用空白路径解决边距问题。
![](https://img.haomeiwen.com/i1940575/baab30fa53e35cee.png)
3.2 将边框路径设为透明,保存放入Xcode
![](https://img.haomeiwen.com/i1940575/91722f3c2937be3b.png)
3.4 成品示例。
![](https://img.haomeiwen.com/i1940575/a252b16c475213b3.png)
![](https://img.haomeiwen.com/i1940575/7c21d9e9b3b24cc5.png)
4.文章中使用的SVG模板下载地址
链接: https://pan.baidu.com/s/1WNmk6ATJ2gne4dgEMA2N-g 密码: w26n