โดยปกติแล้วในการรวมไอคอน SVG ส่วนใหญ่ของฉันที่ต้องใช้สไตล์เรียบง่ายฉันทำ

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

ตอนนี้ฉันได้เล่นกับ ReactJS แล้วเมื่อประเมินว่ามันเป็นองค์ประกอบที่เป็นไปได้ในกองพัฒนาส่วนหน้าใหม่ของฉัน แต่ฉันสังเกตเห็นว่าในรายการแท็ก / แอตทริบิวต์ที่รองรับไม่รองรับuseหรือไม่xlink:hrefได้รับการสนับสนุน

เป็นไปได้ไหมที่จะใช้สไปรต์ svg และโหลดด้วยวิธีนี้ใน ReactJS

อัปเดตกันยายน 2018 : โซลูชันนี้เลิกใช้แล้วโปรดอ่านคำตอบของ Jonแทน

-

ตอบสนองไม่สนับสนุน SVG แท็กทั้งหมดเป็นคุณจะพูดว่ามีรายชื่อของแท็กที่สนับสนุนที่นี่ พวกเขากำลังดำเนินการเกี่ยวกับการสนับสนุนที่กว้างขึ้น f.ex ในตั๋วนี้

วิธีแก้ปัญหาทั่วไปคือการฉีด HTML แทนสำหรับแท็กที่ไม่รองรับ f.ex:

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แอตทริบิวต์ได้โดยตรง ตัวอย่างด้านล่างมีทั้งสองเวอร์ชัน

ในฐานะของReact 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กับxlink:hrefแอตทริบิวต์vs และตัวอย่างที่อัปเดตเพื่อรวมทั้งสองอย่าง ขอบคุณ @devuxer

อัปเดต 3 : ในช่วงเวลาของการเขียน, การตอบสนองคุณสมบัติ SVG ต้นแบบสามารถพบได้ที่นี่

อัปเดต 2 : ดูเหมือนว่าแอตทริบิวต์ svg ทั้งหมดควรพร้อมใช้งานผ่าน react แล้ว (ดูแอตทริบิวต์ svg ที่ผสาน)

อัปเดต 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 โดยการเอาลำไส้ใหญ่และ camelcasing 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 สามารถนำเข้าและใช้โดยตรงเป็นองค์ประกอบการตอบสนองในโค้ดการตอบสนองของคุณ

import React from 'react';
import {ReactComponent as ReactIcon} from './icon.svg';

const App = () => {
  return (
    <div className="App">
      <ReactIcon />
    </div>
  );
}
export default App;