为了动态更改 SVG 填充，ReactJS SVG 图标加载因 svgr 失败答案

【问题标题】：ReactJS SVG icon load fails with svgr in order to change SVG fill dinamically为了动态更改 SVG 填充，ReactJS SVG 图标加载因 svgr 失败
【发布时间】：2022-01-07 17:34:19
【问题描述】：

过去 2 小时我一直在尝试在 ReactJS 中使用 SVG，但似乎没有任何效果。

我正在使用：

"react": "^17.0.2",
"react-dom": "^17.0.2",

"devDependencies": {
        "@svgr/webpack": "^6.0.0",
        "react-svg-loader": "^3.0.3",

使用 create-react-app

我称图标为：

import { ReactComponent as Logo } from '../../icons/logo.svg';
...
<Logo fill="white" />

我得到的错误是：

./src/icons/logo.svg (./node_modules/@svgr/webpack/dist?-svgo,+titleProp,+ref!./src/icons/logo.svg)
TypeError: this.getOptions is not a function.

如果我在“img”标签中使用它，图标会显示，但我需要动态更改 SVG 的填充。如果有办法让我加载 svg 并动态更改填充，请帮助并感谢您。

【问题讨论】：

你能检查一下你使用的是哪个节点版本。 SVGR 兼容 node 8+
另一件要尝试的事情是删除 react-svg-loader

标签： javascript reactjs svg webpack

【解决方案1】：

尝试将其作为变量导入，然后将该变量包含在 src 属性的 img 标记中，如下所示。

import Logo from '../../icons/logo.svg';

<img src={Logo} alt="logo" />

或将您的 svg 添加为标记元素并使用 css 更改填充

【讨论】：