Javascript 使用antd自定义svg图标，如何将道具向下传递到svg？

本页末尾的示例不清楚： , 使用自定义svg时，如何将“fill”属性传递给组件：

<Icon component={MessageSvg} />

是的，正如你所说，你必须像道具一样通过填充样式

换成

还请注意他们如何在实际的svg组件中使用fill=“currentColor”。 希望有帮助

我终于发现了

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

}/>

从“react inlinesvg”导入SVG；
} />

如何创建/导入您的

MessageSvg

svg？如下所示：从“./assets/svg/MessageSvg.svg”导入MessageSvg；这不管用。它所做的只是为封闭的图标标记设置样式，但这不会影响svg标记上的填充和其他属性。必须有一种方法从图标传递这些属性，否则，如果我们不能操纵它们，那么在文档中公开它们又有什么意义呢。

<MessageSvg fill="red" />

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

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

import SVG from "react-inlinesvg";

<Icon component={(props) => <SVG src={MessageSvg} {...props} />} />