SVG는 태그와 리액트 사용JS

SVG는 태그와 리액트 사용JS

따라서 보통 간단한 스타일링을 필요로 하는 SVG 아이콘의 대부분을 포함하기 위해 다음과 같이 합니다.

<svg>
    <use xlink:href="/svg/svg-sprite#my-icon" />
</svg>

스택의 로서 React를 만, JS가서포트되고 있는 태그 리스트에서는 쪽도 없는 것을 알 수 .use ★★★★★★★★★★★★★★★★★」xlink:href지원되고 있습니다.

svg sprite를 사용하여 ReactJs에 로딩할 수 있습니까?

MDN은xlink:href 에 유리하게 추천되지 않다href을할 수 .href가지 버전이 모두 .을 사용하다

React 0.14를 기준으로xlink:href에서 React라는 할 수 .xlinkHref0.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 »xlink:href 둘 다 포함하도록 속성과 업데이트된 예제를 참조하십시오.Thanks@devuxer

업데이트 3: 쓰기 시 React master SVG 속성을 여기에서 찾을 수 있습니다.

업데이트 2: 모든 svg 속성을 react를 통해 사용할 수 있게 되었습니다(마지된 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>

2018년 9월 업데이트: 이 솔루션은 더 이상 사용되지 않습니다. 대신 Jon의 답변을 읽어 보십시오.

--

React가 모든 SVG 태그를 지원하는 것은 아닙니다. 지원되는 태그 목록이 여기에 있습니다.그들은 이 티켓의 f.f. 등 폭넓은 지원을 위해 노력하고 있다.

일반적인 회피책은 지원되지 않는 태그에 대해 HTML을 주입하는 것입니다(예:

render: function() {
    var useTag = '<use xlink:href="/svg/svg-sprite#my-icon" />';
    return <svg dangerouslySetInnerHTML={{__html: useTag }} />;
}

「 」가 xlink:href React React에서한 것을 수 텍스트에 :xlinkHref.

태그를 것입니다.를 들어 SVG는 SVG의 다른 이름공간 태그를 사용합니다.xml:space , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,xml:space becomes가 되다xmlSpace를 참조해 주세요.

Jon Surrell의 답변에서 이미 언급했듯이 현재 use-tag는 지원됩니다.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를 하는 데 .SVG를 SVG로 .xlink:href이용했습니다.xlinkHref대신 컴파일 후에 반응하는 특성xlink:href그것은 에 주어졌다.xlinkhrefSVG는 표시되지 않았습니다.많은 검사 결과, 저는 그 사실을 알게 되었습니다.xlink:href(html로 추가하거나 크롬 개발 도구에서 직접 추가하는 경우에는 가능하지만) 권장되지 않습니다.href대신 사용해야 합니다.그래서 이렇게 바꾸고 나서href효과가 있었어요

"SVG 2에서는 xlink 네임스페이스가 필요하지 않으므로 xlink:href 대신 href를 사용해야 합니다." https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href

이것은 내가 사용한 코드이다.

SVG 파일

<svg id="svg-source" style="display: none;" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
    <symbol id="svg-arrow-accordion" viewBox="0 0 15 24" fill="none">
        <path id="Path_1662" data-name="Path 1662" d="M15.642,14.142h-3V1.5H0v-3H15.642Z" transform="translate(2 2) rotate(45)" fill="currentColor"></path>
    </symbol>
</svg>

리액트 파일

<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="15" height="24">
<use href="#svg-arrow-accordion"></use>
</svg>

이것은 svg 컴포넌트입니다.

const SvgComponent = () => {
    return <svg width="0" height="0">
        <defs>
            <symbol id="test" viewBox="0 0 100 100">
                <line x1='0' y1='50' x2='100' y2='50' strokeWidth='8' stroke="#000" />
            </symbol>
        </defs>
    </svg>
}

export default SvgComponent

사용 컴포넌트

import SvgComponent from './SvgComponent';

export default function App() {
  return (
    <>
      <SvgComponent/>
      <svg>
        <use xlinkHref="#test"></use>
      </svg>
    </>
  );
}

언급URL : https://stackoverflow.com/questions/26815738/svg-use-tag-and-reactjs