アニメーションするSVGアイコンが使えるようになるJavaScriptライブラリ「Titanic」

アニメーションするSVGアイコンが使えるようになるJavaScriptライブラリ「Titanic」

アニメーションするSVGアイコンが使えるようになるJavaScriptライブラリ「Titanic」

Titanicは、スクリプトを読み込んで要素にクラスを追加するだけで、アニメーションするSVGアイコンが使えるようになるライブラリです。

挙動については、以下デモページで確認できます。(Previewのところです)

デモページを見る

Titanicの使い方

HTMLの<head>~</head>内に以下を追加して、スクリプトを読み込みます。


<script src="https://cdn.rawgit.com/icons8/titanic/master/dist/js/titanic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.5.9/bodymovin.min.js"></script>

GitHubからダウンロードして利用することもできます。

続いて、</body>の直前に以下を追記します。


<script>
  var titanic = new Titanic();
</script>

GitHubからダウンロードしたファイルを自サーバーに設置して利用する場合は、iconsフォルダを指定してあげます。


<script>
  var titanic = new Titanic('http://yourdomain.com/icons/');
</script>

最後に、要素にクラスを追加すれば、アニメーションするSVGアイコンが表示されます。

<div class='titanic titanic_chat'></div>

指定できるクラスは以下の通りです。

  • caps
  • chat
  • checkbox
  • expand
  • cheap
  • expensive
  • idea
  • mailbox
  • mic
  • no-mic
  • online
  • pause
  • power
  • shopping
  • smile
  • stop
  • unlock
  • zoom

あとがき

アニメーションに対応したSVGアイコンが簡単に実装できて便利ですね。

SVGアイコンなので、CSSで好きなようにスタイルを変更できます。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です