Passing SVG as a prop

[Scaalees]

I'm passing an imported SVG as a prop to my component. However my component is just rendering the <img /> tag rather than converting to a SVG.

Parent component

<template>
  <div>
    <child-component :svg="SVG" />
  </div>
</template>
<script>
  import SVG from '@/assets/svgs/my-svg.svg';
  export default {
    data: () => ({
       SVG
    })
  }
</script>

Child component

<template>
  <div>
    <img svg-inline :src="parentSVG" /> 
  </div>
</template>
<script>
  export default {
      props: {
        type: String,
        required: true,
      }
  }
</script>

Renders as

<img svg-inline="" src="/_nuxt/assets/svgs/my-svg.svg">

I'm using the standard nuxt config.

[mrleblanc101]

Did you read the doc ?
This only work for img in the template.
Not img imported via JS

[oliverfindl]

Hello,

please check my answer here.

If you have any questions, feel free to ask.

Thanks

[Scaalees]

No worries at all. Sorry for the confusion, didn't quite see the notice about it being only static

[adrianthedev]

This extension helped me out in the end.