Output svg as a string

[olaf-k]

Hi!
I'm trying to dynamically output the string content of a lucide svg icon in a FAST web component template. The code is built with Vite and goes something like this:

// we need all the icons
import { icons } from 'lucide';
...
// inside the template
${when((x) => x.icon,
	html`<span :innerHTML="${x => svgMarkup(icons[x.icon])}"></span>`
)}

svgMarkup is a function that parses the Lucide svg object representation and output a simple svg string. I had to write it because I couldn't find a utility function to do that in Lucide. Did I miss something?

my previous prototype code was simpler but less efficient since it relied on creating the element just to serialize it...

${when((x) => x.icon,
	html`<span :innerHTML="${x => createElement(icons[x.icon]).outerHTML}"></span>`
)}

[ericfennis]

Hmm, yeah I think iconNode to SVG string utility is a bit out of scope for the regular lucide package.
But looking at the library code from FAST, you could maybe even optimize it more. By skipping the html function.
The html function will creates and HTML elements in a template element and returns a ViewTemplate instance.
So instead of creating icons to SVG string code and inject the string in the html function you could maybe create template function and append the element returned from createElement and create your ViewTemplate instance yourself. So it will go from this iconNode -> string -> innerHTML -> HTMLElement to this iconNode -> HTMLElement. What is even more efficient.

So the code will look something like this:

const iconElement = createElement(icons[x.icon])
const template = document.createElement("template");
template.append(iconElement)

${when((x) => x.icon, new ViewTemplate(template, {}))}

So not sure if this works, I never tested this. Good look!

[olaf-k]

Hey @ericfennis thanks for taking the time to reply!

You are right that handling the object would be more efficient than serializing it before transforming that into a template. What my snippet doesn't show is that the when is actually embedded in a much larger html template (the component's), which is why we're manipulating strings. In our context, using objects would defeat the purpose of templating, though in this isolated line it indeed would make more sense.

Would you be open to a "createMarkup" PR (if I ever get the time 😁) or do you think that definitely wouldn't belong in lucide?

[ericfennis]

That makes sense. Yeah I think the serializing iconNodes to strings is out of scope for the lucide package. But maybe this is something for a @lucide/utils packages, see my idea in #1607 (comment)

[olaf-k]

Sounds great. I'll monitor #1607 and would be happy to contribute the iconNodeToMarkup if/when that becomes a thing.