Compilation error occurs for "use" tag w/ xlink:href attribute
See original GitHub issueIf you are reporting a bug, please fill in below. Otherwise feel free to remove this template entirely.
Can you reproduce the problem with latest npm?
I’m using the latest yarn version, yes it is reproducible.
Description
Using <use xlink:href="#icon-1"></use>
(inside an svg tag) in a jsx render function will cause a an error. This is likely an error in the transpiler but I’m not sure how to verify it. It is not able to handle the colon in xlink:href
.
Expected behavior
A use tag should be rendered
Actual behavior
I get the following error:
Module build failed: TypeError: name.toLowerCase is not a function
at Array.forEach (native)
@ ./src/containers/App/App.js 40:22-67```
### Environment
Run these commands in the project folder and fill in their results:
1. `npm ls react-scripts` : react-scripts@0.9.0
2. `node -v`: v7.6.0
3. `npm -v`: 4.1.2
Then, specify:
1. Operating system: Mac OS X 10.11.6
2. Browser and version: Chrome Version 56.0.2924.87 (64-bit)
Sorry I'm not able to make a repro of it, I'm not familiar with the svg tag. If I get some time tomorrow I'll look into it and make one.
Issue Analytics
- State:
- Created 6 years ago
- Comments:15 (7 by maintainers)
Top Results From Across the Web
xlink:href attribute on <use> tag throws typescript error when ...
This one works fine for me. My component extension is .tsx <use href="#iconid" xlinkHref="#iconid"/></use>. May be because you have missed ...
Read more >xlink:href - SVG: Scalable Vector Graphics - MDN Web Docs
The xlink:href attribute defines a reference to a resource as a reference IRI. The exact meaning of that link depends on the context...
Read more >SVG - Parcel
SVG is a vector-based 2D graphics format based on XML, with support for interactivity and ... Parcel recognizes the href and xlink:href attributes....
Read more >[Solved]-Using v-attr with attribute that contains colon 'xmlns:href ...
I haven't used vue.js, but looking at the source for v-attr, it appears as if it is designed to handle xlink:href. The trouble...
Read more >html-loader - NPM Package Overview - Socket - Socket.dev
HTML is minimized when the compiler demands. ... the href attribute of the image tag; the xlink:href attribute of the use tag; the...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
You need to use
xlinkHref
, notxlink:href
. 😄Just use
href
. It worked for me.