CSS-эффекты и графика

SVG в компонент

Иконка превращается в компонент React, Vue, Svelte или React Native: атрибуты переезжают в нужный регистр, цвета — в currentColor, пропсы пробрасываются в корневой тег.

Код SVG

Имя компонента

Цвета через currentColor TypeScript

Предпросмотр

Три размера и три цвета — если иконка красится, currentColor работает.

HomeIcon.jsx

export default function HomeIcon(props) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
      <polyline points="9 22 9 12 15 12 15 22" />
    </svg>
  );
}

Цвета заменены на currentColor — иконка красится через CSS color.