[英]SVG use tag and ReactJS
So normally to include most of my SVG icons that require simple styling, I do:所以通常要包括我的大部分 SVG 图标,需要简单的样式,我这样做:
<svg>
<use xlink:href="/svg/svg-sprite#my-icon" />
</svg>
Now I have been playing with ReactJS as of late evaluating it as a possible component in my new front-end development stack however I noticed that in its list of supported tags/attributes, neither use
or xlink:href
are supported.现在我一直在玩 ReactJS,最近将它评估为我的新前端开发堆栈中的一个可能组件,但是我注意到在其支持的标签/属性列表中,既不支持
use
也不支持xlink:href
。
Is it possible to use svg sprites and load them in this way in ReactJS?是否可以使用 svg 精灵并以这种方式在 ReactJS 中加载它们?
MDN says that xlink:href
is deprecated in favor of href
. MDN 说
xlink:href
已被弃用而支持href
。 You should be able to use the href
attribute directly.您应该能够直接使用
href
属性。 The example below includes both versions.下面的示例包括两个版本。
As of React 0.14 , xlink:href
is available via React as the property xlinkHref
.从React 0.14 开始,
xlink:href
可以通过 React 作为属性xlinkHref
。 It is mentioned as one of the "notable enhancements" in the release notes for 0.14.它在 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>
Update 2018-06-09: Added info about href
vs xlink:href
attributes and updated example to include both. 2018 年 6 月 9 日更新:添加了有关
href
与xlink:href
属性的信息,并更新了示例以包含两者。 Thanks @devuxer 谢谢@devuxer
Update 3 : At time of writing, React master SVG properties can be found here .更新 3 :在撰写本文时,可以在此处找到 React master SVG 属性。
Update 2 : It appears that all svg attributes should now be available via react (see merged svg attribute PR ).更新 2 :现在似乎所有svg 属性都应该通过 react 可用(请参阅合并的svg 属性 PR )。
Update 1 : You may want to keep an eye on the svg related issue on GitHub for additional SVG support landing.更新 1 :您可能需要关注 GitHub 上与svg 相关的问题,以获得额外的 SVG 支持登陆。 There are developments in the works.
工作有进展。
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, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'"); }
<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><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></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>
Update september 2018 : this solution is deprecated, read Jon's answer instead. 2018 年 9 月更新:不推荐使用此解决方案,请改为阅读Jon 的回答。
-- ——
React doesn't support all SVG tags as you say, there is a list of supported tags here .反应并不支持所有的SVG标签就像你说的,有支持的标签的列表 在这里。 They are working on wider support, f.ex in this ticket .
他们正在寻求更广泛的支持,f.ex in this ticket 。
A common workaround is to inject HTML instead for non-supported tags, f.ex:一个常见的解决方法是为不支持的标签注入 HTML,f.ex:
render: function() {
var useTag = '<use xlink:href="/svg/svg-sprite#my-icon" />';
return <svg dangerouslySetInnerHTML={{__html: useTag }} />;
}
If you encounter xlink:href
, then you can get the equivalent in ReactJS by removing the colon and camelcasing the added text: xlinkHref
.如果您遇到
xlink:href
,那么您可以通过删除冒号并将添加的文本xlinkHref
来获得 ReactJS 中的等效项: xlinkHref
。
You'll probably eventually be using other namespace-tags in SVG, like xml:space
, etc.. The same rule applies to them (ie, xml:space
becomes xmlSpace
).您可能最终会在 SVG 中使用其他命名空间标记,例如
xml:space
等。同样的规则适用于它们(即, xml:space
变成xmlSpace
)。
As already said in Jon Surrell's answer, use-tags are supported now.正如 Jon Surrell 的回答中已经说过的那样,现在支持使用标签。 If you are not using JSX, you can implement it like this:
如果你没有使用 JSX,你可以这样实现:
React.DOM.svg( { className: 'my-svg' },
React.createElement( 'use', { xlinkHref: '/svg/svg-sprite#my-icon' }, '' )
)
I created a little helper that works around this issue: https://www.npmjs.com/package/react-svg-use我创建了一个解决这个问题的小帮手: https : //www.npmjs.com/package/react-svg-use
first npm i react-svg-use -S
then simply首先
npm i react-svg-use -S
然后简单地
import Icon from 'react-svg-use'
React.createClass({
render() {
return (
<Icon id='car' color='#D71421' />
)
}
})
and this will then generate the following markup然后这将生成以下标记
<svg>
<use xlink:href="#car" style="fill:#D71421;"></use>
</svg>
So normally to include most of my SVG icons that require simple styling, I do:因此,通常包括我的大多数需要简单样式的SVG图标,我这样做:
<svg>
<use xlink:href="/svg/svg-sprite#my-icon" />
</svg>
Now I have been playing with ReactJS as of late evaluating it as a possible component in my new front-end development stack however I noticed that in its list of supported tags/attributes, neither use
or xlink:href
are supported.现在,我一直在使用ReactJS进行后期评估,因为它是我的新前端开发堆栈中可能的组件,但是我注意到在其支持的标签/属性列表中,不支持
use
或xlink:href
。
Is it possible to use svg sprites and load them in this way in ReactJS?是否可以使用svg精灵并以这种方式在ReactJS中加载它们?
I had problems with showing SVG in Gutenberg block, by referencing it with xlink:href
.通过使用
xlink:href
引用它,我在 Gutenberg 块中显示 SVG 时遇到了问题。 We used xlinkHref
property in react, but after compiling, instead to render as xlink:href
it was rendered to xlinkhref
, and SVG was not displayed.我们在 react 中使用了
xlinkHref
属性,但是编译后,渲染为xlink:href
,而是渲染为xlinkhref
,SVG 没有显示。 After a lot of examining, I found out that xlink:href
is deprecated (although it worked if we add it in html, or directly in chrome dev tools), and that href
should be used instead.经过大量检查,我发现
xlink:href
已被弃用(尽管如果我们将其添加到 html 中或直接在 chrome 开发工具中添加它,它仍然有效),而应该使用该href
来代替。 So after changing it to href
it worked.因此,在将其更改为
href
它起作用了。
"SVG 2 removed the need for the xlink namespace, so instead of xlink:href you should use href." “SVG 2 不再需要 xlink 命名空间,因此您应该使用 href 而不是 xlink:href。” https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href
This is the code I used这是我使用的代码
SVG file 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>
React file反应文件
<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>
This is svg Component.这是 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
use component使用组件
import SvgComponent from './SvgComponent';
export default function App() {
return (
<>
<SvgComponent/>
<svg>
<use xlinkHref="#test"></use>
</svg>
</>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.