Have ideas to improve npm?Join in the discussion! »

    icomoon-builder

    1.1.3 • Public • Published

    icomoon-builder

    Build Status npm npm

    Update your icons library project from the zip generated by icomoon.

    Currently working only for SASS.

    If you are developing your own icons library using the Icomoon tool and you find yourself doing the below process all the time this project might be useful for you.

    Normal process

    1. Download the zip file from icomoon.
    2. Uncompressing it.
    3. Copy pasting parts of code into your own.
    4. Moving files to the location you want.
    5. Minify the css file.

    Process with icomoon-builder

    1. Download the font from icomoon.
    2. Run icomoon-builder.

    Features

    • Uncompress the icomoon generated zip file for you.
    • Pick the location where the fonts styles will be moved.
    • Choose where to move the pre-processed and css styles separately.
    • All references between all these files will be updated accordingly.
    • Minify the distribution css with cssnano.
    • Update the font family name with the one you chose.
    • Will keep your selection.json generated by icomoon so you can resume your work.
    • And many more (below examples).

    Installation

    npm install --save-dev icomoon-builder

    Usage

    You can run it directly in your terminal with Node:

    node node_modules/.bin/icomoon-builder export <fontName> <icomoonZipFile> <preProcessorPath> <cssPath> <fontsPath> <docsPath>

    Or add it as a script in your package.json:

    "scripts"{
        "import": "icomoon-builder export"
    }

    And then run it:

    npm run import <fontName> <icomoonZipFile> <preProcessorPath> <cssPath> <fontsPath> <docsPath>

    Examples

    Export

    Considering the following files are the ones icomoon generates and compresses:

    .tmp/
    ├── demo-files
    |   ├── demo.css
    |   └── demo.js
    ├── demo.html
    ├── fonts
    |   ├── icomoon.svg
    |   ├── icomoon.ttf
    |   └── icomoon.woff
    ├── Read Me.txt
    ├── selection.json
    ├── style.css
    ├── style.scss
    └── variables.scss
    

    When running:

    cd your/path/to/fancy-icons-project/
    node node_modules/.bin/icomoon-builder export fancy-icons ~/Downloads/icomoon.zip scss css fonts docs

    We will obtain:

    target/
    ├── css
    |   ├── fancy-icons.css
    |   └── fancy-icons.min.css
    ├── docs
    |   ├── demo
    |   |   ├── index.html
    |   |   ├── scripts.js
    |   |   └── styles.css
    |   └── icomoon.json
    ├── fonts
    |   ├── fancy-icons.svg
    |   ├── fancy-icons.ttf
    |   └── fancy-icons.woff
    └── scss
        ├── fancy-icons.scss
        ├── _icons.scss
        └── _variables.scss
    

    The export command does not destroy directories so if you have more files in the destination folders they will remain the same.

    The following is the list of files copied:

    From To Operations performed
    .tmp/demo.html fancy-icons-project/docs/demo/index.html Updated references to assets
    .tmp/demo-files/demo.css fancy-icons-project/docs/demo/styles.css
    .tmp/demo-files/demo.js fancy-icons-project/docs/demo/scripts.js
    .tmp/selection.json fancy-icons-project/docs/icomoon.json Renamed to icomoon.json
    .tmp/style.css fancy-icons-project/css/fancy-icons.css Renamed to <fontName>, updated references
    fancy-icons-project/css/fancy-icons.min.css Minify the previous css
    .tmp/fonts/line-icons.woff fancy-icons-project/fonts/fancy-icons.woff Renamed to <fontName>
    .tmp/fonts/line-icons.svg fancy-icons-project/fonts/fancy-icons.svg Renamed to <fontName>
    .tmp/fonts/line-icons.ttf fancy-icons-project/fonts/fancy-icons.ttf Renamed to <fontName>
    .tmp/style.scss fancy-icons-project/scss/_icons.scss Updated references and renamed $icomoon-font-path
    .tmp/variables.scss fancy-icons-project/scss/_variables.scss
    fancy-icons-project/scss/fancy-icons.scss Imports the other two scss files. Created if does not exist before

    Clean

    Careful, this command is destructive and cannot be undone.

    Running:

    cd your/path/to/fancy-icons-project/
    node node_modules/.bin/icomoon-builder clean scss css fonts docs

    Will remove entirely the following folders:

    • your/path/to/fancy-icons-project/scss
    • your/path/to/fancy-icons-project/css
    • your/path/to/fancy-icons-project/fonts
    • your/path/to/fancy-icons-project/docs

    Todo

    • SASS
    • LESS
    • Stylus

    License

    MIT

    Authors

    Install

    npm i icomoon-builder

    DownloadsWeekly Downloads

    8

    Version

    1.1.3

    License

    MIT

    Last publish

    Collaborators

    • avatar