为什么这个来自雪碧工作表的SVG图像不是在HTML中呈现，而是在反应中呈现呢？
提问于 2020-07-30 03:23:44
我有SVG sprite的代码
<symbol xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" id="github">
<defs>
<pattern id="a" preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 436 428">
<image width="436" height="428" xlink:href="data:image/png;base64,.........."></image>
</pattern>
</defs>
<circle cx="11" cy="11" r="11" fill="#fff"></circle>
<path fill="url(#a)" d="M0 0h22v22H0z"></path>
</symbol>GithHub图标是用HTML代码完美呈现的，
<svg class="icon">
<use xlink:href="#github"></use>
</svg>当我使用React.JS时，图标不会显示。
指标2.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" id="github">
<defs>
<pattern id="a" preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 436 428">
<image width="436" height="428" xlink:href="data:image/png;base64,..."></image>
</pattern>
</defs>
<circle cx="11" cy="11" r="11" fill="#fff"></circle>
<path fill="url(#a)" d="M0 0h22v22H0z"></path>
</symbol>
</defs>
</svg>App.tsx
import icons from './icons2.svg';
let five = 'github';
class App extends Component {
render() {
return (
<div>
<svg>
<use href={`${icons}#${five}`} />
</svg>
</div>
);
}我在这里做错什么了？
回答 1
Stack Overflow用户
发布于 2020-07-30 04:28:57
如果您正在使用，您可以这样做：
import React from "react";
import { ReactComponent as ReactSprite } from "./icons.svg";
let five = "github";
export default function App() {
return (
<div className="App">
<ReactSprite />
<svg>
<use href={`#${five}`} />
</svg>
</div>
);
}如果不是，您需要安装SVGR并将其用作webpack加载程序。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63172121
复制
腾讯云开发者
