https://github.com/j-panasiuk/elm-ionicons
The premium icon font for Ionic Framework. Now available in Elm!
https://github.com/j-panasiuk/elm-ionicons
elm iconset ionicons
Last synced: 3 months ago
JSON representation
The premium icon font for Ionic Framework. Now available in Elm!
- Host: GitHub
- URL: https://github.com/j-panasiuk/elm-ionicons
- Owner: j-panasiuk
- License: mit
- Created: 2017-09-24T12:18:20.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-09-25T20:05:56.000Z (over 7 years ago)
- Last Synced: 2025-10-29T06:44:49.854Z (3 months ago)
- Topics: elm, iconset, ionicons
- Language: Elm
- Homepage: http://package.elm-lang.org/packages/j-panasiuk/elm-ionicons/latest
- Size: 672 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# elm-ionicons
The premium icon pack for [Ionic Framework](http://ionicframework.com/) (check out Ionicons website [here](http://ionicons.com/))
## Demo
[Browse all icons here](https://j-panasiuk.github.io/elm-ionicons)
## Overview
Use 700+ SVG ionicons directly in your Elm views. The icons are grouped into:
* Ionicon
* Ionicon.Android
* Ionicon.Ios
* Ionicon.Social
## Installation
### Elm 0.19
```
elm install j-panasiuk/elm-ionicons
```
### Elm 0.18
```
elm package install j-panasiuk/elm-ionicons
```
## Dependencies
### Elm 0.19
- [elm/svg](https://package.elm-lang.org/packages/elm/svg/latest/)
### Elm 0.18
- [elm-lang/svg](https://package.elm-lang.org/packages/elm-lang/svg/latest)
## Example use
Each icon expects size (width and height in pixels) and a color
### Elm 0.19
```elm
import Html exposing (Html, div)
import Ionicon
import Ionicon.Android as Android
main : Html msg
main =
div []
[ Ionicon.alert 32 red
, Android.alarmClock 32 blueish
]
-- Define your colors
red : RGBA
red =
RGBA 1 0 0 1
blueish : RGBA
blueish =
RGBA 0 0 1 0.5
-- Now that `Color` module is gone from core
-- we just represent color as a record with
-- Float values in 0-1 range
type alias RGBA =
{ red : Float
, green : Float
, blue : Float
, alpha : Float
}
```
### Elm 0.19 + elm-ui
Here is an example how icons could be used as an elm-ui elements
```elm
import Element exposing (Element, el, html)
import Ionicon.Social as Social
type alias RGBA =
{ red : Float
, green : Float
, blue : Float
, alpha : Float
}
type alias Icon msg =
Int -> RGBA -> Html msg
viewIcon : Icon msg -> Int -> RGBA -> Element msg
viewIcon icon size color =
el [ centerX, centerY ] <| html <| icon size color
viewLargeGitHubIcon : RGBA -> Element msg
viewLargeGitHubIcon color =
viewIcon Social.github 80 color
```
### Elm 0.18
```elm
import Html exposing (Html, div)
import Color exposing (Color)
import Ionicon
import Ionicon.Android as Android
main : Html msg
main =
div []
[ Ionicon.alert 32 red
, Android.alarmClock 32 blueish
]
-- Define your colors
red : Color
red =
Color.rgb 255 0 0
blueish : Color
blueish =
Color.rgba 0 0 255 0.5
```
### Note: SVG icons vs Font icons
You can also use iconicons as a web font by including a css stylesheet, like [link](here).
```html
```
When minified and gzipped these icons weight around 8kB
Before Elm 0.19, using any number of icons from this package meant that code for all 700+ of them was included in your bundle. With 0.19 dead code elimination (`elm make --optimize`) only the icons that are actually used by your project will be included.
Comparing the two approaches, using a stylesheet is a bit more lightweight and doesn't require adding any elm dependencies. On the other hand with this package you don't rely on external css files from CDN. Also you can use all icons as plain old elm functions and forget about css classes (this is particularly nice if you use [mdgriffith/elm-ui](https://github.com/mdgriffith/elm-ui))
## License
MIT
## Thanks
As always, I would like to thank my Mom! :)