在伪元素中使用 SVG 图标，并控制大小和颜色？答案

【问题标题】：Using an SVG icon in a pseudo element, with control over size and color?在伪元素中使用 SVG 图标，并控制大小和颜色？
【发布时间】：2018-09-27 22:56:35
【问题描述】：

我希望实现这样的目标：

Link >

> 是一个 SVG 图标。

我正在使用 icomoon.io 的“chevron-right”图标并通过内联图标精灵文件（包括在内，只有这个图标）来加载图标。

我引用了其他内联图标，效果很好。

<svg class="icon"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-menu"></use></svg>

.icon {
  display: inline-block;
  stroke-width: 0;
  stroke: black;
  fill: currentColor;
  width: 1.1em;
  height: 1.1em;
}

我正在寻找一种在伪元素中引用图标的方法，以便我可以轻松地为所有链接设置样式。

到目前为止，我发现的唯一方法是内联它，但我似乎无法控制大小或颜色——无论是用作背景图像还是内容。

.-with-trailing-chevron:after  {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath fill='##4A89AA' d='M15.7 11.3l-6-6c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4l5.3 5.3-5.3 5.3c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.4 0.3 0.7 0.3s0.5-0.1 0.7-0.3l6-6c0.4-0.4 0.4-1 0-1.4z'%3E%3C/path%3E%3C/svg%3E");
  background-image-size: cover; // these don't seem to work
  display: inline-block;
  width: .8em; // these don't seem to work on the icon
  height: .8em; // these don't seem to work on the icon
}

另外，我更愿意引用它而不是内联。

这些可能吗？

图标精灵文件，我目前内联以避免不兼容：

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-chevron-right" viewBox="0 0 24 24">
<title>chevron-right</title>
<path d="M15.7 11.3l-6-6c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4l5.3 5.3-5.3 5.3c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.4 0.3 0.7 0.3s0.5-0.1 0.7-0.3l6-6c0.4-0.4 0.4-1 0-1.4z"></path>
</symbol>
</defs>
</svg>

【问题讨论】：

您是否有理由尝试使用 chevron SVG 作为背景图像，而不是标记中的真实物理元素？或者，您是否尝试过使用“内容”属性而不是背景图像来分配伪元素？如果它是内容属性的一部分而不是背景图像（未经测试），您可以更改元素的颜色和大小。
尝试了内容属性；没有添加更多控制；我认为我的主要问题是缩放，在这两种情况下。并且，需要在css中内联元素。我最终可能会使用该图标作为 html 中的 svg 引用，希望能够清理标记。

标签： css svg icons

【解决方案1】：

数据 url 被视为不允许外部（数据 url！）引用的惰性图像。您需要在 svg 代码内部设置它们的属性。所以如果你想改变大小和颜色，只有这样才行：

a::after {
    content: url('data:image/svg+xml,<svg width="1em" height="1em" fill="green" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.7 11.3l-6-6c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4l5.3 5.3-5.3 5.3c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.4 0.3 0.7 0.3s0.5-0.1 0.7-0.3l6-6c0.4-0.4 0.4-1 0-1.4z"></path></svg>');
    vertical-align: -0.2em;
    padding-left: 0.1em;
}
a:hover::after {
    content: url('data:image/svg+xml,<svg width="1.2em" height="1.2em" fill="red" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.7 11.3l-6-6c-0.4-0.4-1-0.4-1.4 0s-0.4 1 0 1.4l5.3 5.3-5.3 5.3c-0.4 0.4-0.4 1 0 1.4 0.2 0.2 0.4 0.3 0.7 0.3s0.5-0.1 0.7-0.3l6-6c0.4-0.4 0.4-1 0-1.4z"></path></svg>');
    vertical-align: -0.3em;
    padding-left: 0;
}

&lt;a href=""&gt;Link&lt;/a&gt;

如您所见，定位仍然可以通过 CSS 进行修改。

【讨论】：

非常感谢，这是我可以使用的解决方案。我被内容中的引号/双引号绊倒了：定义和垂直对齐属性解决的一些定位问题。