Как изменить цвет иконки в CSS?

Question

Отрывок кода на React JS:

return (
        <div className="navbar">
            <div>
                {
                    navobj.map((el)=>
                    <button className="btn" key={el.obj.title} >
                        <img className="svgEl" src={el.obj.svg}/>
                        <p className="pEl">{el.obj.title}</p>
                    </button>
                )}
            </div>
        </div>
    )

и стили к нему:

.svgEl {
    
    stroke: #9EA4B7 !important;
}

Все подключения и импорты правильные, но иконка не хочет менять свой цвет, даже если убрать из path заданное свойство stroke. Приблизительно как выглядит эта svg иконка:

<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="" stroke="#9EA4B7" stroke-width="2.5" strokeLinecap="round" strokeLinejoin="round"/>
</svg>

Answer 1

То как вы реализовали вывод иконки не даст вам возможность сменить внутренний параметр stroke для иконки. Выводите данный объект инлайново на страницу. Тогда будет возможность достучаться через CSS

body{
  margin: 0;
  background-color: #000;
}
.svg_icon{
    stroke: #9EA4B7;
}

svg:hover  .svg_icon{
    stroke: #f00;
}

<svg  width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
  <circle class="svg_icon" cx="28" cy="28" r="14"/>
</svg>

БЛОГ НА HUSL

Как изменить цвет иконки в CSS?

Ответы (1 шт):