如何从VaadinIcon中获取SVG内容或标签

方法1：运行时动态获取渲染后的完整SVG标签 #

• 适用场景：需要在用户访问页面的运行阶段获取实际渲染的SVG内容
• 实现逻辑：VaadinIcon的create()方法会生成对应的<vaadin-icon>前端组件，该组件渲染后会在Shadow DOM中生成完整的SVG标签，通过JS调用即可提取内容
• 代码示例：

import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.icon.VaadinIcon;

// 实例化目标图标
Icon targetIcon = VaadinIcon.CHECK.create();
// 执行JS获取Shadow DOM内的SVG内容
targetIcon.getElement().executeJs("return this.shadowRoot.querySelector('svg').outerHTML")
    .then(String.class, svgStr -> {
        // svgStr即为完整的<svg>标签字符串，可直接使用
        System.out.println("获取到的SVG内容：" + svgStr);
    });

方法2：静态拼装生成SVG标签 #

• 适用场景：需要在服务端非运行时环境直接生成SVG，不需要依赖前端渲染
• 实现逻辑：VaadinIcon的枚举命名与官方图标集的图标名一一对应，枚举名转小写、下划线改横杠即可得到图标名，提前存储所有图标对应的路径属性，即可直接拼装出标准SVG标签
• 代码示例：

import com.vaadin.flow.component.icon.VaadinIcon;
import java.util.HashMap;
import java.util.Map;

public class VaadinIconSvgUtil {
    // 存储图标名对应的path属性，可自行补充所有需要用到的图标路径
    private static final Map<String, String> ICON_PATH_MAPPING = new HashMap<>();
    static {
        ICON_PATH_MAPPING.put("check", "M21 7L9 19l-6-6 1.41-1.41L9 16.17 19.59 5.59 21 7z");
        ICON_PATH_MAPPING.put("user", "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z");
        // 其他图标路径按上述格式补充即可
    }

    public static String generateSvg(VaadinIcon icon, int size, String color) {
        // 转换枚举名为标准图标名
        String iconName = icon.name().toLowerCase().replace('_', '-');
        String path = ICON_PATH_MAPPING.getOrDefault(iconName, "");
        // 拼装标准SVG标签
        return String.format(
            "<svg width=\"%d\" height=\"%d\" viewBox=\"0 0 24 24\" fill=\"%s\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"%s\"/></svg>",
            size, size, color, path
        );
    }

    // 调用示例
    public static void main(String[] args) {
        String userSvg = generateSvg(VaadinIcon.USER, 24, "#000000");
        System.out.println(userSvg);
    }
}

补充说明：如果仅需在Vaadin页面上展示图标，直接调用VaadinIcon.xxx.create()生成Icon组件添加到页面容器即可，不需要手动处理SVG内容。

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