Библиотека иконок берёт компоненты-иконки со страниц и из секций Figma-файла и доставляет их в ваш репозиторий через pull request. На этой странице вы настроите её для React-кодовой базы.
Перед началом
- Figma подключена к вашему воркспейсу, и файл с иконками доступен через это подключение.
- К проекту подключён репозиторий. Pull request'ы приходят туда. См. Подключение репозитория.
- Вы сопровождающий проекта либо владелец или администратор воркспейса.
Создайте библиотеку
- Откройте проект, нажмите Добавить библиотеку и выберите Иконки.
- Общие настройки. Задайте название библиотеки и вставьте ссылку на Figma-файл.
- Источник. Выберите страницы с иконками и, если нужно, секции внутри них. Читаются только компоненты, отдельные фреймы игнорируются.
- Генерация. Укажите, куда попадут файлы и как они собираются (см. следующий раздел).
- Нажмите Создать библиотеку. Первая синхронизация прочитает иконки и покажет их в библиотеке.
Выберите режим генерации
Основные настройки режима Компоненты:
- Паттерн вывода, например
{section}/{name}: из{page},{section}и{name}собирается путь каждого файла. - TypeScript, Тип экспорта (именованный или по умолчанию) и Стиль объявления (стрелочная функция или объявление функции).
- Режим иконки (размер 1em): иконка подстраивается под размер окружающего шрифта.
- Замена значений атрибутов: заменяет цвет из Figma на
currentColor, чтобы иконки брали цвет текста. Добавьте по правилу на каждый цвет, например#000000→currentColor.
Замена цвета работает только в режиме Компоненты. Спрайт и пакет сохраняют цвета такими, как они нарисованы в Figma.
Получите pull request
После синхронизации откройте библиотеку и нажмите Создать PR. Pull request добавляет, обновляет и удаляет файлы иконок, а в его описании перечислены изменения. Для каждого вида изменений можно задать свою метку в настройках PR библиотеки.
Чтобы не нажимать кнопку, включите Автоматически создавать PR после каждой синхронизации в настройках PR. Если подключены вебхуки Figma, публикация библиотеки в Figma сама запускает синхронизацию.
Переименования
Переименованная в Figma иконка сохраняет свой node ID, поэтому FISYCO показывает её как переименование, а не как удаление и новую иконку. Если имена двух иконок после нормализации дают одно имя файла, синхронизация отмечает конфликт и предлагает суффикс вроде name-2. Можно также задать иконке собственное кодовое имя в библиотеке, и оно сохранится при следующих синхронизациях.