How to resolve "Warning: Invalid DOM property `fill-rule`. Did you mean `fillRule`?" on Twilio Flex - 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>

Answer 4

Hey I had similar issue and found the following article, hopefully it can help someone else in the future.
How To Use SVG in React
Assuming you have created your project using create-react-app then import the SVG as a component, create-react-app comes with SVGR under the hood, for other suggestions read the article.
import {ReactComponent as nameSvgHere} from 'twilio'
it worked for me
cheers

Answer 5

if you are using vs-code , then go to search bar (magnifying glass sign) which is on the left top side ,and vertically second position .
Warning: Invalid DOM property fill-rule. Did you mean fillRule?
fill-rule (place it on search box)
2.fillRule ( place it on replace box and press the square sign right side on this box)
3 .it will be replace