ion-icon-generator v1.1.1

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.