把svg图标制作成字体图标_让我们用SVG符号和CSS变量制作彩色图标

把svg图标制作成字体图标

by Sarah Dayan

通过莎拉·达扬

让我们用SVG符号和CSS变量制作彩色图标 (Let’s make multi-colored icons with SVG symbols and CSS variables)

Long gone are the days of using images and CSS sprites to make icons for the web. With the explosion of web fonts, icon fonts have become the number one solution for displaying icons in your web projects.

使用图像和CSS精灵为网络创建图标的日子已经一去不复返了。 随着Web字体的爆炸式增长，图标字体已成为在Web项目中显示图标的第一解决方案。

Fonts are vectors, so you don’t have to worry about resolution. They benefit from the same CSS properties as text. As a result, you have full control over size, color, and style. You can add transforms, effects, and decorations such as rotations, underlines, or shadows.

字体是矢量，因此您不必担心分辨率。 它们受益于与文本相同CSS属性。 因此，您可以完全控制大小，颜色和样式。 您可以添加变换，效果和修饰，例如旋转，下划线或阴影。

Icon fonts aren’t perfect though, which is why a growing number of people prefer using inline SVG images. CSS Tricks wrote a list of areas where icon fonts fall short compared to native SVG elements: sharpness, positioning, or even failures because of cross-domain loading, browser-specific bugs, and ad-blockers. Now you can circumvent most of these issues, generally making icon fonts a safe choice.

图标字体并不是很完美 ，这就是为什么越来越多的人更喜欢使用嵌入式SVG图像的原因。 与本地SVG元素相比， CSS Tricks 列出了图标字体不足的区域列表 ：锐度，位置，甚至由于跨域加载，浏览器特定的错误和广告拦截器而失败。 现在，您可以解决大多数这些问题，通常使图标字体成为安全的选择。

Yet, there’s one thing that remains absolutely impossible with icon fonts: multicolor support. Only SVG can do this.

但是，图标字体仍然绝对不可能实现一件事： 多色支持 。 只有SVG可以做到这一点。

TL;DR: this post goes in-depth into the how and why. If you want to understand the whole thought process, read on. Otherwise you can look at the final code on CodePen.

TL; DR ：这篇文章深入探讨了如何以及为什么。 如果您想了解整个思考过程，请继续阅读。 否则，您可以在CodePen上查看最终代码。

设置SVG符号图标 (Setting up SVG symbol icons)

The problem with inline SVGs is how verbose they are. You don’t want to copy/paste all those coordinates every single time you need to use the same icon. This would be repetitive, hard to read, and a pain to maintain.

内联SVG的问题在于它们的详细程度。 您不想每次都需要使用同一图标复制/粘贴所有这些坐标。 这将是重复的，难以阅读的并且难以维护。

With SVG symbol icons, you have one copy of each SVG element, and you instantiate them anywhere with a reference.

使用SVG符号图标，您可以获得每个SVG元素的一个副本，并且可以在任何地方使用参考实例化它们。

You start by including the SVG inline, hide it, wrap it in a <symbol> and identify it with an id attribute.

你通过包括SVG内联展开，隐藏它，它包装在一个<symb醇>和识别它无线th的id属性。

<svg xmlns="http://www.w3.org/2000/svg" style="display: none">  <symbol id="my-first-icon" viewBox="0 0 20 20">    <title>my-first-icon</title>    <path d="..." />  </symbol></svg>

The full SVG markup is included once and hidden in the HTML.

完整的SVG标记仅包含一次并隐藏在HTML中。

Then, all you have to do is instantiate the icon with a <use> element.

然后，您要做的就是使用<u se>元素实例化图标。

<svg>  <use xlink:href="#my-first-icon" /></svg>

This will display an exact copy of your original SVG icon.

这将显示原始SVG图标的精确副本。

That’s it! Pretty nice, right?

而已！ 很好，对吗？

You probably noticed the funny xlink:href attribute: this is the link between your instance and the original SVG.

您可能已经注意到了有趣的xlink:href属性：这是您的实例和原始SVG之间的链接。

It’s important to mention that xlink:href is a deprecated SVG attribute. Even if most browsers still support it, you should use href instead. Now the thing is, some browsers like Safari don’t support SVG resource references through the href attribute, so you still need to provide xlink:href.

重要的是要提到xlink:href是已弃用的SVG属性。 即使大多数浏览器仍然支持它， 您也应该改用href 。 现在的事情是，某些浏览器(例如Safari)不通过href属性支持SVG资源引用，因此您仍然需要提供xlink:href 。

To be s