Search code examples
svgember.jshandlebars.jsinline-svg

How to send property values to svg files using ember-inline-svg?

I am using ember-inline-svg, there is a logo.svg file, I'm calling it with

{{inline-svg 'logo' class="logo" }}

in my hbs file.

It works fine. I just need to send one more data param to it and access that in the svg file so that I can dynamically generate svgs. How would I go about doing that?

Solution

  • what you want is not possible, because svg itself has no dynamic parts.

    however you probably don't need ember-inline-svg at all. Could it be a possibility to put your svg inline into a component?

    Just create a component Logo and put the svg inside the logo.hbs:

    <svg height="60" width="200" ...attributes>
  <text y=20 >I love {{@name}}</text>
</svg>

    Then set tagName: '' (or use a template-only-glimmer-component). Then you can just use it as a component:

    <Logo class="logo" @name="Ember" />