Как решить "Предупреждение: недопустимое свойство DOM`fill-rule`. Вы имели в виду `fillRule`?" на Twilio Flex

Question

Я только что загрузил пример приложения Twilio Flex, и как только я добавляю appConfig и запускаю npm, я сразу же вижу несколько ошибок:

• Предупреждение: неверное свойство DOM fill-rule, Ты имел ввиду fillRule?
• Предупреждение: неверное свойство DOM stroke-width, Ты имел ввиду strokeWidth?
• Предупреждение: неверное свойство DOM stop-color, Ты имел ввиду stopColor?
• Предупреждение: неверное свойство DOM stop-opacity, Ты имел ввиду stopOpacity?

Как я могу решить это? @ Twilio / flex-ui не находится на github, чтобы публиковать информацию о проблеме, и документация не упоминает о ней как об известной проблеме прямо сейчас.

Answer 1

Я исправил это, изменив эти реквизиты в файле SVG. например, «ширина штриха» в «ширина штриха» или «правило заполнения» в «правило заполнения».

Answer 2

Вам нужно изменить атрибуты class и fill-rule в теге svg. это должно быть className и fillRule. потому что использовал camelCase на javascript

Пример:

<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 3

Это происходит потому, что пример приложения Twilio Flex был создан вместе с приложением Create React, а React хочет, чтобы имена из нескольких слов были в верблюжьем деле. Возможно, вы сможете исправить ошибки с помощью ваших конфигов Webpack/Babel

Как мне избавиться от предупреждений об ошибках, сообщающих мне изменить атрибуты svg на случай верблюда?

Кстати, я не понимаю, что вы имеете в виду, когда говорите, что это не на GitHub, так как ваша ссылка указывает на репозиторий GitHub?

Answer 4

если вы используете vs-code, перейдите на панель поиска (значок увеличительного стекла), которая находится слева вверху и на втором месте по вертикали.

Предупреждение: Недопустимое правило заполнения свойства DOM. Вы имели в виду fillrule?

1. fill-rule (поместите его в поле поиска)2.fillRule (поместите его в поле замены и нажмите квадратный знак справа от этого поля)

3. Он будет заменен

Answer 5

Привет, у меня была похожая проблема, и я нашел следующую статью, надеюсь, она поможет кому-то еще в будущем.Как использовать SVG в React Предполагая, что вы создали свой проект с помощью приложения create-react-app, а затем импортировали SVG как компонент, приложение create-react-app поставляется с SVGR под капотом, для других предложений читайте статью.

import {ReactComponent as nameSvgHere} from 'twilio'

это сработало для меня ура

Answer 6

Что ж, в моем случае я понял, что некоторые из моих SVG, преобразованных в компоненты, имели одно и то же правило заполнения SVG, метку Stroke-Width и другие свойства, внутри которых браузер выдавал ошибку, просто удалите строку каждого из свойств и дал ему верблюжье написание, то есть первое слово начинается с minuscula, а остальные с мэра, ну и что-то в этом роде, надеюсь кому-то пригодится :)введите описание изображения здесь

Answer 7

Пришел сюда, потому что столкнулся с этой проблемой в SVG, который я использовал в JSX в компоненте реагирования. Мой ответ может быть не связан с вашим вопросом, но предназначен для всех, кто приходит сюда с такой проблемой, как моя.

Я исправил это, изменив атрибуты HTML в моем svg с «fill-rule», «stroke-width» и «stroke-linecap» на «fillRule», «strokeWidth» и «strokeLinecap», как предлагалось в предупреждениях.

Другими словами, я изменил html-атрибуты SVG с kebab-case на CamelCase.