Сниппет для иконок через CSS-переменные

Проблема в том, что иконки в HTML быстро превращаются в шум: svg в разметке, обёртки, отдельные компоненты, а менять их по состоянию или теме неудобно. Здесь предлагается держать иконку как токен и подставлять её через CSS, чтобы переопределение было таким же простым, как смена переменной.

button.delete {
  --icon: var(--icon-trash-outlined);

  @media (prefers-color-scheme: dark) {
    --icon: var(--icon-trash-filled);
  }

  &:hover {
    background: var(--color-danger);
    color: var(--color-danger-text);
  }
}

Подход хорош, когда у вас есть дизайн-система и нужно реактивно менять иконки по теме, состоянию или контексту; для разовых иконок в одном месте лишний CSS может оказаться тяжелее обычного svg.

https://lea.verou.me/blog/2026/icons/