Non-prop attributes are not being inherited

jpkleemans / vite-svg-loader

Vite plugin to load SVG files as Vue components

MIT License

557 stars 59 forks source link

Non-prop attributes are not being inherited #29

Closed JoseOrtiz closed 2 years ago

JoseOrtiz commented 2 years ago

When transforming an svg to a component and trying to add an attribute, like `data-testid, and it's not being rendered

Example:

<template>
  <div id="app">
    <Icon style="flex: 1" class="icon" data-testid="asfg"/>
  </div>
</template>

<script setup>
import Icon from './icons/icon.svg';
</script>

Render as:

<div id="app">
  <svg class="icon" viewBox="0 0 360 264" fill="none" xmlns="http://www.w3.org/2000/svg" style="flex: 1 1 0%;">
    ...
  </svg>
</div>

jpkleemans commented 2 years ago

Hi, I see indeed that those attributes are stripped out. What are you trying to accomplish with those data attributes? Perhaps it can be done in a different way. For example, you could work with ref to access the svg.

JoseOrtiz commented 2 years ago

I just wanted to test its presence, with the data-testid approach. I know it could be bypassed, but I want to know if another solution could be possible

visionm45 commented 2 years ago

I also need the attributes to remain intact. Otherwise i cannot use this

Antti commented 2 years ago

I tried fixing it, and it seems that if you return an object with the render function, the attribute inheritance starts working!

Here's a PR: https://github.com/jpkleemans/vite-svg-loader/pull/32 Mind giving it a try?

Antti commented 2 years ago