Vaadin Flow v21如何添加自定义SVG图标集并解决shadow root内SVG为空问题

问题原因 #

你的自定义SVG图标集无法渲染是因为custom-iconset-svg.js的结构不符合Vaadin官方规范，存在三处错误：

• 多余嵌套了<vaadin-iconset name="vaadin">标签，导致图标集解析逻辑识别不到自定义图标
• 图标ID命名不符合要求，自定义图标集内的单个图标ID不需要加集合前缀custom:
• 图标尺寸与渲染默认值不匹配：你定义的图标集尺寸为16，而vaadin-icon默认使用24尺寸的视图框，尺寸不匹配会导致图标无法被正确挂载

修正方案 #

1. 替换custom-iconset-svg.js内容为以下代码 #

import '@vaadin/vaadin-icon/vaadin-iconset.js';
import '@vaadin/vaadin-icon/vaadin-icon.js';

const $_documentContainer = document.createElement('template');

$_documentContainer.innerHTML = `<vaadin-iconset-svg name="custom" size="16">
<svg>
<defs>
<g id="abacus"><path d="..."></path></g>
<!-- 其余自定义图标按相同格式添加在此处 -->
</defs>
</svg>
</vaadin-iconset-svg>`;

document.head.appendChild($_documentContainer.content);

2. 可选尺寸适配 #

如果你的SVG图标实际为24px尺寸，直接将<vaadin-iconset-svg>标签的size属性修改为24即可，无需调整其他代码。

3. 路径校验 #

确保custom-iconset-svg.js文件放在项目根目录的frontend/icons路径下，与@JsModule("./icons/custom-iconset-svg.js")的配置路径一致。

修改完成后清理浏览器缓存重新加载，vaadin-icon的shadow root内会自动生成对应的use引用节点，图标即可正常渲染。

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