How/Where store big addon data?

Questions
1

Hello.

I support a small addon ember-mdi which store svg icons in one file assets/icons.svg and render svg icon somthing like

<svg viewbox="0 0 24 24" width="24" height="24" role="img" class="mdi-icon mdi-icon-bug ember-view">
   <use xlink:href="/assets/icons.svg#bug"></use>
</svg>

But a tag use has some bugs in IE and Firefox. I want to change this structure and store svg data in js (maybe in vendor.js) file and render svg component like

<svg viewbox="0 0 24 24" width="24" height="24" role="img" class=" mdi-icon mdi-icon-github-circleember-view>
    <path d="..."/>
</svg>

I don’t understand how and where store svg data in js. I need to generate js file from svg and add it to vendor.js, but how? Should I use treeForVendor and included hooks? broccoli-merge-trees works just with real files or I may use in-memory file? I think to store data in a variable window._ember-mdi-icons but maybe exist more right place?

2

Here are two examples that solve a similar problem in different ways:

You could choose to depend directly ember-svg-jar and just use that. Or take ideas from either of these to do it yourself.

I also think that now that we have template-only glimmer components (meaning you can have a template-only component that gets no automatically-added div around it), it’s quite nice to have SVG icons purely as components. If you rename an .svg file to .hbs and add ...attributes to the <svg> element, it does everything you’d want a component to do.

1 Like