Система иконок на React

Очень часто при разработке React-приложения нам приходится работать с большим количеством иконок в проекте. Наверное, каждый разработчик стремится максимально упростить и автоматизировать подобные рутинные задачи. Есть несколько способов работы с иконками в веб-приложениях, но я хочу поделиться с вами именно тем, который кажется мне наиболее удобным. Данная статья поможет frontend-разработчику сделать работу с иконками комфортнее, используя их в качестве React-компонентов.

Для чего это нужно?

Наши иконки будут встраиваться напрямую в HTML-разметку в виде svg-элементов, что позволит в свою очередь взаимодействовать с их атрибутами и стилями. Также все иконки будут импортироваться из одного компонента, тем самым сохранив наши импорты в чистоте и порядке.

Как это реализовать?

Для того, чтобы развернуть подобную систему иконок, нам потребуется использовать пакет SVGR, который как раз и отвечает за основное преобразование svg-иконки в react-компонент.

Шаг 1

Первым шагом в проекте необходимо создать папку, где у нас будут храниться исходные svg-иконки, например src/assets/icons.

Шаг 2

Устанавливаем SVGR согласно официальной документации, либо копируем эту строчку в командную строку:

npm install --save-dev @svgr/cli

Шаг 3

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

// svgr.config.js

const path = require('path');
const outDir = './src/ui/icons'; // путь, до папки, где будут храниться преобразованные иконки

// Шаблон компонента с иконкой
const iconTemplate = (variables, { tpl }) => tpl`
${variables.imports};

${variables.interfaces};

const ${variables.componentName} = (${variables.props}) => (
  ${variables.jsx}
);
 
${variables.exports};
`;


// Шаблон файла index.js, который будет экспортировать все сгенерированные компоненты иконок
function indexTemplate(files) {
  const compoundExportEntries = [];

  const importEntries = files.map(file => {
    const componentName = path.basename(file.path, path.extname(file.path));
    compoundExportEntries.push(componentName);

    return `import { default as ${componentName} } from './${componentName}';`;
  });

  return `${importEntries.join('\n')}

    export const Icons = {
      ${compoundExportEntries.join(',\n  ')}
    };
  `;
}

// Базовая настройка конфига
module.exports = {
  outDir,
  icon: true,
  typescript: false,
  replaceAttrValues: {
    '#000': 'currentColor',
  },
  indexTemplate,
  template: iconTemplate,
};

Шаг 4

Всё, что осталось сделать — это обновить список npm-команд. Нам нужно добавить новую команду, которая будет запускать SVGR-преобразование, например npm run icons. Для удобства добавим выполнение этой команды каждый раз, когда мы собираем билд или запускаем наш проект, чтобы на этих этапах у нас всегда были актуальные компоненты иконок.

// package.json
...
"icons": "svgr ./src/assets/icons",
"dev": "npm run icons && webpack serve",
"build": "npm run icons && webpack --config somebuild.webpack.js"

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

Заключение

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