Use SVG Resources — Directly in HTML Template

DEX475 - Access Salesforce Resources

📄 第 206 页 🎬 视频课程

课程章节介绍

今天我们来讲讲在Lightning Web Components里怎么用SVG资源。SVG就是那种可以缩放、保证清晰度的矢量图,咱们在组件里加图标或者图形经常会用到。 在LWC里呢,使用SVG主要有两种方式,第一种叫直接嵌入。很简单,你直接把SVG的标签,比如 rect(矩形)、circle(圆)、path(路径)、text(文字)这些,连同它们的位置、大小、颜色属性,直接写到HTML模板里就行了。比如你写一个 `` 标签,里面放几个 ``,就画出了一个小图标。这种方式最适合那些非常小、非常简单,而且不需要重复使用的图标。想画个对勾、一个小圆点,直接写几行代码就搞定了,清晰明了。 第二种方式叫静态资源引用。如果图标比较复杂,或者你是一个完整的SVG文件,好几个地方都要用,那直接写一堆标签就太乱了。这时候你可以把SVG文件上传到静态资源里,注意啊,SVG文件里的根元素 `` 得有个 `id` 属性,方便我们引用。上传后,在JavaScript里用 `import` 导入这个资源,得到它的资源URL。然后在HTML模板里,用 `` 标签里面放一个 `` 元素,这个 `` 的 `href` 属性,就拼接成资源的URL加上 `#` 和那个 `id`。比如 `href="/resource/myIcon#my-svg-id"`。这样就能把整个SVG图标复用过来。这种方式非常适合大的SVG、需要复用的图形,还有那种团队成员共享的图标库。 不过要记住一点,无论你用哪种方法,LWC都会做安全清理,就是那个“VAR安全清理”。它会根据一个允许列表,只放行SVG里那些安全的标签。所以即使你直接写标签,也不是什么SVG元素都能用,只能用被支持的。当然常见的 `rect`、`circle`、`path`、`text` 这些都是支持的,所以没什么大问题。 好了,总结一下:简单小图标,直接写SVG标签进去;复杂的、要重复用的图标,上传静态资源,再用 `` 引用。两种方式都很灵活,根据场景选择就好。

关键词

LWC Lightning Web Components Salesforce