Создание иконок

EUI предоставляет постоянно растущий набор [иконок][icons], но наш набор может быть неполным. Если вы обнаружите, что вам нужна иконка, которой не существует, создайте новую задачу и пометьте её меткой icons. Дизайнер из команды EUI ответит, чтобы обсудить ваши потребности.

Если вы готовы и способны создать иконку самостоятельно, этот документ описывает рекомендации по созданию новой иконки, очистке SVG и добавлению её в EUI. Хотя дизайнеры из команды EUI доступны для помощи, мы очень ценим ваш вклад и пул-реквесты.

Если вы прочитаете эти рекомендации или начнёте создавать свою иконку и поймёте, что это слишком сложно, то создайте задачу в этом репозитории и запросите помощь. Член команды EUI ответит и обсудит варианты.

Примечание: компонент EuiIcon принимает внешние ссылки на файлы иконок, поэтому у вас есть возможность сохранить иконку в своём приложении.

Создайте иконку

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

Содержание

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

Поиск и обмен примерами иконок — отличный способ начать работу, если вы не уверены в общей форме. Разместите эти примеры в своей задаче, и мы предоставим обратную связь.

Наконец, мы оставляем за собой право отклонить любые иконки, которые не соответствуют стилю EUI или могут быть сочтены неуместными.

Стиль

Здесь всё становится более субъективным. Чтобы поддерживать согласованный высококачественный набор иконок, мы требуем, чтобы все новые глифы соответствовали следующим рекомендациям:

— Используйте стиль контура с толщиной линии 1 пиксель, прямыми краями, закруглёнными углами и концами. — Придерживайтесь общей формы квадрата размером 16 пикселей.

— Расположите глиф по центру квадрата, оставив область обрезки в 1 или 2 пикселя, где это возможно. — Выровняйте вертикальные и горизонтальные пути по сетке 16x16 пикселей.

Для пользователей Sketch

В качестве справки вы можете загрузить и просмотреть файл icons.sketch через ссылку Sketch libraries на сайте документации EUI. Страница Symbols в этом файле содержит монтажные области для подавляющего большинства глифов EUI.

Для тех, кто не использует Sketch

Хотя мы используем Sketch для ведения нашей внутренней библиотеки дизайна, вы можете использовать любой инструмент проектирования для создания файла SVG.

Добавьте иконку в репозиторий EUI

После того как вы создали свою новую иконку, последним шагом будет добавление её в репозиторий EUI.

Очистите SVG

EUI поддерживает только форматы иконок SVG. После экспорта вашей иконки в формате SVG из вашего инструмента проектирования откройте её в редакторе кода или текста и удалите все ненужные элементы и атрибуты, такие как: — <def>...</def> — <use>...</use> — id: <value> — fill: <value> — fill-rule: <value> или fillRule: <value>.

Примечание: пользователи Sketch могут использовать плагин [SVGO][sketch-SVGO-plugin], чтобы удалить любой лишний код, добавленный Sketch. После установки этот плагин будет запускаться автоматически при каждом экспорте SVG из Sketch.

Подготовьте пул-реквест

Создайте новую ветку функций для этого репозитория и внесите следующие изменения:

• Добавьте свой глиф в компонент EuiIcon. — Добавьте файл SVG в папку /src/components/icon/assets. — Добавьте ссылку в файл /src/components/icon/icon.tsx (в алфавитном порядке).

• Отобразите иконку в документации. — Добавьте имя иконки в /src-docs/src/views/icon/icons.js *.

• Скомпилируйте и протестируйте. — Запустите yarn compile-icons. — Просмотрите свою иконку локально по адресу http://localhost:8030/#/display/icons **. — Переключите документацию в тёмный режим и убедитесь, что иконка отображается.