How about inline svg?

[FrontMage]

Svgs can be packed as constant strings, with a macro like svg! to use it.

[chinedufn]

Sounds very interesting! I haven't touched a ton of svg (just small things here and there) so a clear picture of how this might look and what would be most important to get right doesn't pop right into my head.

Mind quickly tossing out some fake example code / painting the picture?

Cheers!!

[FrontMage]

var icon = require('images/icon.svg');

<div class="some-icon">{icon}</div>

Svgs works pretty much like strings, we can just render them into a DOM, with cargo I think we can pack them into .wasm file, instead of loading them separately.

[chinedufn]

Hmm so for some icon.svg file

<!-- icon.svg -->
<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>

We could either have a macro that you passed the string into and it converted it into a virtual_dom_rs::VirtualNode.

let icon = include_string!("./icon.svg");
let svg: virtual_dom_rs::VirtualNode = str_to_vdom!(icon);

---

Or some way to set the innerHTML of some virtual node's corresponding DOM element.. which I haven't really thought about at all yet

like...

someRealDOMElement.set_inner_html(include_str!("icon.svg"));

or

virtual_dom_node.inner_html = include_str!("icon.svg");

Just some super raw thoughts.. In general we probably need a way to set properties on a virtual node's corresponding DOM node. Other libs/frameworks could be looked at for inspiration here.

---

But yeah - curious about your thoughts here.

[FrontMage]

I think inner HTML is good enough, or we can just use the HTML macro then render it with <div>{svg}</div>.

Maybe just use svgs as static string is working as well.

[chinedufn]

Sweet!

I think it would be good to wait until someone runs into a case where they need this (or anything else that requires setting innerHTML before implementing anything (to have a real use case to target), but good to explore how we might do this now!

I know React uses dangerouslySetInnerHTML.

Another option is that we'll inevitably eventually need a way to access the real DOM node for a virtual node (i.e. if you need to call getBoundingClientRect(). So whenever we run into that need having access to the real DOM node would be another way to set innerHTML.

I'd def be curious to know how other libs / frameworks handle innerHTML and why.

[chinedufn]

Closing this for now until someone needs svg for something and we have a real use case to solve for (just so that we don't need to make up the right solution here) - thanks so much for raising this issue!!!