Icomoon Converter

Icomoon project to SASS / SVG converter.
Instant import icons into your project.

English | Русский

Features

• Export icons to SASS/SCSS file or SVG sprite
• Change the name, type and formatting of output file on the fly
• Written in TypeScript

Install

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

Run

Navigate to Icomoon folder containing selection.json file and run the command:

cd path/to/icomoon/project
icomoon-converter

After conversion the output file will be saved in the source directory.

Options

Option	Default value	Description
-n, --name	icomoon	Output file name
-f, --format	scss	Output file format (scss | sass | svg)
-i, --indent	2	Output file indent size (<number> | tab)
-t, --type	map	SASS file type (map | var)
-q, --quotes	single	SASS file quotes type (single | double)
-m, --map	icons	SASS map name

Usage

Depending on the output file format, you can use converter in two ways:

• Add icons to SASS / SCSS file as variables or maps
• Create SVG sprite for embedding in HTML

SASS (variables)

icomoon-converter -t var

To use variables import output file to your SASS project. The name of each variable corresponds to the icon code.

import 'icons';

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

SASS (map)

SASS map is generated by default if the -t option is not passed:

icomoon-converter

To work with a SASS map, in addition to importing a file, you will need to use auxiliary mixins:

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;
    }
}

You can add icons using their codes as a parameter for icomoon mixin:

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

SVG sprite

icomoon-converter -t svg

Import output file in your HTML and insert icons with following code:

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

Commands

Команда	Описание
config	Update settings
help	Display usage guide
restore	Restore settings to default
version	Print current package version

Update settings

Settings are saved locally and applied on all subsequent launches.

For settings update, run config command:

icomoon-converter config

You can restore settings to default with restore command:

icomoon-converter restore

Help

The help command displays a help section with a list of available options and commands list:

icomoon-converter help

Version

You can check installed package version with version command:

icomoon-converter version

License

The MIT License (MIT)