Extending unsafeSVG #3240
Replies: 1 comment
-
Where do you want to class name inserted? I don't think your approach is bad necessarily. I would worry about performance and doing the string manipulation every time, so I might check the input value against the previous and only manipulate when necessary. This means making a directive instead of a simple function. I wonder if you could just wrap the input SVG string with a |
Beta Was this translation helpful? Give feedback.
-
I use lit in my day job to build internal prototypes, and I find unsafeSVG really useful. I don't have to worry about untrusted content, so it gives me a very convenient way to get svg assets into my markup inline, so that their properties can be styled in css (fill, width, height etc.).
One code convention we have here is that all css is applied to name-spaced classes, we never write styles against element names, but this causes friction with my approach to svg assets. The only way I can hit an svg inserted using unsafeSVG is to reference its element name. I've been wondering whether I can extend unsafeSVG to add a second argument, a class name, which would be inserted into the svg string returned by the function.
I'm really out of my depth here though, so I'm just hanging this out here in the hope that someone might be able to point me in the right direction. I'm wanting to be able to write something like
${unsafeSVG(genericTickSVGAsset, "bhp-Modal_Tick")}
.So far this is what I've written, from sniffing round in dev tools console logs as I go, but I know it's very brittle and hacky...
Beta Was this translation helpful? Give feedback.
All reactions