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で好きなようにスタイルを変更できます。