@w1ti2n7iyi

Как менять цвет svg иконки?

Суть такова: дали набор иконок, в которых части окрашены через stroke. Пример:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.00066 13.4297V13.2545C5.02636 12.7362 5.19248 12.234 5.48188 11.7997C5.9636 11.278 6.29336 10.6386 6.43657 9.94878C6.43657 9.4156 6.43657 8.8748 6.48314 8.34162C6.72375 5.77473 9.26182 4 11.7688 4H11.8309C14.338 4 16.876 5.77473 17.1244 8.34162C17.171 8.8748 17.1244 9.4156 17.1632 9.94878C17.3083 10.6402 17.6378 11.2816 18.1179 11.8073C18.4095 12.2378 18.5758 12.7381 18.5991 13.2545V13.4221C18.6164 14.1184 18.3766 14.7975 17.9239 15.3339C17.3256 15.9612 16.5137 16.3514 15.6419 16.4307C13.0856 16.705 10.5064 16.705 7.9501 16.4307C7.07931 16.348 6.26861 15.9583 5.66816 15.3339C5.2224 14.797 4.98579 14.1221 5.00066 13.4297Z" stroke="#8347EF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.84399 19.0814C10.2434 19.5828 10.83 19.9072 11.4738 19.983C12.1177 20.0587 12.7658 19.8796 13.2747 19.4851C13.4312 19.3684 13.572 19.2328 13.6938 19.0814" stroke="#8347EF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="21" cy="3" r="3" fill="#F56B63"/>
</svg>


Нужно менять цвет иконок, тоесть получается что мне нужно делать так (очень некрасиво):
button {
  svg > * {
    stroke: black;
  }

  &:hover svg > * {
    stroke: white;
  }
}


Причем в некоторых иконках есть исключения, елементы, которые не должны окрашиваться

<circle cx="21" cy="3" r="3" fill="#F56B63"/>

В идеале, я бы хотел просто делать так:
button {
  svg {
    stroke: black;
  }

  &:hover svg {
    stroke: white;
  }
}
  • Вопрос задан
  • 60 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы