Open chipcullen opened 7 years ago
@chipcullen Try using the next version of svg-react-loader npm install svg-react-loader@next
and let me know if that solves your issue. (make sure you read the README since some things have changed -- no need for babel
for instance)
I've done away with handling special attributes, and that version has a better API for special casing these kind of things (if that becomes necessary).
Thanks,
;-j
@jhamlet I just tried, and unfortunately, no dice :(
I ran npm install svg-react-loader@next
, which, finished with this in the console:
└── svg-react-loader@0.4.0-beta.2 invalid
And when I run npm info svg-react-loader version
I get
0.3.7
Even though the directory in /node_modules/
is clearly the 0.4.0 version (the package.json indicates this)
Anyway, I can run webpack just fine, but I still get this console error in the browser:
Warning: Unknown prop `ariaLabelledby` on <svg> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
in svg (created by ... )
When inspecting the SVG in my browser dev tools, the aria-labelledby
attribute doesn't even appear, though, that may be due to React suppressing the attribute.
If it helps, here is the React file with JSX:
And here is what I'm seeing in the browser vs what is in the SVG file:
And here is the browser console:
@chipcullen thanks for the details.
I don't know what npm's issue is, but it looks like you're getting the correct version.
As a quick test (sorry, my bandwidth is limited at this time) can you try outputting an svg element through React (not using svg-react-loader, just plain react) with a property ariaLabelledby
and then with ariaLabelledBy
to see which one works?
The processor recognizes hyphens as places to camelCase things, however there is a way to special-case certain attribute names (look at the propsMap
query parameter).
I've recreated everything as per @chipcullen above and carried on with ^^.
I dropped an SVG inline into a JSX file and got the following:
ariaLabelledby
: nothingariaLabelledBy
: nothingaria-labelledby
: aria-labelledby
All of above rendered through svg-react-loader
return nothing.
I am having the same issue as @chipcullen.
I am getting Warning: Unknown prop 'ariaLabel' on <svg> tag.
and Warning: Unknown prop 'dataSrc' on <img> tag.
.
I am using version 0.4.0-beta.2´. (Although npm states
0.3.7´)
Dropping in the SVG directly the attributes are printed. I've tried to use the ´propsMap´ query parameter, but It didn't do any difference. (I don't know if I used it correctly)
Per the summary:
One issue that we are running into, however, is using the
aria-labelledby
attribute. When authoring SVGs, this attribute can be used on the root<svg>
element to aid screenreaders correctly announce what the SVG is supposed to be. Example usage:(More background on this can be found on Tip #3 here)
React handles the
aria-labelledby
attribute just fine when the SVG is pasted directly into JSX - but, when loaded via svg-react-loader you get this console error:Would it be possible to amend SVG react loader to handle
aria-labelledby
, in addition to the other attributes it handles?