응답 svg xmlns:xlink 식별자가 필요합니다.

응답 svg xmlns:xlink 식별자가 필요합니다.

typescript, react 및 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>
);

각 속성에 대해 다음과 같은 대응 특정 철자(JSX)를 사용합니다.

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

참고 항목:

• https://reactjs.org/blog/2016/04/07/react-v15.html

svg-inline-react 종속성을 사용하여 원래 SVG를 문자열로 전달할 수도 있습니다.그리고 HTML을 JSX 구문으로 번역하는 것에 대해 걱정할 필요가 없습니다.

    import InlineSVG from 'svg-inline-react';

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

<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')
);

언급URL : https://stackoverflow.com/questions/53840684/react-svg-xmlnsxlink-identifier-expected