NodeJS 如何包含/使用/导入svg来做出React

x8goxv8g 于 2023-04-29 发布在 Node.js

关注(0)|答案(1)|浏览(110)

我读了这个post，但它没有解决我的问题：
在我的情况下，SVG文件是巨大的，这使得它不可能编辑。我尝试了一些npm模块，但它们都与我的react-dom版本（^15）不兼容。4.1）。
我还尝试了一个optimiser，它应该去掉一些对react元标记无用的东西。
是否有变通方法？

1条答案

在React中使用svg文件有几种方法：

import {ReactComponent as MySvgFile} from './path/mysvgfile.svg'

并将其用作<MySvgFile />内的return语句。

import MySvgFile from './path/mysvgfile.svg'

并将其用作

<img src={MySvgFile} alt="img" />

第一种方法的问题是，svg文件的所有代码都将嵌入到我们的react项目中（在初始加载时），导致bundle大小增加。第二种方法是最好的方法，因为它会在需要时（而不是在初始加载时）通过网络从bundle中获取svg。因此，bundle将不包含svg文件的代码。