What prop-type should I use for a material-ui icon?

Asked Jun 26 '19 at 10:43

Active Jun 26 '19 at 10:43

Viewed 33 times

I have a component that allows you to pass an icon in as a prop, with a default

import DefaultIcon from '@material-ui/icons/FeedbackOutlined';
const MyIconWrapper = ({Icon}) = (<Icon/>)

And the prop-type of:

MyIconWrapper.propTypes = { Icon: PropTypes.element }
MyIconWrapper.defaultProps = { Icon: DefaultIcon }

Because the icon is a component (looking at the source code it seems to be)?

However I get a prop-type warning about not being an element. It's in fact an object.

I have currently got this as my prop-type

MyIconWrapper.propTypes = { 
    Icon: PropTypes.shape({
        displayName: PropTypes.string.isRequired,
        type: PropTypes.shape({ render: PropTypes.func.isRequired })
    }) 
};

But this seems like I'm just redefining a react element?

Is this the correct prop-type for an icon or is there a better one to use?

asked Jun 26 '19 at 10:43

AncientSwordRage

7,086
19
90
173

in my openion, it should be just react element, "PropTypes.element" – Roy.B Jun 26 '19 at 10:53
@Roy.B, it's not a matter of *opinion*, as the prop-type library does not recognize them as elements: "**However I get a prop-type warning about not being an element. It's in fact an object.**" – AncientSwordRage Jun 26 '19 at 11:02
that's because of the way you export the icon – Roy.B Jun 26 '19 at 11:04
@Roy.B do you mean Import? What about that is problematic? – AncientSwordRage Jun 26 '19 at 11:08
1

Can the new `elementType` help with that? https://github.com/facebook/prop-types/pull/211 – chrispop Jun 26 '19 at 11:12
1

@chrispop yes that's perfect. And I've found a duplicate question candidate as well. – AncientSwordRage Jun 26 '19 at 14:49

What prop-type should I use for a material-ui icon?

0 Answers0