Skip to content

kaspersky-hexa-ui-icons

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

kaspersky-hexa-ui-icons

README.md

Hexa UI Icons

Пак из 1800+ React иконок.

Иконки собраны на основе svg пака из Figma, поддерживаемого в актуальном состоянии командой дизайнеров DRO. Иконки представлены в размерах: 8, 12, 16, 24, 32, 40, 48.

Установка в проект

npm install @kaspersky/hexa-ui-icons

Использование в проекте

import { ArrowDown } from '@kaspersky/hexa-ui-icons/8'
import { Bullet } from '@kaspersky/hexa-ui-icons/12'
import { AccountLogin, Like } from '@kaspersky/hexa-ui-icons/24'
 
function Icons() {
  return (
    <>
      <ArrowDown />
      <Bullet color="red" />
      <Like color="blue" testId="like-icon" />
    </>
  )
}

Props:

Name Type Default
className string -
color string 'currentColor'
style CSSProperties -
testId string -

Обновление иконок

  1. Скачиваем актуальный пак svg иконок из Figma с группировкой по размерам (слой Icons)
  • Не выделяя листов или иконок, нажимаем в сайдбаре справа на кнопку Export

В последнее время без выделения всех иконок фигма ведет себя некорректно и экспортирует не все иконки, настоятельно рекомендуем выделять мышкой

  • В пункте Export нажимаем на +
  • В раскрывшимся меню выбираем формат иконок SVG
  • Нажимаем на три точки (дополнительные настройки) и выключаем галочки "Outline text" и "Simplify stroke"
  • Нажимаем кнопку Export {n} layers
  • Распаковываем скачанный архив - в нем будут все иконки, сгруппированные в папки по размерам. В процессе экспорта могут добавиться лишние иконки и артефакты вне папок с размерами - их можно удалить, чтобы не смущали.
  • Иконки флагов при необходимости экспортируем аналогично отсюда
  1. Копируем svg иконки в папку src/iconsSources (если такой папки нет - нужно создать вручную), убедившись, что в названиях папок с svg иконками нет лишних пробелов (например, не должно быть '16 '). Если при копировании окажется, что существует несколько иконок с одинаковыми названиями, нужно проследить за тем, чтобы названия дубликатов содержали цифры строго начиная с единицы ('Icon', 'Icon 1', 'Icon 2' вместо 'Icon' и 'Icon 2', 'Icon 3')
  2. Устанавливаем зависимости npm i, если еще не делали этого.
  3. Запускаем скрипт для трансформации svg иконок в React компоненты: npm run icons:create
  4. В папке iconsSVGs должны появится svg файлы с правильными именами, остальные этапы сборки происходят в PR. Можно запустить сторибук npm run storybook и проверить на паре новых иконок, что они корректно добавились в библиотеку.
  5. Добавить запись в ChangeLog (src/stories/ChangeLog.mdx) по примеру уже сделанных записей
  6. Добавляем все файлы в коммит(папка iconsSVGs, types/index.tsx и src/stories/ChangeLog.mdx)
  7. Создаём PR и вливаем в мастер. Новая версия пакета иконок опубликуется автоматически

Доработка пакета

Установите зависимости

npm i

Пакет выполняет три операции последовательно:

    1. Копирование иконок из папки src/iconsSources в src/iconsSVGs, выравнивая размер иконки и имя иконки необходима папка src/iconsSources с папкой размера и иконкой npm run icons:prepare
    1. Создание tsx файлов из исходников иконок лежащих в папке src/iconsSVGs npm run icons:transform
    1. Создание сборки cjs и esm из файлов tsx необходимы файлы tsx в папках src/[size]/.tsx npm run icons:rollup
  • Есть так же обновления индекса, нужно для обновления типов npm run icons:updateImports

Package.json

  • "iconsArtifacts:clean": удаление разультатов сборки rollup
  • "icons:clean": удаление автогенерированных файлов библиотекой svgr
  • "icons:prepare": подготовка исходников svg файлов, переименование и копирование из папки src/iconsSources в src/iconsSVGs
  • "icons:transform": запуск трансформации svg иконок в компоненты react, запуск svgr
  • "icons:updateImports": обновление импортов для сборки
  • "icons:create": генерация файлов с помощью svgr
  • "icons:build": полная сборка пакета с удалением всех генерируемых файлов

Сборка пакета

Для полной сборки пакета

npm run build

В таком случае прогоняется весь цикл от Копирование иконок из папки src/iconsSources до сборки cjs и esm. Для запуска необходима папка src/iconsSources с файлами в ней

SVGR

Hexa UI Icons использует SVRG cli (https://react-svgr.com/) для трансформации svg иконок из Figma в React компоненты.

SVGR генерирует React компонент с svg иконкой при помощи Babel шаблона templateIcons.js и форматирует код с помощью Prettier. На выходе мы получаем готовый компонент.

Ресурсы