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.
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
.
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.
- Create an output folder for the build tool. You can ignore this.
- Create a folder with all your .svg icons. Like
resources/icons
- Create a folder for the newly generated icon font:
src/assets/fonts
- Import the icon font in
src/app/app.scss
with@import "../theme/icons"
- Make sure the standard ionicons are correctly imported in
src/theme/variables.scss
. Use@import "ionicons";
instead of@import "ionic.ionicons";
- Add the npm script to
package.json
:
...
"scripts": {
...
"icons": "node ./node_modules/ion-icon-generator -o output resources/icons/*.svg"
},
...
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.