How to resolve "Warning: Invalid DOM property `fill-rule`. Did you mean `fillRule`?" on Twilio Flex

Question

I just downloaded the Twilio Flex Sample App and once I add my appConfig and do a npm start I immediately see several errors:

• Warning: Invalid DOM property fill-rule. Did you mean fillRule?
• Warning: Invalid DOM property stroke-width. Did you mean strokeWidth?
• Warning: Invalid DOM property stop-color. Did you mean stopColor?
• Warning: Invalid DOM property stop-opacity. Did you mean stopOpacity?

How can I resolve these? The @twilio/flex-ui project is not on github to post an issue to and the documentation doesn't mention it as a known issue right now.

Answer 1

I fixed it by changing those props in the SVG File. e.g. ‘stroke-width’ into ‘strokeWidth’ or ‘fill-rule’ into ‘fillRule’.

Answer 2

This is happening because the Twilio Flex Sample App was built with Create React App, and React wants multiword names to be in camel case. You may be able to resolve the errors with your Webpack/Babel configs

How do I get rid of react error warnings telling me to change svg attributes to camel case?

Btw I'm confused about what you mean when you say this isn't on GitHub as your link points to a GitHub repo?

Answer 3

you have to change class and fill-rule attributes on the svg tag. it must be className and fillRule. because used camelCase on javascript

Example:

<svg width="2em" height="1em" viewBox="0 0 16 16" **className**="bi bi-cart4" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
 <path **fillRule**="evenodd" d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 "/>
</svg>