С помощью пользовательских иконок SVD и как передать реквизиты в SVG?

Question

Пример в конце этой страницы не ясен: Инструкции по использованию пользовательских значков , как передать свойство "fill" компоненту при использовании собственного svg:

<Icon component={MessageSvg} />

Это не работает:

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

, поскольку иконка не окрашивается в красный цвет, а в стандартный серый. Разве не должен сдавать реквизит?

но, но, если я сделаю это:

<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"/>}/>

Answer 2

Да, в соответствии с демо с пользовательским значком вам нужно будет передать стиль заполнения как реквизиты, как вы это сделали

<MessageSvg fill="red">

изменить его на

<Icon component={MessageSvg} style={{color: "red", fill: "red"}}>

Также обратите внимание, как они используют fill = "currentColor" в фактическом компоненте svg.Надеюсь, это поможет!