Перейти к содержанию

FISYCO

Публичная бета

Иконки в React

Обновлено 8 ноября 2026 г.

Библиотека иконок берёт компоненты-иконки из файла Figma и доставляет их в ваш репозиторий через pull request: по React-компоненту на иконку, одним SVG-спрайтом или пакетом SVG-файлов. На этой странице вы её настроите и увидите, что попадёт в код.

Перед началом

Figma подключена к вашему воркспейсу, и файл с иконками доступен через это подключение. См. Подключение Figma.
К проекту подключён репозиторий. Pull request'ы приходят туда. См. Подключение репозитория.
Вы сопровождающий проекта либо владелец или администратор воркспейса.

Создайте библиотеку

Откройте проект и нажмите Добавить библиотеку. Выберите Иконки и нажмите Продолжить.
Общие настройки. Укажите Название и вставьте ссылку в поле Figma файл.
Источник. Выберите страницу слева, затем секции с иконками. Каждый компонент или набор компонентов внутри них станет одной иконкой. Остальные слои не выгружаются.
Генерация. Задайте папку вывода и режим генерации (см. следующий раздел).
Нажмите Создать библиотеку. Первая синхронизация запустится сама.

Всё это можно поменять позже в Настройках библиотеки, на вкладках Общие, Источник, Генерация и Пул-реквесты.

На вкладке Обзор собраны все иконки, сгруппированные по секциям Figma, и есть поиск. Переключатель над сеткой показывает main, то есть иконки, которые уже в коде, или figma/head, то есть иконки в том виде, в каком они сейчас в Figma. Когда первый pull request сольют, в main появятся доставленные иконки.

Выберите, куда и как генерировать файлы

Откройте Настройки, затем Генерация.

Директория вывода задаёт папку в репозитории для сгенерированных файлов. Впишите путь или нажмите Выбрать папку и выберите её в репозитории. Папку, которой ещё нет, создаст первый коммит.

Затем выберите Режим генерации:

Режим	Что попадает в папку вывода	Когда подходит
Компоненты	по файлу React-компонента на каждую иконку, `.tsx` или `.jsx`	приложение на React, иконки стилизуются как текст
SVG-спрайт	один файл спрайта с `<symbol>` на каждую иконку	много иконок на странице или код не на React
Пакет	`icons/*.svg`, JSON-манифест и `package.json`	один набор иконок используют несколько приложений

Компоненты всегда генерируются под React. Для другого фреймворка возьмите спрайт или пакет.

Настройки компонентов

Паттерн вывода, например {section}/{name}: из {page}, {section} и {name} собирается путь каждого файла.
TypeScript, Тип экспорта (Именованный экспорт или Экспорт по умолчанию) и Стиль объявления (Стрелочная функция или Объявление функции).
Позиция props: куда на <svg> попадают переданные props, После или До собственных атрибутов, либо Нет.
Режим иконки (размер 1em): иконка подстраивается под размер окружающего шрифта.
SVG-атрибуты по умолчанию: ширина, высота и цвет для каждого компонента.
Замена значений атрибутов: заменяет цвет из Figma на currentColor, чтобы иконки брали цвет текста. Добавьте по правилу на каждый цвет, например #000000 → currentColor.
Шаблон компонента: пресет или собственный шаблон файла.

Имена файлов пишутся в kebab case, имена компонентов в PascalCase. С настройками по умолчанию иконка arrow-right станет файлом arrow-right.tsx в папке вывода с именованным экспортом:

import { ArrowRight } from "../assets/icons/arrow-right";

export function NextButton() {
  return (
    <button type="button">
      Далее <ArrowRight aria-hidden />
    </button>
  );
}

Настройки спрайта и пакета

У спрайта есть Имя файла спрайта, Префикс symbol id и свой список Замена значений атрибутов. Id каждого символа совпадает с именем иконки, а если задан префикс, он стоит впереди: например, icon-arrow-right.

Стили не проникают внутрь <use>, поэтому иконка из спрайта сохраняет цвет из Figma, пока вы его не замените. Добавьте правило спрайта, например #000000 → currentColor, и иконку можно будет красить из CSS. Правила компонентов на спрайт не действуют.

У пакета есть Имя пакета, Имя входного файла, Формат пакета (ESM, CJS или оба) и Добавить exports map в package.json. Иконки в пакете сохраняют цвета, нарисованные в Figma.

Получите pull request

После синхронизации в шапке библиотеки видно, сколько иконок ждут доставки, а вкладка Ожидают показывает их списком. Как их читать, описано в разделе Просмотр изменений.

Нажмите Создать PR в шапке.
FISYCO откроет pull request, который добавит, обновит и удалит файлы иконок. В его описании перечислены изменения.
Если у библиотеки уже есть открытый pull request, кнопка называется Обновить PR, и новые файлы уходят в тот же pull request.

FISYCO удаляет только те файлы, которые сам записал прошлой доставкой, и не трогает остальные файлы в папке. Когда pull request сольют, его иконки считаются доставленными.

На вкладке Пул-реквесты задаются Имя ветки, Заголовок PR и метки для добавленных, изменённых и удалённых иконок. Метка ставится, только если в pull request есть изменения этого вида. Если ваш тариф включает автоматические pull request'ы, там же есть Автоматически создавать PR после каждой синхронизации.

Новые синхронизации запускаются сами: FISYCO регистрирует вебхук на файл Figma, и публикация библиотеки в Figma запускает синхронизацию. Когда в шапке написано Есть изменения, кнопка Синхронизировать запустит её вручную.

Переименования и конфликты имён

Переименованная в Figma иконка сохраняет свой node ID, поэтому FISYCO показывает её как переименование, а не как удаление и новую иконку.

Если имена двух иконок после нормализации совпали, запуск синхронизации показывает Обнаружен конфликт имён и предлагает имя вроде name-2. Откройте запуск на вкладке История и нажмите Применить переименование. Новое имя останется за этой иконкой и в следующих синхронизациях.

См. также