README.ru-RU.md

Icomoon Converter

Конвертер проекта Icomoon в SASS / SVG файл.
Мгновенный импорт иконок в ваш проект.

English | Русский

Преимущества

• Экспорт иконок в SASS / SCSS либо встраиваемый SVG файл
• Опции позволяют на лету задавать название, тип и форматирование выходного файла
• Написан на TypeScript

Установка

npm i digikid/icomoon-converter --global --install-links

Запуск

Перейдите в папку с проектом Icomoon, содержащую файл selection.json и запустите команду:

cd path/to/icomoon/project
icomoon-converter

После конвертации выходной файл будет сохранен в исходной директории.

Параметры

Параметр	По умолчанию	Описание
-n, --name	icomoon	Название файла
-f, --format	scss	Формат файла (scss | sass | svg)
-i, --indent	2	Размер отступа (<number> | tab)
-t, --type	map	Тип SASS файла (map | var)
-q, --quotes	single	Тип кавычек в SASS файле (single | double)
-m, --map	icons	Имя SASS-карты

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

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

• Добавить иконки в SASS / SCSS файл в виде переменных или карты
• Создать SVG-спрайт для последующего встраивания в HTML

SASS переменные

icomoon-converter -t var

Для использования переменных импортируйте полученный файл в свой SASS проект. Название каждой переменной соответствует коду иконки.

import 'icons';

.awesome-icon {
  content: $awesome-icon;
  // ...
}

SASS карта (map)

SASS карта генерируется по умолчанию, если параметр -t не передан:

icomoon-converter

Для работы с SASS картой помимо импорта файла вам потребуется использовать вспомогательные миксины:

import 'icons';

$icomoon-font-family: 'icomoon';

@mixin icomoon-base {
    font-family: $icomoon-font-family !important;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-transform: none;
    text-rendering: auto;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@mixin icomoon($icon, $position: before, $replace: false) {
    @if $replace {
        font-size: 0;
    }

    &:#{$position} {
        content: map-get($icons, $icon);

        @include icomoon-base();

        @if $replace {
            font-size: 1rem;
        }

        @content;
    }
}

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

.awesome-icon {
  @include icomoon(awesome-icon) {
    // ...
  }
}

SVG-спрайт

icomoon-converter -t svg

Импортируйте файл в HTML и вставляйте иконки через добавление следующего кода:

<svg class="awesome-icon">
    <use xlink:href="#awesome-icon"></use>
</svg>

Команды

Команда	Описание
config	Изменить настройки
help	Показать раздел справки
restore	Восстановить настройки по умолчанию
version	Показать текущую версию

Изменение настроек

Настройки сохраняются локально и применяются при всех последующих запусках.

Чтобы изменить их, запустите команду config:

icomoon-converter config

Для того чтобы сбросить настройки до значений по умолчанию, воспользуйтесь командой restore:

icomoon-converter restore

Раздел справки

Команда help отображает справочный раздел со списком доступных параметров и команд:

icomoon-converter help

Текущая версия

Для просмотра текущей версии установленного пакета запустите команду version:

icomoon-converter version

Лицензия

The MIT License (MIT)