With antd custom svg icons, how to pass props down to svg?

Question

The example at the end of this page is not clear: antd custom icon instructions, how do I pass the "fill" property to the component when using a custom svg:

<Icon component={MessageSvg} />

This doesn't work:

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

as it doesn't paint the Icon red, but standard gray. Isn't antd supposed to pass down the props?

but but, If I do this:

<MessageSvg fill="red" />

then it works. So in theory I could wrap Icon and do an HOC to solve this, but I am sure I am missing something maybe.

I am using the webpack extension @svgr/webpack

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

Answer 1

Finally I found out.

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