[svg] SVG 사용 태그 및 ReactJS

Program / 글쓴이

따라서 일반적으로 간단한 스타일링이 필요한 대부분의 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, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;"); }
<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>&lt;svg
  viewBox=&quot;0 0 1340 667&quot;
  width=&quot;100&quot;
  height=&quot;100&quot;
&gt;
  &lt;image width=&quot;667&quot; height=&quot;667&quot; href=&quot;https://i.imgur.com/w7GCRPb.png&quot;/&gt;
  { /* Deprecated xlink:href usage */ }
  &lt;image width=&quot;667&quot; height=&quot;667&quot; x=&quot;673&quot; xlinkHref=&quot;https://i.imgur.com/w7GCRPb.png&quot;/&gt;
&lt;/svg&gt;</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;

답변