Иконки из макета могут прийти в код компонентом на иконку, одним спрайтом или пакетом SVG-файлов. Как и пакет, спрайт не привязан к фреймворку. Любая страница, которая умеет писать HTML, нарисует из него символ:
<svg width="24" height="24" aria-hidden="true"><use href="/icons/sprite.svg#icon-arrow-right" /></svg>Спрайт должен отдаваться с того же источника (origin), что и страница, или быть встроен в страницу — тогда ссылка #icon-arrow-right. В этом примере у id символов префикс icon-; в FISYCO это настройка «Префикс symbol id».
Спрайт, компоненты или пакет
Подвох с цветом
CSS-селекторы не достают до фигур внутри копии <use>, а иконки из Figma приходят со своим цветом заливки или обводки. Поэтому иконка из спрайта сохраняет цвет, который у неё был в Figma.
Чтобы красить иконки спрайта из CSS, замените этот цвет на currentColor при сборке спрайта, например правилом #000000 → currentColor. Тогда иконка берёт цвет окружающего текста. В FISYCO у спрайта свой список «Замена значений атрибутов», а правила компонентов на него не действуют.
Смотрите также
- Иконки в React: настройки спрайта, префикс symbol id и правила цвета.
- SVG-спрайт из Figma и когда он лучше компонентов
- Иконки из Figma в React: весь путь