使用 antd 自定义 svg 图标，如何将道具传递给 svg？

Question

本页末尾的示例不清楚： antd 自定义图标说明，如何在使用自定义 svg 时将“填充”属性传递给组件：

<Icon component={MessageSvg} />

这不起作用：

<Icon component={MessageSvg} fill="red"/>

因为它不会将 Icon 涂成红色，而是将其涂成标准灰色。antd 不是应该把 props 传下来吗？

但是，如果我这样做：

<MessageSvg fill="red" />

那么它的工作原理。所以理论上我可以包装 Icon 并做一个 HOC 来解决这个问题，但我确定我可能遗漏了一些东西。

我正在使用 webpack 扩展 @svgr/webpack

 {
            test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
            use: [
                {
                    loader: 'babel-loader',
                },
                {
                    loader: '@svgr/webpack',
                    options: {
                        icon: true,
                    },
                },
            ]
        }

Answer 1

最后我发现了。

<Icon component={() => <MessageSvg fill="green"/>}/>