SVG 使用標簽和 ReactJS

Question

所以通常要包括我的大部分 SVG 圖標，需要簡單的樣式，我這樣做：

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

現在我一直在玩 ReactJS，最近將它評估為我的新前端開發堆棧中的一個可能組件，但是我注意到在其支持的標簽/屬性列表中，既不支持use也不支持xlink:href 。

是否可以使用 svg 精靈並以這種方式在 ReactJS 中加載它們？

Answer 1

MDN 說xlink:href 已被棄用而支持href 。 您應該能夠直接使用href屬性。 下面的示例包括兩個版本。

從React 0.14 開始， xlink:href可以通過 React 作為屬性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 年 6 月 9 日更新：添加了有關href與xlink:href屬性的信息，並更新了示例以包含兩者。 謝謝@devuxer

更新 3 ：在撰寫本文時，可以在此處找到 React master SVG 屬性。

更新 2 ：現在似乎所有svg 屬性都應該通過 react 可用（請參閱合並的svg 屬性 PR ）。

更新 1 ：您可能需要關注 GitHub 上與svg 相關的問題，以獲得額外的 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>

Answer 2

2018 年 9 月更新：不推薦使用此解決方案，請改為閱讀Jon 的回答。

——

反應並不支持所有的SVG標簽就像你說的，有支持的標簽的列表 在這里。 他們正在尋求更廣泛的支持，f.ex in this ticket 。

一個常見的解決方法是為不支持的標簽注入 HTML，f.ex：

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

Answer 3

如果您遇到xlink:href ，那么您可以通過刪除冒號並將添加的文本xlinkHref來獲得 ReactJS 中的等效項： xlinkHref 。

您可能最終會在 SVG 中使用其他命名空間標記，例如xml:space等。同樣的規則適用於它們（即， xml:space變成xmlSpace ）。

Answer 4

正如 Jon Surrell 的回答中已經說過的那樣，現在支持使用標簽。 如果你沒有使用 JSX，你可以這樣實現：

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

Answer 5

我創建了一個解決這個問題的小幫手： 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>

Answer 6

因此，通常包括我的大多數需要簡單樣式的SVG圖標，我這樣做：

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

現在，我一直在使用ReactJS進行后期評估，因為它是我的新前端開發堆棧中可能的組件，但是我注意到在其支持的標簽/屬性列表中，不支持use或xlink:href 。

是否可以使用svg精靈並以這種方式在ReactJS中加載它們？

Answer 7

通過使用xlink:href引用它，我在 Gutenberg 塊中顯示 SVG 時遇到了問題。 我們在 react 中使用了xlinkHref屬性，但是編譯后，渲染為xlink:href ，而是渲染為xlinkhref ，SVG 沒有顯示。 經過大量檢查，我發現xlink:href已被棄用（盡管如果我們將其添加到 html 中或直接在 chrome 開發工具中添加它，它仍然有效），而應該使用該href來代替。 因此，在將其更改為href它起作用了。

“SVG 2 不再需要 xlink 命名空間，因此您應該使用 href 而不是 xlink: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>

Answer 8

這是 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>
    </>
  );
}