html 如何使用vaadin图标作为img源代码?

kninwzqo  于 2023-03-21  发布在  其他
关注(0)|答案(1)|浏览(144)

我的代码中有一个image tag,我想将Vaadin icon(如lumo:undo)用作img src
我将Vaadin 23lit Element一起使用,并且可以访问后端类。

有人知道如何实现这一点吗

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

setVaadinIconAsImage(){
    /*  Create path to the Vaadin icon. I can even call the backend class to retrieve a vaadin-icon .svg path here. */  
    
    /* let contact = this.shadowRoot.querySelector("#contact");
           contact.setAttribute("src", "lumo:undo"); 
    */      
    
    return "lumo:undo";     
}
1szpjjfi

1szpjjfi1#

Lumo图标作为图标字体分发,您不能使用字体字符作为图像源。
源SVG文件位于以下位置:https://github.com/vaadin/web-components/tree/main/packages/vaadin-lumo-styles/icons/svg
您可以将它们复制到项目中,然后在src属性中引用它们。

相关问题