使用svgr加载ReactJS SVG图标失败，无法动态修改fill属性如何解决

报错根因 #

报错TypeError: this.getOptions is not a function是版本不兼容导致：你用的@svgr/webpack@6.x仅支持webpack 5，而create-react-app v4及更早版本内置的webpack版本为4，getOptions是webpack 5独有的API，因此调用失败。同时你安装的react-svg-loader和@svgr/webpack功能重叠，也可能引发配置冲突。

可行方案 #

方案1：降级依赖适配CRA内置webpack #

• 先卸载冲突依赖：

npm uninstall @svgr/webpack react-svg-loader
# 用yarn的话执行 yarn remove @svgr/webpack react-svg-loader

• 重新安装适配webpack4的svgr版本：

npm install @svgr/webpack@5.x --save-dev
# 用yarn的话执行 yarn add @svgr/webpack@5.x --dev

• 如果你没有手动修改过CRA的webpack配置，做完上面两步直接重启项目，原来的import { ReactComponent as Logo }语法就可以正常使用，传入fill属性即可修改颜色。

方案2：使用CRA原生SVG支持（无需额外依赖） #

create-react-app本身已经内置了SVG转React组件的能力，不需要额外安装@svgr/webpack或react-svg-loader，如果你之前为了支持SVG手动添加了自定义webpack配置（比如通过react-app-rewired、customize-cra修改配置，或是执行了eject操作），直接删除你自行添加的所有关于.svg文件的loader配置，重启项目后原生语法即可生效。

方案3：手动封装SVG为React组件（零依赖最稳妥） #

如果不想修改项目依赖和配置，可以直接把.svg文件的源码复制出来，封装为独立的React组件，直接接收fill参数：

// 例子：src/components/Logo.js
const Logo = ({ fill = "#000", ...restProps }) => (
  <svg width="24" height="24" viewBox="0 0 24 24" {...restProps}>
    {/* 把你原来SVG内部的path、circle等元素的硬编码fill替换成{fill}，或者删除硬编码的fill属性 */}
    <path fill={fill} d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z" />
  </svg>
)
export default Logo

使用方式和之前一致：

import Logo from '../../components/Logo';
...
<Logo fill="white" />

注意事项 #

无论用哪种方案，都需要先检查你的SVG源文件：如果内部的path、g等元素上写了固定的fill属性值，外层传入的fill会被内部的硬编码值覆盖，需要把SVG内部的硬编码fill删除，或者设置为fill="inherit"才能让外部传入的颜色生效。

内容的提问来源于stack exchange，提问作者Giquo