Shopware 6图标缓存致all.js加载后图标消失问题排查

问题背景 #

启用Settings->System->Storefront->Activate icon cache设置后，下载中心插件的图标在页面加载完成后消失——all.js解析完成前图标会短暂显示。该问题疑似与Shopware 6.4新增的图标缓存特性相关。

图标缓存渲染逻辑 #

图标缓存机制的工作方式是：首次渲染图标时输出包含<defs>定义的完整SVG，后续相同图标通过<use xlink:href="#图标ID">复用定义，示例代码如下：

<span class="icon icon-circle-download icon-md">
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><defs><path d="m13 14.5858 [svg code shortend by me] 4.4993-7.7954z" id="icons-default-circle-download" /></defs><use xlink:href="#icons-default-circle-download" fill="#758CA3" fill-rule="evenodd" /></svg>
</span>

....

<span class="icon icon-circle-download icon-md">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#icons-default-circle-download" fill="green"></use></svg>
</span>

问题判断与可能原因 #

问题类型判断 #

这个问题大概率涉及JavaScript解析图标的逻辑，而非单纯的静态渲染Bug——因为图标在JS加载前正常显示，加载后消失，说明JS执行过程中修改了DOM或SVG的引用关系。

JavaScript导致图标消失的可能原因 #

• SVG定义被移除：JS代码可能误删除了包含<defs>的初始SVG节点，导致后续所有<use>引用失去目标，图标无法渲染。
• ID冲突或被篡改：JS可能修改了初始SVG中<path>的id属性，或者新增了同ID的元素，导致<use>引用指向错误的节点（或无节点）。
• XLink引用处理错误：部分JS逻辑可能不兼容xlink:href的引用方式，比如在动态操作DOM时，未正确保留SVG的命名空间，导致浏览器无法解析引用。
• 样式覆盖或隐藏：JS执行的样式逻辑（如添加display: none、opacity: 0等）可能将图标容器或SVG元素隐藏，视觉上表现为图标消失。
• DOM重排时的引用丢失：如果JS动态重新渲染了页面的部分区域，可能未正确保留初始的SVG定义节点，或者在重排过程中破坏了<use>与<defs>的关联。
• 图标初始化逻辑冲突：插件自身的JS图标初始化逻辑，与Shopware图标缓存的JS处理逻辑冲突，导致图标被重复初始化或错误销毁。

内容的提问来源于stack exchange，提问作者Alex