A npm-script for creating custom icon fonts and Angular 5 directives to render the icons in your Ionic 3 app.
The library has been tested with Ionic 3.9.2, @ionic/app-scripts 3.1.10 and ionic-cli 3.20.0.
Please note that Ionic is under heavy development. This library will be updated promptly if there are any modifications/updates necessary.
Take a look here to find a working example app to start right away. 🚀
- Description
- Installation
- Configuration
- Usage
- Example app
- Changelog
- Building the library
- Contribution
- License
- Acknowledgments
- Contact
The npm-script allows creating icon fonts from a given set of SVG vector images during the app's build phase. Internally the npm-script uses gulp and the awesome libraries gulp-iconfont (by Nicolas Froidure) to generate the SVG/TTF/EOT/WOFF/WOFF2 fonts.
The Angular 2 directive CustomIcon provides a convenient way to embed the previously generated icon fonts in an Ionic 2 app by simply adding a component to the HTML template. See the following example:
<custom-icon set="myIconSet" name="myIcon"></custom-icon>A set of Sass/CSS rules comes along with directive, which allows adding icons to default Ionic 2 components like buttons and list items.
Notice: Please be aware that there are serious reasons to not use icon fonts at all. See here for further discussions. But as the Ionic 2 team prefers icon fonts over other solutions, this is also the path I have chosen.
ionic2-custom-icons is available via the Node Package Manager (NPM). You can install the package with the following command:
npm install ionic2-custom-icons --save
The --save parameter is optional and saves a reference into the dependencies array in your project's package descriptor file package.json.
See CONFIGURATION docs (docs/CONFIGURATION.md)
See USAGE docs (docs/USAGE.md)
A fully working example app is provided in an independent GitHub repository: ionic2-custom-icons-example
A changelog with upgrade information is available here.
See BUILDING docs (docs/BUILDING.md)
Any contribution is highly welcome! Please send pull requests, report bugs or request new features.
This project is licensed under the MIT License. See the LICENSE.md file for details.
The project originated during the development of the mobile app for the TU Dortmund University at the IT & Medien Centrum (ITMC) who kindly allowed me to release this piece of software to the public.
Gerrit Erpenstein gerrit.erpenstein.dev@gmail.com
Note: Please use the issue tracker for bug reports or feature requests.