airbnb / babel-plugin-inline-react-svg

A babel plugin that optimizes and inlines SVGs for your React Components.
MIT License
474 stars 92 forks source link

Adding aria-hidden attribute fails #106

Open reintroducing opened 3 years ago

reintroducing commented 3 years ago

Hello, I'm trying to implement this plugin but it's failing on the following configuration:

{
    name: 'addAttributesToSVGElement',
    params: {
        attributes: [
            {
                fill: 'currentColor',
            },
            {
                'aria-hidden': true,
            },
        ],
    },
},

This produces a console error:

Screen Shot 2021-05-04 at 8 26 38 AM

I also tried this configuration which produces the same thing:

{
    name: 'addAttributesToSVGElement',
    params: {
        attributes: [
            'fill="currentColor"',
            'aria-hidden="true"',
        ],
    },
},

I've taken a look at https://github.com/airbnb/babel-plugin-inline-react-svg/issues/33 and https://github.com/airbnb/babel-plugin-inline-react-svg/issues/42 which are both marked as fixed by https://github.com/airbnb/babel-plugin-inline-react-svg/pull/43 but I'm still seeing the issue present, although its no longer transforming to ariaLabel rather I believe the problem lies in the fact that its trying to use 'aria-label' as the attribute.

Is my configuration incorrect? Or is this an actual issue?

ljharb commented 3 years ago

What about ariaHidden?

reintroducing commented 3 years ago

@ljharb that produces the following:

Screen Shot 2021-05-04 at 8 41 23 AM
ljharb commented 3 years ago

What about:

        attributes: [
            {
                fill: 'currentColor',
                'aria-hidden': true,
            },
        ],
reintroducing commented 3 years ago

@ljharb that produces the same error as the original screenshot.