【发布时间】：2021-06-02 22:49:03
【问题描述】：
我在 IcoMoon 上获取我的 SVG，我集成它们的方式如下：
我的项目中有一个“sprite.svg”文件，其中包含所有“符号”，例如：
<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-search" viewBox="0 0 32 32">
<path d="M31.008 27.231l-7.58-6.447c-0.784-0.705-1.622-1.029-2.299-0.998 1.789-2.096 2.87-4.815 2.87-7.787 0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12c2.972 0 5.691-1.081 7.787-2.87-0.031 0.677 0.293 1.515 0.998 2.299l6.447 7.58c1.104 1.226 2.907 1.33 4.007 0.23s0.997-2.903-0.23-4.007zM12 20c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z"></path>
</symbol>
<symbol id="icon-facebook" viewBox="0 0 32 32">
<path d="M19 6h5v-6h-5c-3.86 0-7 3.14-7 7v3h-4v6h4v16h6v-16h5l1-6h-6v-3c0-0.542 0.458-1 1-1z"></path>
</symbol>
... and so on
</defs>
</svg>
然后在我的 HTML 中：
<svg class="icon icon-twitter">
<use xlink:href="sprite.svg#icon-twitter"></use>
</svg>
然后我用 CSS 设置高度/宽度/颜色
.icon {
fill: $color-white;
height: 2rem;
width: 2rem;
}
它在任何地方都可以使用，除了 Firefox，它不会显示我的任何 SVG。知道发生了什么吗？
编辑： SVG 在 DOM 中没问题，当我用检查器将鼠标悬停在它们上时，它会显示它们占用的空间，它们只是不显示
编辑 2：我使用我猜想的传统方式使其工作，即不使用 sprite.svg 文件：
<svg class="icon icon-chevron-down--filter-by" viewBox="0 0 20 20" >
<path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"></path>
</svg>
Firefox 现在可以识别图标，但我仍然更喜欢只使用 <use xlink:href="sprite.svg#icon-search"></use> 而不是每次都传递整个路径...如果你们有解决方案，那很酷，否则，至少它可以工作
【问题讨论】：
-
我转储了整个符号部分，编写了一个 Web 组件（在所有现代浏览器中都支持），现在用法是：
<svg-icon is="chevron-down"></svg-icon>请参阅：iconmeister.github.io 复制/粘贴 IcoMoon 视图框宽度为box:value和d-paths，它会工作 -
在您的示例中，您已将填充颜色设置为白色，并将其放置在白色背景上。在此基础上，Firefox 正在正确呈现它。