https://github.com/antonshevchenko/ionic-contrib-icon

Automatically display platform-specific icons.
https://github.com/antonshevchenko/ionic-contrib-icon

Last synced: 17 days ago
JSON representation

Automatically display platform-specific icons.

• Host: GitHub
• URL: https://github.com/antonshevchenko/ionic-contrib-icon
• Owner: antonshevchenko
• License: mit
• Created: 2014-12-06T22:21:23.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2015-08-23T05:28:29.000Z (almost 9 years ago)
• Last Synced: 2024-02-27T07:43:05.841Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 187 KB
• Stars: 35
• Watchers: 4
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• awesome-ionic - antonshevchenko/ionic-contrib-icon

README

        
ionic-contrib-icon

==================

_Automatically display platform-specific icons._

## Install

First install the dependency using either Bower or NPM.

### Bower

```shell

$ bower install ionic-contrib-icon

```

### NPM

```shell

$ npm install ionic-contrib-icon

```

Include the `ionic.contrib.icon` module in your app's dependencies:

```javascript

angular.module('app', ['ionic', 'ionic.contrib.icon'])

```

Use the `icon` directive:

```html

```

## Advanced Usage

### Integration with Other Icon Libraries

You can make use of other popular icon libraries such as [Font Awesome](https://fortawesome.github.io/Font-Awesome/) by defining the `type` option in the `$ionicIconConfig` constant:

```javascript

app.constant('$ionicIconConfig', {

    type: 'fa'

});

```

_* Note: The icon type corresponds to the appropriate library's icon CSS class. For Font Awesome, it is `fa`, while for Ionicons it is `icon`._

### Define Icon Mappings

You can map default icons for each platform by defining the `map` option in the `$ionicIconConfig` constant. For instance, you can map the corresponding iOS and Android icon alternatives for the default `ion-heart` Ionicon:

```javascript

app.constant('$ionicIconConfig', {

    type: 'icon',

    map: {

        'ion-heart': {

            ios: 'ion-ios-heart',

            android: 'ion-android-favorite'

        }

    }

})

```

And then simply use the icon directive without having to add the `ios` and `android` attributes:

```html

```

### Special Cases

For any special cases, we support adding custom classes for specific icons by providing the `class` attribute:

```html

```

The directive also overrides any defaults when you explictly define icons for specific platforms.

## Releases

- 0.0.3 __(12/07/14)__:

    - Addition of iPad and Windows Phone platforms

- 0.0.2 __(12/06/14)__:

    - Added support for other icon libraries (such as Font Awesome)

    - Added `$ionicIconConfig` constant to pass options

    - Can use icon mapping to define which icons get displayed by default for each platform

    - Minor bug fixes

- 0.0.1 __(12/06/14)__:

    - Initial implementation of `icon` directive