Question

我试图将SVG添加到我的网页中，我认为格式有点奇怪。

由于我使用React加载此文件，因此style部分无法正确理解。如果您保存文件并在浏览器中打开它，它将正常工作。但如果我使用react-svg-loader进行反应加载它，它会显示一个暗图像。

import IconBook from "-!react-svg-loader!../assets/couverture-eBook-VF.svg";
...
<IconBook height={250} />

这样的风格是标准的吗？我应该以不同方式导出新的SVG吗？我真的不知道这种格式及其所有可能性。

编辑1：

我找到了感兴趣的人的工作解决方法：https://github.com/gilbarbara/react-inlinesvg

它基本上通过网络加载svg文件，其中的任何内容都将被正确加载。（包括<styles>）

不好的一面是，它会让应用程序依赖于必须通过CDN或类似的东西。（你不会在你的应用程序中嵌入svg。如果你想要一些可以用其中的所有东西构建的独立应用程序，它并不是很好）

好的一面是，它不需要对SVG文件进行任何更改，您可以将其用作网络，通过网络加载，并在浏览器中显示。

由于我正在构建一个独立的应用程序（基本上，npm run build将使用我的整个应用程序生成一个文件夹）这并不完美，因为我需要在CDN上的某个位置托管该文件。所以我一直在寻找另一种解决方案。

Answer 1

在svg文件中包含样式是很好的，正如规范所说：

层叠样式表（CSS）是用于描述的样式表语言用HTML或XML（包括XML）编写的文档的表示方言，如SVG或XHTML）。 CSS描述了元素应该如何在屏幕，纸上，演讲或其他媒体上呈现。