ion-icon-generator

This is an early, modified version of the CLI tool: icon-font-generator.

About

This tool is a fork of icon-font-generator with customizations for generating Ionic icons. It runs with NodeJS, generates fonts with webfonts-generator and integrates with your Ionic project.

Nodejs 8+ is required.

How to use from the command line

npm i -g ion-icon-generator
ion-icon-generator inputFolder/*.svg -o outputFolder

See ion-icon-generator -h for help

Copy icons.scss to src/theme and all fonts from the output folder to src/assets/fonts. Make sure your import icons.sccs in app.scss.

More info

How to integrate it to your ionic project

Prepare

Install the latest version of icon-icon-generator with $ npm install --save-dev ion-icon-generator as part of your project or install install it globally with $ npm install -g ion-icon-generator. You can run it from the command line with ion-icon-generator and see all the available build options.

Setup

1. Create an output folder for the build tool. You can ignore this.
2. Create a folder with all your .svg icons. Like resources/icons
3. Create a folder for the newly generated icon font: src/assets/fonts
4. Import the icon font in src/app/app.scss with @import "../theme/icons"
5. Make sure the standard ionicons are correctly imported in src/theme/variables.scss. Use @import "ionicons"; instead of @import "ionic.ionicons";
6. Add the npm script to package.json:

...
  "scripts": {
  ...
  "icons": "node ./node_modules/ion-icon-generator -o output resources/icons/*.svg"
},
...

Run

Just use $ npm run icons to generate your icons. If you have set up everything correctly and the build was successfull, yout should be able to use your custom icons like standard Ionicons <ion-icon name="[filename]"></ion-icon>. Since this project is in an early state expect bugs and breaking changes. Feel free to leave feedback and stay tuned.