<Svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">...</svg> Есть такая

Question

<Svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">...</svg> Есть такая

свгшка
в приложении подрубаю свгшки через @svgr/webpack
вставив компонент просто на страницу я получаю исходные ширину и высоту
Есть место в приложении где нужно вывести ряд иконок с одинаковой высотой скажем в 30пкс
Проблема в том что иконки эти разные по длине (и у них разный viewBox)
Если при вставке иконок передавать только height, то width останется тот что по умолчанию - это явно не тот результат который я желаю.
Аналога width: auto в атрибутах нету, а если передавать 100% то иконка будет растягиваться по ширине не всю ширину контейнера, и это то же не тот результат который мне нужен.
Можно как-нибудь переопределить width чтобы он был удален в исходном коде иконки?

Вообще в идеале было бы чтобы вторая единица измерения была перерасчитана автоматически исходя из viewbox-а если компоненту передают только 1 единицу измерения (для браузерной совместимости), но мне сойдёт рецепт и просто как убрать ненужную единицу.
Рекомендовать не сохранять в оригинале width и height (только вьюбокс) не нужно - они установлены не зря чтобы при обычных вставках где размеры определяются через стили например не было FOUC.
Спасибо.

#frontend #javascript #programming #react.js #russian

0

04.02.2022

1 ответов

14 просмотров

Andrew Zaytsev · Accepted Answer

Andrew Zaytsev

много бакаф(

0

04.02.2022

169 похожих чатов

<Svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 20 20">...</svg> Есть такая

1 ответов

Похожие вопросы