DEV Community: Vyacheslav Konyshev

Создаем React-компоненты иконок с помощью Figma API и SVGR. Часть 2.

Vyacheslav Konyshev — Wed, 16 Nov 2022 11:01:18 +0000

Исходники первой части
Исходники второй части

В первой части мы автоматизировали загрузку svg иконок из Figma. Теперь нам предстоит преобразовать их в готовые к использованию React-компоненты и наделить некоторым API, например цвета и размеры. Для этого мы будем использовать SVGR и его расширенные возможности. Мы будем дорабатывать скрипт из первой части и в итоге полностью автоматизируем процесс от нарисованной иконки в Figma до готового React-компонента.

SVGR

Думаю SVGR не нуждается в представлении: по поисковому запросу "convert svg to react" в Google первым результатом будет SVGR. А всем известный create-react-app использует @svgr/webpack.

SVGR предоставляет CLI с опцией --out-dir, которая позволяет преобразовать папку целиком, а также возможность кастомизировать шаблон, благодаря чему мы сможем наделить наши иконки некоторым API.

Помимо этого SVGR использует SVGO для оптимизации кода SVG перед преобразованием его в компонент и Prettier для форматирования JavaScript. Всё это, конечно, можно настраивать. У этого инструмента ещё много возможностей и достоинств. Узнать обо всём подробнее вы сможете в документации.

Мы будем использовать SVGR версии 6.2.1, которая является последней на момент написания статьи. С выходом шестой версии было несколько важных обновлений, ознакомиться с которыми можно в гайде по миграции.

Конвертация svg-иконок в React-компоненты

Начнём с небольшого обновления icons.config.js. Хотелось бы видеть итоговые React-компоненты в папке icons, в которую сейчас загружаются svg-исходники. Давайте это изменим и будем загружать исходники иконок в папку icons_sources. Для этого обновим iconsFolder в нашем конфиге icons.config.js:

module.exports = {
  ...
  iconsFolder: 'icons_sources',
  ...
}

Теперь можем приступать к созданию компонентов иконок. Добавим @svgr/cli в наш проект.

yarn add --dev @svgr/cli

Затем создадим конфигурационный файл svgr.config.js и укажем outDir, куда мы хотим сохранять компоненты:

module.exports = {
  outDir: 'icons',
}

После чего мы уже можем запустить команду:

yarn svgr icons_sources

И сразу получим набор React-компонентов:

Более того, SVGR автоматически сгенерировал файл index.js с реэкспортами всех компонентов. Как мы видим, SVGR по умолчанию приводит названия компонентов к формату PascalCase, например для иконки add_alert.svg компонент AddAlert.js соответственно.

Так как в будущем мы планируем добавить возможность управлять цветом и размером иконок, давайте сразу позаботимся об этом, добавив некоторые настройки в конфиг SVGR.

Во-первых, необходимо заменить цвет заливки по умолчанию на currentColor, чтобы в дальнейшем можно было управлять цветом иконки через css-свойство color для элемента svg. SVGR предоставляет возможность модифицировать атрибуты перед преобразованием с помощью опции replaceAttrValues. Давайте воспользуемся этой возможностью,:

module.exports = {
  outDir: 'icons',
  replaceAttrValues: {
    '#323232': 'currentColor',
  },
}

цвет наших иконок мы можем подсмотреть в макетах или в одной из загруженных svg-иконок — в нашем случае это #323232

Во-вторых, нам нужно, чтобы атрибут viewBox остался после преобразования. Сейчас он удаляется, так как в дефолтном SVGO-пресете включен плагин removeViewBox: viewBox удаляется в том случае, если он соответствует значениям атрибутов ширины и высоты. Иконки Material как раз попадают под это правило.

Настройки SVGO мы можем указать с помощью опции svgoConfig. Согласно документации SVGO, мы можем настраивать плагины с помощью параметра overrides. Нам необходимо отключить плагин removeViewBox, поэтому настройки будут выглядеть следующим образом:

