Как изменить ширину линии значка React?
Я искал простое решение для этого, но не смог найти ничего, что сработало. Я пытаюсь уменьшить ширину линии этих значков React SVG для моей формы ввода и сделать значки тоньше. Это возможно?
Я пытался использовать свойство CSS Stroke и Stroke-Width, но это не сработало.
Ваш вопрос свидетельствует об исследовательской работе. Я оценил его :) Наслаждайтесь и счастливого кодирования :)
Ответы 1
- Если вы напрямую используете код SVG в качестве компонентов React. Вам нужно будет использовать свойство
stroke-widthнепосредственно в каждом коде SVG на верхнем уровне, где задаются свойстваheight, width and fill.
Попробуй это:
stroke-width = "1"
- Если вы используете React-Icons, вы можете напрямую установить для них className и применить свой CSS в своем файле CSS.
Например:
import { FaBars } from "react-icons/fa";
Затем при использовании установите и примените свой CSS.
<FaBars className = "fa-bars" />
Спасибо за ответ. Я использую библиотеку значков реагирования и даю значкам соответствующие классы CSS. Я могу увеличить высоту, ширину, установить цвет и т. д., но мне просто интересно, могу ли я изменить ширину/жирность линий в CSS.
Хотя мы можем напрямую увеличить ширину, выполнив .fa-bars path{ stroke-width: 67px; } но настолько уменьшая ширину, что начальная ширина не работает. Увидим исправление для этого очень скоро ИншаАллах. Пожалуйста, примите ответ, нажав на значок галочки, и оцените, помог ли вам мой ответ, чтобы другие разработчики также могли извлечь пользу из вашего вопроса. Спасибо :)
Если бы вы могли поделиться кодом любого из ваших значков SVG, я посмотрю на него и заставлю его работать. Поделитесь на codepen или jsfiddle. :)