Vaadin Flow 20找不到@HtmlImport注解，自定义图标该如何导入？

@HtmlImport 注解废弃说明 #

Vaadin Flow 从14版本开始正式废弃了@HtmlImport注解，该注解是旧版HTML Imports规范的配套API，在Vaadin全面切换到ES Module规范后就被移除了，对应的替代方案可以在Vaadin官方文档的版本迁移指南板块查询。

报错原因分析 #

你使用@StyleSheet注解导入HTML格式的图标集属于API误用，@StyleSheet仅支持导入CSS后缀的样式文件，且你的静态资源存放路径不符合Vaadin的静态资源扫描规则，所以才会抛出找不到路由的报错。

正确操作步骤 #

• 首先将你的iconexp-iconset-svg.html文件存放到项目的src/main/resources/META-INF/frontend/styles/目录下，不存在的目录可手动创建
• 在同目录下创建一个JS入口文件iconexp-iconset.js，写入以下内容：

import './iconexp-iconset-svg.html';

• 在需要使用该图标集的视图类上添加以下注解即可完成导入：

@JsModule("./styles/iconexp-iconset.js")

• 如果需要全局生效，可将上述注解放到你的项目AppShellConfigurator实现类上，所有页面都可以使用该图标集
• 可选优化方案：如果你的自定义图标数量不多，可以直接将SVG定义封装到CSS文件中，直接使用@CssImport注解导入即可，无需额外创建JS入口文件

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