Evotor icons

Библиотека иконок для Evotor.

🔗 Онлайн галерея: evotor.github.io/evo-icons

Установка

npm install @evotor-dev/evo-icons

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

Настройка assets в angular.json

{
  "assets": [
    {
      "glob": "**/*",
      "input": "./node_modules/@evotor-dev/evo-icons/dist/monochrome",
      "output": "./assets/ui-kit/icons"
    },
    {
      "glob": "**/*",
      "input": "./node_modules/@evotor-dev/evo-icons/dist/color",
      "output": "./assets/ui-kit/color-icons"
    }
  ]
}

Разработка

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

npm ci

Добавление иконки

Монохромная иконка

1. Положите файл в src/monochrome/<Категория>/<Name>.svg. Существующие категории: Navigation, Category, Header, Objects, System, Info, Emotions, Side Menu. Новую категорию можно завести, просто создав папку.

2. Требования к SVG:

   • размер 24×24, viewBox="0 0 24 24": обёртка <svg> при сборке отбрасывается вместе с viewBox, и иконка не в сетке отрендерится не в размер соседних;
   • атрибуты fill вырезаются автоматически, чтобы иконка красилась через currentColor, поэтому их можно оставить как есть;
   • stroke вырезать нечем: иконка с обводкой останется чёрной, обводку нужно перевести в заливку;
   • id (маски и clipPath из Figma) должны быть уникальны по всей библиотеке: иконки инлайнятся в одну страницу, и совпавший id ломает рендер обеих.

3. Требования к имени файла:

   • только латиница, кириллица в имени файла или папки роняет сборку;
   • имя должно быть уникальным по всей монохромной библиотеке, а не только внутри своей категории, иначе сборка падает с ошибкой;
   • пробелы и _ заменяются на -, имя приводится к нижнему регистру, суффикс _24px отбрасывается: Alert Circle.svg → alert-circle, Chart_24px.svg → chart.

Цветная иконка

Положите файл в src/color/<Name>.svg, плоско, без папок-категорий. Обычный размер 48×48. Содержимое копируется в dist как есть, цвета сохраняются. Правила именования те же, что и для монохромных иконок.

Проверка и отправка

Прогоните линтер и сборку локально:

npm run lint
npm run build
npm run build:gallery

npm run lint проверяет то, что иначе ломается молча или уже после публикации: кириллицу в путях, дубли имён, сетку 24×24, stroke вместо заливки и совпадающие id. Те же проверки стоят в CI и обязательны для мержа.

Галерею можно посмотреть, открыв gallery/index.html в браузере после npm run build:gallery.

Изменения приезжают в main только через pull request и только squash-мержем. Заголовок pull request оформляйте по Conventional Commits: он становится сообщением squash-коммита, а по нему semantic-release считает версию.

| Заголовок | Что будет с версией | | --- | --- | | feat: add CRM point icon | минорная, 1.1.0 → 1.2.0 | | fix: scale Login icon to the 24 grid | патч, 1.1.0 → 1.1.1 | | feat!: drop v5 contract | мажорная, 1.1.0 → 2.0.0 | | docs: ..., ci: ..., chore: ... | версия не меняется, релиза не будет |

Заголовок проверяет workflow "✅ PR title", так что неверный формат виден до мержа, а не после неудачного релиза.

Сборка иконок

npm run build

Сборка галереи

npm run build:gallery

Публикация

Публикация не автоматическая: после мержа в main нужно вручную запустить workflow "🚀 Release" в GitHub Actions. Он выполняет:

npm run release