如何将Vaadin图标用作img标签的src属性值？

我在Vaadin 23 + Lit Element项目中，希望将Vaadin图标（例如<lumo:undo>）作为<img>标签的src使用，且可以访问后端类。目前尝试的代码无法正常工作，代码如下：

<img id="contact" src="${this.setVaadinIconAsImage()}" />

setVaadinIconAsImage(){
    /* 生成Vaadin图标的路径。我甚至可以调用后端类来获取vaadin-icon的.svg路径。 */  
    
    /* let contact = this.shadowRoot.querySelector("#contact");
           contact.setAttribute("src", "lumo:undo"); 
    */      
    
    return "lumo:undo";     
}

前端直接实现 #

Vaadin的Lumo图标是内置的SVG资源，有两种前端直接获取路径的方式：

方式1：利用IconRegistry生成Data URL #

确保项目引入@vaadin/icon依赖，通过IconRegistry获取图标SVG内容并转成Data URL：

import { IconRegistry } from '@vaadin/icon';

setVaadinIconAsImage() {
  const registry = new IconRegistry();
  // 获取lumo:undo的SVG字符串
  const svgContent = registry.getIcon('lumo:undo');
  // 转为Data URL作为img的src
  return `data:image/svg+xml;utf8,${encodeURIComponent(svgContent)}`;
}

方式2：直接引用内置图标路径 #

Vaadin 23的Lumo图标存放在/frontend/icons/lumo/目录下，每个图标对应同名SVG文件，直接返回绝对路径即可：

setVaadinIconAsImage() {
  return '/frontend/icons/lumo/undo.svg';
}

后端辅助实现 #

如果需要通过后端类获取图标路径，可以编写后端接口返回资源，再由前端调用：

后端示例（Java） #

@GetMapping("/icons/{collection}/{name}")
public ResponseEntity<Resource> getIcon(@PathVariable String collection, @PathVariable String name) {
    // 从类路径中获取对应图标资源
    Resource resource = new ClassPathResource(String.format("META-INF/resources/frontend/icons/%s/%s.svg", collection, name));
    return ResponseEntity.ok()
            .contentType(MediaType.IMAGE_SVG_XML)
            .body(resource);
}

前端调用后端接口 #

由于接口调用是异步操作，建议在组件的firstUpdated钩子中设置img的src：

<img id="contact" />

async firstUpdated() {
  const contactImg = this.shadowRoot.querySelector('#contact');
  // 直接使用后端接口URL作为src
  contactImg.src = '/icons/lumo/undo';
  
  // 或者获取SVG内容转为Data URL（可选）
  // const response = await fetch('/icons/lumo/undo');
  // const svgText = await response.text();
  // contactImg.src = `data:image/svg+xml;utf8,${encodeURIComponent(svgText)}`;
}

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