如何将SVG精灵用作CSS伪元素？

Question

我正在尝试将位于 SVG 雪碧图中的 SVG 图标用作 CSS 伪元素。在 HTML 中它们运行良好，但是当我在 CSS 中导入它们时，什么都没有显示出来。可能存在的问题是什么？

有效的 HTML：

<svg width="48px" height="48px">
    <use xlink:href="/assets/images/icons-sprite.svg#icon-name"></use>
</svg>

SVG 精灵图：

<svg width="0" height="0" class="hidden">
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="icon-name">
        <path ... fill="currentColor"></path>
    </symbol>
</svg>

CSS：

.test-icon:before {
    content: "";
    display: inline-block;
    width: 48px;
    height: 48px;
    background-image: url(/assets/images/icons-sprite.svg#icon-name);
}

感谢您的回答！

编辑：我在GitHub上创建了一个仓库这里，通常它应该始终是相同的红色图标。

- JulSeb42

---

请阅读此文章：https://css-tricks.com/svg-fragment-identifiers-work/ - enxaneta

是的，我尝试了这个解决方案，但当我尝试时，我发现所有图标都只是重叠在一起。 - JulSeb42

Answer 1

试试这个

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48px' height='48px'%3E%3Cuse xlink:href='/assets/images/icons-sprite.svg%23icon-name'%3E%3C/use%3E%3C/svg%3E");

请点击此链接并粘贴您的SVG链接。您可以获取用于background-image属性的代码。 https://yoksel.github.io/url-encoder/

- Dulani Maheshi

---

不行，问题还是一样的。我看到在检查 div 时它出现在代码中，但是什么也没有显示。 - JulSeb42

我检查了这个工具，但是当我粘贴时，甚至预览都是空的... - JulSeb42

我使用了一个工具来生成精灵图（因为我有超过500个图标），但显然错误就是从那里来的。我再次尝试使用Icomoon生成，这次在CSS中可以正常工作。但现在我无法更改图标的颜色，而且HTML也不再起作用。 - JulSeb42

我创建了一个 GitHub 仓库，这样更容易 https://github.com/JulSeb42/icon-sprite - JulSeb42