따라서 일반적으로 간단한 스타일링이 필요한 대부분의 SVG 아이콘을 포함하려면 다음을 수행합니다.
<svg>
<use xlink:href="/svg/svg-sprite#my-icon" />
</svg>
이제 새로운 프런트 엔드 개발 스택의 가능한 구성 요소로 나중에 ReactJS를 평가하고 있지만 지원되는 태그 / 속성 목록에서 둘 다 지원 되지 use
않거나 xlink:href
지원 되지 않는다는 것을 알았습니다 .
svg 스프라이트를 사용하고 ReactJS에서 이런 방식으로로드 할 수 있습니까?
답변
2018 년 9 월 업데이트 :이 솔루션은 더 이상 사용되지 않습니다 . 대신 Jon의 답변을 읽으십시오 .
–
React는 모든 SVG 태그를 지원하지 않습니다 . 여기 에 지원되는 태그 목록이 있습니다 . 그들은 더 넓은 지원, f.ex에서 작업 이 티켓 .
일반적인 해결 방법은 지원되지 않는 태그 (f.ex) 대신 HTML을 삽입하는 것입니다.
render: function() {
var useTag = '<use xlink:href="https://stackoverflow.com/svg/svg-sprite#my-icon" />';
return <svg dangerouslySetInnerHTML={{__html: useTag }} />;
}
답변
MDN은 말한다 xlink:href
되지 않습니다 찬성 href
. href
속성을 직접 사용할 수 있어야합니다 . 아래 예에는 두 버전이 모두 포함되어 있습니다.
현재 0.14 반응 , xlink:href
재산 반작용 통해 가능 xlinkHref
. 0.14 릴리스 노트 에서 “주목할만한 개선 사항”중 하나로 언급됩니다 .
<!-- REACT JSX: -->
<svg>
<use xlinkHref='/svg/svg-sprite#my-icon' />
</svg>
<!-- RENDERS AS: -->
<svg>
<use xlink:href="/svg/svg-sprite#my-icon"></use>
</svg>
업데이트 2018-06-09 :href
vs xlink:href
속성 에 대한 정보를 추가 하고 두 가지를 모두 포함하도록 예제를 업데이트했습니다. 감사합니다 @devuxer
업데이트 3 : 작성 시점에서 React 마스터 SVG 속성은 여기 에서 찾을 수 있습니다 .
업데이트 2 : 이제 반응을 통해 모든 svg 속성을 사용할 수 있습니다 (병합 된 svg 속성 PR 참조 ).
업데이트 1 : 추가 SVG 지원 랜딩을 위해 GitHub 의 svg 관련 문제 를 주시하고 싶을 수 있습니다 . 작품의 발전이 있습니다.
데모:
const svgReactElement = (
<svg
viewBox="0 0 1340 667"
width="100"
height="100"
>
<image width="667" height="667" href="https://i.imgur.com/w7GCRPb.png"/>
{ /* Deprecated xlink:href usage */ }
<image width="667" height="667" x="673" xlinkHref="https://i.imgur.com/w7GCRPb.png"/>
</svg>
);
var resultHtml = ReactDOMServer.renderToStaticMarkup(svgReactElement);
document.getElementById('render-result-html').innerHTML = escapeHtml(resultHtml);
ReactDOM.render(svgReactElement, document.getElementById('render-result') );
function escapeHtml(unsafe) { return unsafe.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'"); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.1/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom-server.browser.development.js"></script>
<h2>Render result of rendering:</h2>
<pre><svg
viewBox="0 0 1340 667"
width="100"
height="100"
>
<image width="667" height="667" href="https://i.imgur.com/w7GCRPb.png"/>
{ /* Deprecated xlink:href usage */ }
<image width="667" height="667" x="673" xlinkHref="https://i.imgur.com/w7GCRPb.png"/>
</svg></pre>
<h2><code>ReactDOMServer.renderToStaticMarkup()</code> output:</h2>
<pre id="render-result-html"></pre>
<h2><code>ReactDOM.render()</code> output:</h2>
<div id="render-result"></div>
답변
를 만나면 xlink:href
콜론을 제거하고 추가 된 텍스트를 카멜 케이싱하여 ReactJS에서 동등한 것을 얻을 수 있습니다 xlinkHref
.
결국 SVG에서, 등과 같은 다른 네임 스페이스 태그를 사용하게 될 것입니다 xml:space
. 동일한 규칙이 적용됩니다 (즉, xml:space
가됩니다 xmlSpace
).
답변
Jon Surrell의 답변에서 이미 언급했듯이 사용 태그가 이제 지원됩니다. JSX를 사용하지 않는 경우 다음과 같이 구현할 수 있습니다.
React.DOM.svg( { className: 'my-svg' },
React.createElement( 'use', { xlinkHref: '/svg/svg-sprite#my-icon' }, '' )
)
답변
이 문제를 해결하는 작은 도우미를 만들었습니다 : https://www.npmjs.com/package/react-svg-use
먼저 npm i react-svg-use -S
간단히
import Icon from 'react-svg-use'
React.createClass({
render() {
return (
<Icon id='car' color='#D71421' />
)
}
})
그러면 다음 마크 업이 생성됩니다.
<svg>
<use xlink:href="#car" style="fill:#D71421;"></use>
</svg>
답변
SVG는 React 코드에서 React 구성 요소로 직접 가져 와서 사용할 수 있습니다.
import React from 'react';
import {ReactComponent as ReactIcon} from './icon.svg';
const App = () => {
return (
<div className="App">
<ReactIcon />
</div>
);
}
export default App;