Icomoon Converter

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

English | Русский

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

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

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.

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

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 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) {
    // ...
  }
}

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>

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

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

icomoon-converter help

You can check installed package version with version command:

icomoon-converter version

The MIT License (MIT)