Svg 图标在本地查看时显示，但在部署时不显示答案

【问题标题】：Svg icon shows when viewed locally but doesn't show when deployedSvg 图标在本地查看时显示，但在部署时不显示
【发布时间】：2020-06-04 09:54:11
【问题描述】：

我有一个奇怪的问题。我为我所有的 SVG 设计了一个精灵。它们都工作得很好，当我在本地运行我的代码时，即使是有问题的那个也能正常工作。但是当我部署它（firebase）时，其中一个 SVG 没有出现。可能是什么原因？

这是两个 SVG 的代码。 smile 是给我问题的一个，另一个没有。

<symbol id="create" viewBox="0 0 24 24">
<title>create</title>
<path d="M11 6.999c2.395.731 4.27 2.607 4.999 5.001.733-2.395 2.608-4.269 5.001-5-2.393-.731-4.268-2.605-5.001-5-.729 2.394-2.604 4.268-4.999 4.999zm7 7c1.437.438 2.562 1.564 2.999 3.001.44-1.437 1.565-2.562 3.001-3-1.436-.439-2.561-1.563-3.001-3-.437 1.436-1.562 2.561-2.999 2.999zm-6 5.501c1.198.365 2.135 1.303 2.499 2.5.366-1.198 1.304-2.135 2.501-2.5-1.197-.366-2.134-1.302-2.501-2.5-.364 1.197-1.301 2.134-2.499 2.5zm-6.001-12.5c-.875 2.873-3.128 5.125-5.999 6.001 2.876.88 5.124 3.128 6.004 6.004.875-2.874 3.128-5.124 5.996-6.004-2.868-.874-5.121-3.127-6.001-6.001z"/>
</symbol>


<symbol id="smile" viewBox="0 0 24 24">
<title>smile</title>
<path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 14h-12c.331 1.465 2.827 4 6.001 4 3.134 0 5.666-2.521 5.999-4zm0-3.998l-.755.506s-.503-.948-1.746-.948c-1.207 0-1.745.948-1.745.948l-.754-.506c.281-.748 1.205-2.002 2.499-2.002 1.295 0 2.218 1.254 2.501 2.002zm-7 0l-.755.506s-.503-.948-1.746-.948c-1.207 0-1.745.948-1.745.948l-.754-.506c.281-.748 1.205-2.002 2.499-2.002 1.295 0 2.218 1.254 2.501 2.002z"/>
</symbol>

它们都与所有其他符号一起包裹在这两者之间

<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>
.....svgs......
</defs>
</svg>

【问题讨论】：

您是否在页面的其他任何地方使用了 ID smile？
@ruskin 没有。我最终将路径更改为不同的 svg。我的问题已解决，但我仍然很困惑为什么这个原始问题不起作用。最终为了一个我想要的 svg 而妥协。

标签： html css reactjs svg

【解决方案1】：

您可以通过将<symbol> 标记更改为<svg> 之一来解决此问题。

我正在查看 W3C 文档，但找不到 <symbol> 标签，可能您或“firebase”正在使用某些 API 或其他东西来调整代码，请尝试以下操作：

<svg id="smile" viewBox="0 0 24 24">
	<title>smile</title>
	<path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 14h-12c.331 1.465 2.827 4 6.001 4 3.134 0 5.666-2.521 5.999-4zm0-3.998l-.755.506s-.503-.948-1.746-.948c-1.207 0-1.745.948-1.745.948l-.754-.506c.281-.748 1.205-2.002 2.499-2.002 1.295 0 2.218 1.254 2.501 2.002zm-7 0l-.755.506s-.503-.948-1.746-.948c-1.207 0-1.745.948-1.745.948l-.754-.506c.281-.748 1.205-2.002 2.499-2.002 1.295 0 2.218 1.254 2.501 2.002z"/>
	</svg>

您可能正在使用我认为也实用的 API，即fontAwesome API，它易于移动并且与文本非常吻合。

【讨论】：