Vì vậy, thông thường để bao gồm hầu hết các biểu tượng SVG của tôi yêu cầu tạo kiểu đơn giản, tôi thực hiện:

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

Bây giờ tôi đã chơi với ReactJS vì đánh giá muộn nó là một thành phần có thể có trong ngăn xếp phát triển front-end mới của tôi, tuy nhiên tôi nhận thấy rằng trong danh sách các thẻ / thuộc tính được hỗ trợ của nó, không usehoặc không xlink:hrefđược hỗ trợ.

Có thể sử dụng svg sprites và tải chúng theo cách này trong ReactJS không?

Cập nhật tháng 9 năm 2018 : giải pháp này không được dùng nữa, thay vào đó hãy đọc câu trả lời của Jon .

-

React không hỗ trợ tất cả các thẻ SVG như bạn nói, có một danh sách các thẻ được hỗ trợ ở đây . Họ đang làm việc để hỗ trợ rộng rãi hơn, f.ex trong vé này .

Một giải pháp phổ biến là chèn HTML thay thế cho các thẻ không được hỗ trợ, f.ex:

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

MDN nói rằng điều đó xlink:href không được chấp nhận để ủng hộ href. Bạn sẽ có thể sử dụng hrefthuộc tính trực tiếp. Ví dụ dưới đây bao gồm cả hai phiên bản.

Kể từ React 0.14 , xlink:hrefcó sẵn thông qua React dưới dạng thuộc tính xlinkHref. Nó được đề cập như một trong những "cải tiến đáng chú ý" trong các ghi chú phát hành cho 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>

Cập nhật 2018-06-09: Đã thêm thông tin về thuộc tính hrefvs xlink:hrefvà ví dụ cập nhật để bao gồm cả hai. Cảm ơn @devuxer

Cập nhật 3 : Tại thời điểm viết bài, bạn có thể tìm thấy các thuộc tính SVG của React master tại đây .

Cập nhật 2 : Có vẻ như tất cả các thuộc tính svg bây giờ sẽ có sẵn thông qua phản ứng (xem PR thuộc tính svg đã hợp nhất ).

Cập nhật 1 : Bạn có thể muốn theo dõi vấn đề liên quan đến svg trên GitHub để biết thêm về hỗ trợ SVG. Có những phát triển trong các tác phẩm.

Bản giới thiệu:

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>

Nếu bạn gặp phải xlink:href, sau đó bạn có thể nhận được tương đương trong ReactJS bằng cách loại bỏ các thư ruột kết và camelcasing các văn bản bổ sung: xlinkHref.

Cuối cùng có thể bạn sẽ sử dụng các thẻ không gian tên khác trong SVG, chẳng hạn như xml:space, v.v. Quy tắc tương tự cũng áp dụng cho chúng (tức là xml:spacetrở thành xmlSpace).

Như đã nói trong câu trả lời của Jon Surrell, thẻ sử dụng hiện được hỗ trợ. Nếu bạn không sử dụng JSX, bạn có thể triển khai nó như sau:

React.DOM.svg( { className: 'my-svg' },
    React.createElement( 'use', { xlinkHref: '/svg/svg-sprite#my-icon' }, '' )
)

Tôi đã tạo một trình trợ giúp nhỏ để giải quyết vấn đề này: https://www.npmjs.com/package/react-svg-use

đầu tiên npm i react-svg-use -Ssau đó đơn giản

import Icon from 'react-svg-use'

React.createClass({
  render() {
    return (
      <Icon id='car' color='#D71421' />
    )
  }
})

và điều này sau đó sẽ tạo ra đánh dấu sau

<svg>
  <use xlink:href="#car" style="fill:#D71421;"></use>
</svg>

SVG có thể được nhập và sử dụng trực tiếp như một thành phần React trong mã React của bạn.

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

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