使用CSS从spritesheet插入和着色SVG

Question

我正在使用svg-sprite生成要通过<use>方法嵌入的SVG spritesheet：

<svg class="icon">
  <use xlink:href="/assets/icons.svg#phone"/>
</svg>

这适用于通过HTML标记嵌入和样式化图标。

但是，我还需要纯粹通过CSS嵌入图标的选项。例如，通过CMS WYSIWYG编辑器添加内容列表不应要求内容编辑器添加额外的SVG元素。

例如：

<ul class="icon-list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

.icon-list li::before { /* icon here */ }

有没有办法通过<use>嵌入方法或类似方法实现这一目标？该解决方案还需要允许通过CSS对SVG着色。

Answer 1

如果我理解你的问题，基本答案是否定的。

您可以在CSS中包含SVG图标，就像您可以使用位图一样。例如background-image。但是由于浏览器隐私限制，它必须是自包含的。它不能用<use>引用外部SVG元素。或者实际上是任何外部对象 - 例如其他图像，字体等。

它也无法使用外部CSS进行样式设置。因此，例如，如果您需要相同图标的不同颜色变体，则需要为每种颜色创建单独的SVG。