20

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.

Cleanshooter
  • 2,314
  • 4
  • 19
  • 29
  • to those who are saying to edit the SVG... this tag exists in the @twilio/flex-ui project. are you literally suggesting that I edit the code in the node_modules folder? That seems like a bad idea... – Cleanshooter Dec 15 '20 at 16:19

7 Answers7

26

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

isa
  • 599
  • 7
  • 18
  • 1
    you changed the fill rule in your node_modules folder? if they push an update wouldn't it get over written? Typically you never change the code inside an external library in the node_modules folder. – Cleanshooter Dec 15 '20 at 16:18
  • I'm interested in this topic. I'll be return a few days! – isa Sep 30 '21 at 10:33
  • 1
    @Cleanshooter you can use bash script :) – isa Oct 26 '22 at 14:50
4

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>
Ali Padida
  • 1,763
  • 1
  • 16
  • 34
Melis
  • 41
  • 1
  • 3
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?

frederj
  • 1,483
  • 9
  • 20
1

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

trig79
  • 384
  • 3
  • 12
1

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?

  1. 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

nitu
  • 11
  • 1
1

Well in my case I realized that several of my SVG converted to components had within the same SVG Fill-Rule, Stroke-Width label and more properties inside that the browser was throwing error, well simply delete the line of each one Of the properties and gave him a camelcase writing, that is to say the first word begins minuscula and the others with mayor, and well that something like that, I hope it serves someone :)screenshot of code

ugexe
  • 5,297
  • 1
  • 28
  • 49
JuanC75
  • 11
  • 2
0

Came here because i was facing this issue on a SVG i was using in JSX in a react component, my answer may not be related to your question but for anyone else coming here with a problem like mine.

I fixed it by changing html attributes in my svg from "fill-rule", "stroke-width" and "stroke-linecap" to "fillRule", "strokeWidth" and "strokeLinecap" as the warnings suggested.

In other words, i changed the SVG's html attributes from kebab-case to camelCase

hasharnashar
  • 113
  • 1
  • 8