एसवीजी टैग और रिएक्टजेएस का उपयोग करते हैं

Question

इसलिए सामान्य रूप से मेरे अधिकांश एसवीजी आइकनों को शामिल करने के लिए जिन्हें सरल स्टाइल की आवश्यकता होती है, मैं करता हूं:

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

अब मैं ReactJS साथ खेल रहे हैं देर से मेरी नई सामने के अंत विकास ढेर में संभावित घटक के रूप में यह मूल्यांकन करने हालांकि मुझे लगता है कि समर्थित टैग / विशेषताओं की अपनी सूची में देखा है, न तो के रूप में useया xlink:hrefसमर्थित हैं।

क्या ReactJS में इस तरह से svg स्प्राइट्स का इस्तेमाल करना और उन्हें लोड करना संभव है?

Comments

भविष्य के आगंतुकों के लिए, अब आप उपयोग कर सकते हैं <use xlinkHref="/svg/svg-sprite#my-icon" />।

— डेविड गिल्बर्टसन

xlink:hrefपदावनत किया जाता है, अब केवल उपयोग करने के लिए माना जाता है href- developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href

— मैट ग्रीर

@MattGreer 2018 तक, सफारी को अभी भी जरूरत है xlink:hrefइसलिए हमें अभी भी इसका उपयोग करने की आवश्यकता है। वास्तविक वेब अनुप्रयोगों को या तो ब्राउज़र सुविधाओं के सामान्य भाजक का उपयोग करने की आवश्यकता होती है, या विशिष्ट वर्कअराउंड / पॉलीफ़िल को लागू करना होता है।

— टोबिया

मैं इस टिप्पणी को उन अन्य लोगों की मदद करने के लिए जोड़ रहा हूं, जो इस त्रुटि की खोज करते हैं, जिसे जॉन सरेल के उत्तर द्वारा हल किया गया था:Property 'xlink' does not exist on type 'SVGProps<SVGImageElement>

— जो एम

Answer 1

अद्यतन सितम्बर 2018 : इस समाधान को पदावनत किया गया है, इसके बजाय जॉन का जवाब पढ़ें ।

-

रिएक्ट सभी एसवीजी टैग का समर्थन नहीं करता है जैसा कि आप कहते हैं, यहां समर्थित टैग की एक सूची है । वे इस टिकट में व्यापक समर्थन, 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 }} />;
}

Comments

नहीं, उपयोग न करें dangerouslySetInnerHTML। आप xlinkHrefनीचे बताए अनुसार उपयोग कर सकते हैं ।

— टोबिया

लेखक को संभवतः इसे स्वीकार किए गए उत्तर के रूप में हटा देना चाहिए

— एक्वासर

Answer 2

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बनाम xlink:hrefगुण और अद्यतन उदाहरण दोनों शामिल करना। धन्यवाद @devuxer

अद्यतन 3 : लेखन के समय, प्रतिक्रिया मास्टर एसवीजी गुण यहां पाए जा सकते हैं ।

अद्यतन 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>

Comments

> अद्यतन 25 दिसंबर 2015: ऐसा प्रतीत होता है कि सभी svg विशेषताएँ अब प्रतिक्रिया के माध्यम से उपलब्ध होनी चाहिए (देखें विलय किए गए svg विशेषता PR)। क्या इन svg विशेषताओं का उपयोग करने का कोई मानक तरीका है? क्या वे सभी ऊंट के मामले में जैसे कि xlink: href => xlinkHref पर ऊंट हो जाएंगे?

— majorBummer

@ माजोरमबेर यहां

— जॉन

यह वास्तव में सही उत्तर होने की आवश्यकता है, खासकर जब वर्तमान चुना हुआ उत्तर खतरनाक तरीके से सलाह देता है।

— InHTML

MDN ( developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href ) के अनुसार , xlink:hrefपदावनत कर दिया गया है, और अनुशंसा hrefनामस्थान उपसर्ग के बिना उपयोग करने के लिए है । (ध्यान दें, हालाँकि, यदि आप टाइपस्क्रिप्ट का उपयोग कर रहे हैं, तो इसे दर्शाने के लिए टाइपिंग अभी तक अपडेट नहीं की गई है।)

— devuxer

लेखन के समय, xlink: href सफारी में समर्थित है, लेकिन href नहीं है।

— नियॉनक्यूब

Answer 3

यदि आप मुठभेड़ करते हैं xlink:href, तो आप बृहदान्त्र को हटाकर और जोड़े गए पाठ को व्यवस्थित करके ReactJS में समकक्ष प्राप्त कर सकते हैं xlinkHref:।

आप शायद एसवीजी, जैसे xml:space, आदि में अन्य नामस्थान-टैग का उपयोग कर रहे हैं .. वही नियम उन पर लागू होता है (यानी, xml:spaceबन जाता है xmlSpace)।

Answer 4

जैसा कि पहले ही जॉन सरेल के जवाब में कहा गया था, उपयोग-टैग अब समर्थित हैं। यदि आप 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

एसवीजी को आपके रिएक्ट कोड में एक रिएक्ट घटक के रूप में सीधे आयात और उपयोग किया जा सकता है।

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

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