use-symbol-for-icons

svg

在web app的开发功能过程中往往会使用大量的icon。对于icon的解决方案，大都会使用icon制作工具生成样式和字体，比如icomoon。
css tricks上的一篇文章svg-symbol-good-choice-icons提供了另外一种解决方案——svg-symbol。svg具体的属性可参考MDN。
这种方式一般情况下的流程是，UX提供给前端工程师svg图标，然后前端工程师可以使用常见的设计工具如Sketch将svg图标打开，对该图标的坐标和大小进行修改后，点击右键选择 Copy SVG Code。对于复制出来的code，我们只选取其中重要的部分，如<g>/<g>和<path></path>标签，然后将这部分code复制到我们所需要使用的html文档中。每一个图标的code需要被symbol标签包裹起来，并在symbol标签中声明该图标的id如id="pen"和大小如viewBox="0 0 31 32"。并在所有的svg图标最外层声明svg文档类型并将其样式设为隐藏。例如：

1
2
3
4
5
6
7
8
9
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none">
 <symbol id="pen" viewBox="0 0 31 32">
     // code
 </symbol>
 <symbol id="other" viewBox="0 0 31 32">
     // code
 </symbol>
</svg>

在需要使用svg图标的位置使用<svg><use xlink:href="#id" /></svg>来引用已被声明的图标。最终效果如下所示：

See the Pen svg-symbol-for-icon by Derek (@zhangdeyu) on CodePen.