Webサイトにはアイコンが付き物ですよね。しかしフラットUIが流行とあって、アイコンも派手なものではなく単色でシンプルなものが好まれるようになっています。例えばWeb Fontを使ったアイコンです。 Web Fontを使った場合、カラーリングやサイズの自由が大きいですが、向きを変えたりアニメーションさせたりするのは難しいでしょう。そこで使ってみたいのがMarkaです。

Markaの使い方

MarkaはJavaScriptを使って制御できるアイコンです。

var m = new Marka('#icon');
m.set('circle')
    .color('#FF6600')
    .size('50');

こんな感じでアイコンを指定します。四角いアイコンにする場合は、

var m = new Marka('#icon');
m.set('square')
    .color('#FF6600')
    .size('50');

のように指定します。色やサイズの他、角度も指定できます。

var m = new Marka('#icon');
m.set('arrow').rotate('left');

// or down
m.rotate('down');

// or right
m.rotate('right');

// or up again
m.rotate('up');

アイコンの種類は色々です。

サークル系は使い勝手が良さそう。

アプリケーションで良くありそうな形。

ナビゲーション。

面白いのは回転させたり、アイコンを変更する際にアニメーションが自動で行われるということです。例えばソートする場合に上三角から下三角にするアニメーションが自動でされるといった感じです。大きさも自由なので、色々な使い方が考えられそうです。なお、MarkaはSVGやCanvasではなく、DOMでアイコンを描いています。

MarkaはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

Marka - Beautiful transformable icons fians/marka