React svg xmlns:xlink identifier expected

user_2026508 0
Viewed 20342

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>
);
typescript reactjs svg
3 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:

user_20265080

You can also use the svg-inline-react dependency and pass the original SVG as a string. And you do not have to worry about translating HTML to JSX syntax.

    import InlineSVG from 'svg-inline-react';

    const svgSource = `<svg xmlns="......</svg>`;
    <InlineSVG src={svgSource} />
user_115447470 

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


import convert from 'convert-svg-react'
 
function App(props) {
    
    const svg = convert(`<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-caret-right-square-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm5.5 10a.5.5 0 0 0 .832.374l4.5-4a.5.5 0 0 0 0-.748l-4.5-4A.5.5 0 0 0 5.5 4v8z"/>
    </svg>`);
 
    return (
        <>      
            {/* Will display your converted code for copying as well as your svg */}
            {svg}
        </>
    );
}
 
ReactDOM.render(
    <App />,
    document.getElementById('app')
);

user_65724610
Related