如何使用 React Component 在 UI 中显示 svg 图标（.svg 文件）？

Question

我在 react 上看到了很多 svg 库，但没有一个告诉我如何在 react 组件中导入 svg 文件。我已经看到了有关将 svg 代码引入反应的代码，而不是使用 .svg 图标作为图像并将其显示在 UI 中。

请让我知道是否有嵌入图标的方法。

原文由 Kamaraju 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果图像是远程托管的，您可以直接使用 .svg 扩展名和 img 标签。

 ReactDOM.render(
  <img src={"http://s.cdpn.io/3/kiwi.svg"}/>,
  document.getElementById('root')
);

这是小提琴： http ://codepen.io/srinivasdamam-1471688843/pen/ZLNYdy?editors=0110

注意：如果您使用任何 Web 应用程序捆绑器（如 Webpack），您需要有相关的文件加载器。

原文由 Srinivas Damam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果您使用 create-react-app 2.0 ，您现在可以这样做：

 import { ReactComponent as YourSvg } from './your-svg.svg';

然后像通常使用组件一样使用它：

 const App = () => (
 <div>
   <YourSvg />
 </div>
);

请注意，新名称必须大写，否则 React 不会将其识别为组件。

原文由 Tsuni 发布，翻译遵循 CC BY-SA 4.0 许可协议