Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React svg xmlns:xlink identifier expected

How do I fix the identifier expected error when using typescript, react, and svgs?

return (
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
                   xmlns:xlink="http://www.w3.org/1999/xlink" >
         <defs> ... </defs>
         <use ... xlink:href="#path-1"/>
    </svg>
);
like image 396
jmunsch Avatar asked Dec 18 '18 20:12

jmunsch


1 Answers

Use the react specific spelling (JSX) for each attribute, for example:

return (
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
                   xmlnsXlink="http://www.w3.org/1999/xlink" >
         <defs> ... </defs>
         <use ... xlinkHref="#path-1"/>
    </svg>
);
  • xmlnsXlink
  • xlinkHref

also see:

  • https://reactjs.org/blog/2016/04/07/react-v15.html
like image 94
jmunsch Avatar answered Nov 09 '22 21:11

jmunsch