なんかもう色々すごいことになってるiconicを試してみる

確か少し前まではWeFontのアイコンを提供していた（と思う）iconicが、いつの間にか色々と凄いことになっていたので触ってみる

iconic
https://useiconic.com/

とても似てますが、ionicではないです。
ionicも綺麗だけどね！！

本題のiconicですが、アイコンを提供しているという点については変わっていないです。

そのアイコンの1例がこちら

作りは細かいですが、そこまで驚くような感じではないですね。

だた、上記3つのアイコンは、すべて同じSVGを表示している訳ですがサイズが一番小さいアイコンについては、若干見た目が変わっているのにお気づきでしょうか。

iconicはアイコンのスタイリングが可能

になっちゃってるようです･･･
具体的に何が出来るかというと、上記例のアイコンの一部を装飾してみます

※ 用意されたJS／CSSの2ファイルほど読み込む必要はあります

どうですか？
スマートフォンのメニュー部分のアイコンの色が変わりましたね。

こんな感じで、もうただのアイコンではなくカスタマイズ可能なアイコンになっちゃってるみたいです。

上記サンプルのHTML／CSS

HTML

<img class="iconic iconic-sm" data-src="svg/smart/nexus.svg">
<img class="iconic iconic-md" data-src="svg/smart/nexus.svg">
<img class="iconic iconic-lg" data-src="svg/smart/nexus.svg">

CSS

.iconic-nexus-body {
    fill: #232323;
}
.iconic-nexus-button {
    fill: #F7007B;
}

たったこんだけです。
アイコンに対して指定できるクラスとかは公式サイトに一覧が載ってます。

今回サンプルで利用しているアイコンの指定class一覧
https://useiconic.com/icons/nexus/

カスタマイズ出来るのは色だけでは無い

恐ろしいことにスタイリングに加え、アイコンに対して追加の要素を突っ込むなんてことも出来るようです･･･

今回のサンプルで言うと、スマートフォンの画面に画像を当て込むということが出来ます。

こんな感じに（当て込んでるのは先日乗っ取られたLINEの画面）

iconicさんマジパネェっす･･･

実装自体も用意されたdataプロパティに画面に利用したいパスを設定するだけです。

HTML（CSSは変更無）

<img class="iconic iconic-sm" data-src="svg/smart/nexus.svg" data-screenshot="/upload/2014/08/01/20140801130139.jpg">
<img class="iconic iconic-md" data-src="svg/smart/nexus.svg" data-screenshot="/upload/2014/08/01/20140801130139.jpg">
<img class="iconic iconic-lg" data-src="svg/smart/nexus.svg" data-screenshot="/upload/2014/08/01/20140801130139.jpg">

すごい（確信）

iconicさんとっても凄いのですが、残念ながら有料です。
お試しで、2つのアイコンを使えるみたいですが･･･

あと、非対応のものについては代替のpngだったりWebFontのアイコンで置き換えてくれるようにはなってるみたいです（多分）