module.exports = {
  outDir: 'icons',
  replaceAttrValues: {
    '#323232': 'currentColor',
  },
  svgoConfig: {
    plugins: [
      {
        name: 'preset-default',
        params: {
          overrides: {
            removeViewBox: false,
          },
        },
      },
    ],
  },
}

В-третьих, мы можем удалить необязательный атрибут xmlns. Для этого в плагины SVGO добавим removeXMLNS:

svgoConfig: {
  plugins: [
    ...
    'removeXMLNS',
  ],
},

Это все настройки, которые нам необходимы на текущий момент. Давайте выполним команду yarn svgr icons_sources и убедимся, что в компонентах используется currentColor, viewBox и отсутствует xmlns:

Чтобы в дальнейшем выполнять загрузку иконок из figma и их преобразование в React-компоненты за одну команду, можно добавить в package.json соответствующий скрипт:

// package.json
...
"scripts": {
  ...
  "icons": "yarn load-icons && svgr icons_sources"

Storybook

Чтобы проверить компоненты в действии, предлагаю подключить Storybook. Им также будет удобно пользоваться при разработке API для иконок. Не будем отвлекаться на описание этого инструмента: думаю, многие с ним знакомы. А если нет, рекомендую срочно это исправить.

Storybook при установке смотрит в зависимости и определяет конфигурацию, поэтому давайте добавим в зависимости react и react-dom. Так как наш пример — это "библиотека" иконок, то react и react-dom устанавливаем в peerDependencies, а чтобы работал Storybook, дублируем в devDependencies:

yarn add --peer react react-dom
// and
yarn add --dev react react-dom

После чего вызываем команду для добавления Storybook:

npx sb init

После того как эта команда отработает, в проект добавится папка stories с примерами по умолчанию.

Удалим всё содержимое папки stories и добавим два новых файла. Первый — Icons.js, в котором импортируем все иконки и рендерим их в компоненте Icons:

// stories/Icons.js
import React from 'react';

import * as icons from '../icons';

export const Icons = () => (
  <>
    {Object.values(icons).map((Icon, index) => (
      <Icon key={index} />
    ))}
  </>
);

Второй, icons.storis.mdx, — страница с отображением иконок:

// stories/Icons.stories.mdx
import { Meta } from '@storybook/addon-docs';
import { Icons } from './Icons';

<Meta title="Icons" />

## Иконки

<Icons />

После чего можно запустить Storybook:

yarn storybook

Теперь мы видим, что компоненты иконок отлично работают:

API иконок

Как упоминалось ранее, мы добавим для иконок возможность указать цвет и размер. На самом деле мы уже можем управлять цветом и размером наших компонентов-иконок, так как SVGR по умолчанию пробрасывает все переданные параметры на корневой элемент, а о наследовании цвета и масштабировании мы уже позаботились при преобразовании в компоненты:

Мы можем в этом убедиться, добавив атрибуты color, height и width при создании элементов в stories/Icons.js:

// stories/Icons.js
...
<Icon key={index} color="orange" height={48} width={48} />

После чего мы увидим соответствующие изменения в Storybook:

Но просто возможность указать любой цвет и размер не всегда то, что нужно. Чаще всего необходимо предоставить некоторый стандартизированный набор цветов и размеров. Для этого нам нужно получить контроль над конечным набором параметров для svg.

SVGR Custom Template

Как мы видим из примеров выше, по умолчанию у компонентов корневой элемент — svg, для которого указаны параметры по умолчанию (из svg-исходников иконки), а через {...props} прокидываются все остальные параметры. Но если заменить корневой элемент на некоторый компонент SvgIcon, то в этом компоненте мы получим доступ ко всем входящим параметрам и сможем управлять финальным набором параметров для svg.

Данный подход с SvgIcon используется в Material

SVGR предоставляет возможность задать шаблон, который будет использоваться при преобразовании иконок в компоненты — Custom Templates. С помощью этой возможности мы заменим корневой элемент компонентов на компонент SvgIcon, который мы реализуем чуть позже. Для этого добавим наш custom template в svgr.config.js:

const { types } = require('@babel/core');

module.exports = {
  ...
  template: function svgrCustomTemplate(
    { imports, interfaces, componentName, props, jsx, exports },
    { tpl }
  ) {
    // меняем корневой элемент на SvgIcon
    jsx.openingElement.name.name = 'SvgIcon';
    jsx.closingElement.name.name = 'SvgIcon';

    // https://github.com/gregberge/svgr/issues/530
    // при изменении корневого элемента пропадает спред пропсов
    // поэтому необходимо добавить спред пропсов самостоятельно
    jsx.openingElement.attributes.push(
      types.jSXSpreadAttribute(types.identifier('props'))
    );

    return tpl`
  ${imports};
  import { SvgIcon } from '../SvgIcon';

  ${interfaces};

  const ${componentName} = (${props}) => (
    ${jsx}
  );

  ${exports};
  `
  }
}

После выполнения команды yarn svgr icons_sources мы увидим, что наши иконки приняли новый облик:

Теперь можно приступать к реализации компонента SvgIcon.

SvgIcon

Прежде всего давайте определимся с цветами и размерами, которые мы будем предоставлять. Для примера возьмем три цвета из палитры цветов Material: Error, Warning и Info:

А также два размера из Meterial Icons: small и large, значения которых 20x20 и 35x35 соответственно.

В итоге мы получим следующие наборы цветов и размеров:

const colors = {
  error: '#ef5350',
  info: '#03a9f4',
  warning: '#ff9800',
}

const sizes = {
  'small': 20,
  'large': 35,
}

Как мы уже обсуждали выше, по умолчанию в корневой элемент компонента передаются следующие параметры:

width, height и viewBox — размеры и viewBox по умолчанию
children — содержимое svg-элемента: path, clipPath и др.
{...props} — все остальные параметры

Чтобы наделить наши иконки API цветов и размеров, нам необходимо на стороне компонента SvgIcon реализовать поддержку параметров color и size, с помощью которых и будет происходить управление размером и цветом.

Следовательно, в компоненте SvgIcon мы делаем следующее:

получаем с помощью деструктуризации параметры width, height, children, color и size
все остальные параметры собираем в ...props
возвращаем svg-элемент, в который первым делом пробрасываем все параметры ...props, а значения color, height и width определяем на основе параметров color и size
пробрасываем children в svg-элемент.

Для простоты примера будем указывать стили с помощью атрибутов.

export const SvgIcon = ({
  children, color, height, size, width, ...props
}) => {
  return (
    <svg
      {...props}
      color={colors[color] || color}
      height={sizes[size] || height}
      width={sizes[size] || width}
    >
      {children}
    </svg>
  );
};

Компонент SvgIcon в итоге выглядит следующим образом:

// SvgIcon/SvgIcon.js
import React, { forwardRef } from 'react';
import { node, oneOf } from 'prop-types';

const colors = {
  error: '#ef5350',
  info: '#03a9f4',
  warning: '#ff9800',
}

const sizes = {
  'small': 20,
  'large': 35,
}

export const SvgIcon = forwardRef(function SvgIcon(
  { children, color, height, size, width, ...props },
  ref
) {
  return (
    <svg
      {...props}
      color={colors[color] || color}
      height={sizes[size] || height}
      width={sizes[size] || width}
      ref={ref}
    >
      {children}
    </svg>
  );
});

Для того чтобы посмотреть, как работает SvgIcon компонент, давайте добавим для него историю в storybook.

// stories/SvgIcon.stories.js
import React from 'react';

import { SvgIcon } from '../SvgIcon';

export default {
  title: 'SvgIcon',
  component: SvgIcon,
};

const Template = (args) => (
  <SvgIcon width={24} height={24} viewBox="0 0 24 24" {...args}>
    <path d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z" fill="currentColor"/>
  </SvgIcon>
);

export const Playground = Template.bind({});

Storybook автоматически создает элементы управления для аргументов на основе PropTypes или типов TypeScript. Давайте добавим PropTypes для нашего компонента.

yarn add prop-types

// SvgIcon/SvgIcon.js
import { node, oneOf } from 'prop-types';
...

SvgIcon.propTypes = {
  children: node,
  color: oneOf(Object.keys(colors)),
  size: oneOf(Object.keys(sizes)),
};

Теперь мы сможем посмотреть на работу компонента SvgIcon в storybook:

И таким API будет наделён каждый компонент-иконка. Теперь мы можем использовать иконки следующим образом:

import { AddAlert, Warning, ErrorOutline } from '../icons';

const Example = () => {
  return (
    <>
      <AddAlert size='large' color='info' />
      <Warning color='warning' />
      <ErrorOutline size='small' color='red' />
    </>
  )
}

Заключение

Таким образом, объединив скрипт загрузки иконки из первой части и преобразование svg-иконок в React-компоненты из второй, мы можем полностью автоматизировать процесс от иконки в Figma до готового к использованию компонента, наделённого некоторым стандартизированным API.

Как уже упоминалось в первой части, скрипт и настройки инструментов могут и будут отличаться в зависимости от проекта. Не всегда достичь полной автоматизации будет так же просто, как в примере из текущей статьи. Автоматизация требует достаточного уровня согласованности, соблюдения договорённостей между разработчиками и дизайнерами, а также хорошей структуры макетов и др. Но если хорошо постараться, то весь процесс можно будет свести к запуску одной команды.

Создаем React-компоненты иконок с помощью Figma API и SVGR. Часть 1.

Vyacheslav Konyshev — Wed, 16 Nov 2022 11:00:40 +0000

Исходники первой части
Исходники второй части

Не так давно я занимался обновлением API иконок в библиотеке React-компонентов (далее — ui-kit). Основной задачей обновления было избавиться от необходимости настраивать svg-лоадер на проекте, которой использует ui-kit (так как иконки просто лежали как svg-файлы в отдельной папке), и добавить иконкам некоторый общий API, например цветов и размеров.

Заодно было решено полностью автоматизировать процесс добавления иконок в ui-kit, так как до этого иконки вручную экспортировались из Figma и добавлялись в ui-kit.

В данной статье мы рассмотрим решение описанных выше задач на отдельном примере.

Статья разделена на две части. В первой части мы познакомимся с Figma API, а также напишем автоматизацию (далее — скрипт) для загрузки иконок из макетов. Во второй — займёмся преобразованием svg-иконок в готовые к использованию React-компоненты с помощью SVGR, а также создадим компонент SvgIcon, который будет наделять иконки некоторым общим API, и будем использовать его в SVGR Custom template.

Пример работы скрипта, который мы создали в первой части статьи:

О примере

В качестве иконок мы будем использовать общедоступные Material Design Icons. Они отлично подходят для примера, так как хорошо организованы: разбиты на группы, есть определенные правила именования.

Прежде всего я создал копию иконок Material Design Icons в Figma.

Нам не нужны все иконки. Будет достаточно несколько небольших групп на одной из страниц. Поэтому я оставил 3 небольшие группы иконок на странице Filled: Alert, Content и Editor.

В начале статьи указана ссылка на исходники первой части. Чтобы пример работал, после клонирования репозитория вам необходимо создать свою копию иконок Material Design и использовать ваш personal access token для Figma API. Тема аутентификации Figma API ещё будет затронута ниже.

Figma API

Figma API предоставляет доступ для чтения и взаимодействия с файлами Figma. Выполняя HTTP запросы по определённым эндпоинтам с параметрами, можно запрашивать файлы, изображения, версии файлов, пользователей, комментарии и т.д. Подробно ознакомиться с Figma API можно по ссылке.

Для работы с Figma API необходима аутентификация. В этом примере я буду использовать personal access token. При выполнении запросов будет достаточно указать его в заголовке x-figma-token. Подробнее о способах аутентификации можно узнать в документации.

Нас интересует получение информации о файле и получение информации об изображениях.

Получение информации о файле

Под файлом подразумевается копия иконок Material Design, созданная мною ранее.
Для начала нам необходимо узнать полный url, по которому мы сможем выполнить http запрос для получения информации о файле. Базовый url для Figma API — https://api.figma.com/. Затем к нему добавляется эндпоинт нужного типа. Для получения информации о файле используется эндпоинт GET /v1/files/:key, где key — уникальный идентификатор файла, который можно узнать из ссылки на файл, используя шаблон https://www.figma.com/file/:key/:title.
В нашем случае это x2vqkyeGdrL0nnSbLslveL.

Таким образом, полный url для запроса информации о файле — https://api.figma.com/v1/files/x2vqkyeGdrL0nnSbLslveL.
Если мы выполним GET-запрос по этому url, то получим информацию о всём файле. Нас же интересуют только иконки на странице Filled.

Иконки сгруппированы в отдельных фреймах, и у каждого фрейма есть идентификатор узла node-id, который можно узнать из url.

Как мы видим, идентификатор узла с иконками Alert — 6%3A8347.
%3A — это закодированный символ двоеточие ":". Следовательно, идентификатор в незакодированном виде — 6:8347. Таким же образом мы узнаём идентификаторы для иконок Content и Editor — 6:8877 и 6:9532 соответственно.

Чтобы получить информацию только об этих узлах, необходимо в query параметрах запроса указать ids — список идентификаторов узлов, о которых мы хотим получить информацию, через запятую.

Также можно добавить параметр depth=3, чтобы получить информацию об объектах не глубже третьего уровня вложенности: это сильно уменьшит размер ответа, при этом вся необходимая нам информация будет по-прежнему доступна. Таким образом, финальный url принимает следующий вид:
https://api.figma.com/v1/files/x2vqkyeGdrL0nnSbLslveL?ids=6:8347,6:8877,6:9532&depth=3.

Теперь мы можем выполнить GET-запрос.

в заголовках не забываем про x-figma-token

В ответе нас интересует только поле components. Оно содержит объект, ключи которого — идентификаторы узлов, а значения — metadata. Узлами в данном случае являются иконки. Идентификаторы мы будем использовать для получения информации об изображениях, а из metadata сможем взять name — название иконки.

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

Подход с перечислением идентификаторов узлов с иконками может показаться не совсем удобным. И у него действительно есть свои минусы: таких узлов может быть много, и нужно следить за их актуальностью.

Альтернативой такому подходу может быть загрузка информации о всей странице с иконками без перечисления ids - GET https://api.figma.com/v1/files/x2vqkyeGdrL0nnSbLslveL. Мы по-прежнему получим всю необходимую информацию в components, и при этом нет необходимости перечислять идентификаторы фреймов с иконками. Но при этом появляется риск получить в components какой-либо сторонний объект, который не является иконкой, и ссылка на его изображение будет вести на пустую страницу, что может приводить к ошибкам. Я лично сталкивался с такими проблемами, и, честно говоря, отладка таких проблем — не самое приятное занятие. Учитывайте это при выборе стратегии получения информации об иконках.

Получение информации об изображениях

Для получения информации об изображениях используется эндпоинт GET /v1/images/:key. В параметрах запроса необходимо указать ids — идентификаторы узлов, для которых необходимы изображения — через запятую, а также format. Идентификаторы мы можем получить, взяв ключи объекта components из предыдущего запроса, а формат в нашем случае — svg.

Для примера запроса возьмём несколько первых идентификаторов: 6:8346, 6:8344 и 6:8343

Таким образом, url принимает следующий вид: https://api.figma.com/v1/images/x2vqkyeGdrL0nnSbLslveL?ids=6:8346,6:8344,6:8343&format=svg

В ответе мы получим для каждого указанного идентификатора соответствующий url для загрузки изображения в указанном формате. Пусть вас не смущает слово изображение: ссылки ведут на страницы с svg-иконками.

Их мы и будем загружать с помощью скрипта.

Загрузка иконок

Наш скрипт будет состоять из следующих шагов:

запрашиваем информацию об иконках;
запрашиваем изображения иконок в формате svg;
загружаем svg-исходники иконок;
сохраняем иконки во временной папке;
делаем временную папку с иконками основной.

Временная папка необходима, чтобы не нарушать целостность основной папки с иконками во время выполнения скрипта на случай, если что-то пойдёт не так.

Инструменты

Используемая версия nodejs - 16.13.0.
Для выполнения шагов, описанных выше, воспользуемся Listr: он предоставляет удобный способ для выполнения последовательных (и не только) задач, а также делает красивый вывод информации о выполнении каждого шага в терминал.
Для работы с файловой системой будем использовать fs-extra, а для выполнения http-запросов — axios.

Настройки

Создадим следующую файловую структуру:

scripts/
  icons/
    load-icons.js    // скрипт загрузки иконок
    icons.config.js  // настройки
  figma-api.js       // интерфейс для работы с Figma API

В icons.config.js вынесем константы, которые будем использовать в скрипте загрузки иконок:

module.exports = {
  iconsFileKey: 'x2vqkyeGdrL0nnSbLslveL',
  iconsFolder: 'icons',
  iconsFramesIds: ['6:8347', '6:8877', '6:9532'],
  tempIconsFolder: 'temp_icons',
  personalAccessToken: 'YOUR_PERSONAL_ACCESS_TOKEN',
}

Если будете копировать пример, не забудьте заменить iconsFileKey и personalAccessToken.

скорее всего, ваш personal access token вы захотите хранить в переменных окружения, но для примера допустим, что он хранится так же в конфиге.

Интерфейс для работы с Figma API

В figma-api.js реализуем функцию-конструктор, которая принимает personal acess token и возвращает методы для работы с Figma API. В нашем случае нам необходимо только 2 метода: getFile и getImages. Так как мы выше уже разобрались, какие эндпоинты и с какими параметрами для этого необходимы, нам не составит труда их реализовать.

для работы с Figma API также есть множество библиотек, которые предоставляют удобный и полноценный api для работы с Figma, например figma-api

const axios = require('axios');

function FigmaApi({ personalAccessToken }) {
  const instance = axios.create({
    baseURL: 'https://api.figma.com/',
    headers: { 'X-Figma-Token': personalAccessToken },
  });

  return {
    getFile: (fileKey, { ids, ...opts } = {}) =>
      instance
        .get(`/v1/files/${fileKey}`, {
          params: {
            ids: ids?.join(','),
            ...opts,
          }
        })
        .then(res => res.data),
    getImage: (fileKey, { ids, ...opts } = {}) =>
      instance
        .get(`/v1/images/${fileKey}`, {
          params: {
            ids: ids?.join(','),
            ...opts,
          }
        })
        .then(res => res.data),
  }
}

module.exports = {
  FigmaApi,
}

Скрипт загрузки иконок

Давайте разберем каждый шаг отдельно.

Шаг первый — запрашиваем информацию об иконках. Нас интересует только объект components, поэтому сразу получим его через деструктуризацию:

const { components } = await figmaApi.getFile(iconsFileKey, {
  ids: iconsFramesIds,
  depth: 3,
});

Шаг второй — запрашиваем изображения иконок в формате svg. Для этого необходимо передать список идентификаторов иконок, а, как мы помним, ключами components и являются эти идентификаторы.

const { images } = await figmaApi.getImage(iconsFileKey, {
  ids: Object.keys(components),
  format: 'svg',
});

Шаг третий — загружаем svg-исходники иконок. Так как images — это объект, значениями которого являются ссылки на страницы с иконками, сделать это можно, выполнив обычный GET-запрос для каждого значения в объекте images:

const sources = await Promise.all(
  Object.keys(images).map(id => axios.get(images[id])
);

Таким образом, мы получим массив исходников для всех иконок, но уже на следующем шаге нам нужно знать название файла для каждого исходника. Поэтому мы немного модифицируем код, добавив после каждого GET-запроса создание объекта с полями fileName (используем название иконки) и source (исходники):

const sources = await Promise.all(
  Object.keys(images).map(
    id => axios.get(images[id]).then(res => ({
      fileName: components[id].name,
      source: res.data,
    }))
  )
);

Шаг четвертый - сохраняем иконки во временной папке.

await Promise.all(
  sources.map(({ fileName, source }) =>
    fs.outputFile(`${tempIconsFolder}/${fileName}.svg`, source)
  )
);

Шаг пятый — делаем временную папку с иконками основной.

await fs.move(tempIconsFolder, iconsFolder, { overwrite: true });

Теперь остается собрать все шаги вместе. Каждый шаг мы будем выполнять как отдельные задачи с помощью инструмента Listr, о котором я упоминал ранее. Обмениваться информацией между шагами можно с помощью контекста ctx. В итоге мы получаем готовый скрипт загрузки иконок:

const fs = require('fs-extra');
const axios = require('axios');
const Listr = require('listr');

const { FigmaApi } = require('../figma-api');

const {
  iconsFileKey,
  iconsFolder,
  iconsFramesIds,
  personalAccessToken,
  tempIconsFolder,
} = require('./icons.config')

const figmaApi = new FigmaApi({ personalAccessToken })

const tasks = new Listr([
  {
    title: 'Запрос информации об иконках',
    task: async ctx => {
      const { components } = await figmaApi.getFile(iconsFileKey, {
        ids: iconsFramesIds,,
        depth: 3,
      });
      ctx.components = components;
    }
  },
  {
    title: 'Запрос изображений иконок в формате svg',
    task: async ctx => {
      const { components } = ctx;
      const { images } = await figmaApi.getImage(iconsFileKey, {
        ids: Object.keys(components),
        format: 'svg',
      });
      ctx.images = images;
    }
  },
  {
    title: 'Загрузка svg-исходников иконок',
    task: async ctx => {
      const { components, images } = ctx;
      const sources = await Promise.all(
        Object.keys(images).map(
          id => axios.get(images[id]).then(res => ({
            fileName: components[id].name,
            source: res.data,
          }))
        )
      );
      ctx.sources = sources;
    }
  },
  {
    title: 'Сохранение иконок во временной папке',
    task: async ctx => {
      const { sources } = ctx;
      await Promise.all(
        sources.map(({ fileName, source }) =>
          fs.outputFile(`${tempIconsFolder}/${fileName}.svg`, source)
        )
      );
    }
  },
  {
    title: 'Замена основной папки с иконками временной папкой',
    task: async () => {
      await fs.move(tempIconsFolder, iconsFolder, { overwrite: true });
    }
  },
])

tasks.run().catch(error => {
  console.log(error);
  fs.remove(tempIconsFolder);
});

В конце скрипта происходит запуск выполнения задач tasks.run() и обработка ошибок: если что-то пошло не так, выводим сообщение об ошибке и не забываем подчистить за собой, удалив временную папку с иконками.

Добавим в package.json алиас для запуска скрипта загрузки иконок:

"scripts": {
  "load-icons": "node scripts/icons/load-icons"
}

Теперь можно вызвать скрипт и понаблюдать за его работой:

Заключение

Таким образом, у нас получилось полностью автоматизировать добавление иконок в проект.
Скрипт будет отличаться в зависимости от проекта, структуры макетов, договоренностей с дизайнерами и т.д. Также можно заняться его оптимизацией, например добавить режим, в котором уже загруженные иконки не будут загружаться — все в ваших руках.

В следующей части мы преобразуем иконки в готовые к использованию React-компоненты, используя библиотеку SVGR и Custom template. Также мы создадим компонент SvgIcon для наделения иконок некоторым API, после чего иконки можно будет использовать следующим образом:

import { AddAlert } from 'icons'

const Example = () => {
  return <AddAlert size='large' color='warning' />
}