jpkleemans/vite-svg-loader

[a11y] Auto add focusable attribute to every SVG

Closed this issue · 2 comments

mrleblanc101 commented

Hi,
Would it be possible to auto add attributes when you place the SVG in the page.
Something like thisrole="presentation" focusable="false" tabindex="-1" for accessibility purpose ?
I was using oliverfindl/vue-svg-inline-loader in Vue 2 / Nuxt 2 with Webpack and it had this feature.

9mm commented

I'm also wondering this.. how this would be achieved when every single svg must be imported explicitly, and I would imagine asyncComponent from vue 3 would break things, as it's automatically inlining them...

@jpkleemans what is the best approach for this?

gkatsanos commented

Hey guys, I believe this is possible by passing plugins as SVGO config https://github.com/jpkleemans/vite-svg-loader#svgo-configuration , for example: https://github.com/svg/svgo/blob/main/plugins/addAttributesToSVGElement.js seems to do that exactly ?

  • 👍1