すごい簡単！UIデザイン用のさまざまなSVGアイコンをカスタマイズして利用できるJavaScriptライブラリ -vivid.js

WebサイトやスマホアプリにぴったりなSVGアイコンを簡単に使用できるよう構築されたJavaScriptの軽量ライブラリを紹介します。

カスタマイズも非常に簡単で、HTMLのdata属性を使用して、SVGアイコンのサイズやカラーを個別に設定できます。

vivid.js
vivid.js -Github

• vivid.jsの特徴
• vivid.jsのデモ
• vivid.jsの使い方

vivid.jsの特徴

• 90種類以上のSVGアイコンが全部商用利用無料

  vivid.jsでは現在90種類以上のアイコンが利用できます。
  手作業で追加するのも可能で、リクエストも受け付けています。

• 超軽量ライブラリ

  オリジナルのSVGアイコンのちょうど半分のサイズで実装された超軽量ライブラリ。他のCSSやJavaScriptなどの依存は無しです。

• SVGアイコンは使用もカスタマイズも簡単

  アイコンはHTMLで簡単に使用でき、サイズやカラーはdata属性でカスタマイズできます。

• MITライセンス

  個人でも商用でも無料で利用できます。

SVGアイコンは全部で90種類以上、カラーやサイズは無限大！

vivid.jsのデモ

デモでは、vivid.jsで利用できるSVGアイコンを確認できます。

vivid.jsのSVGアイコンの一覧

vivid.jsの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

npm, bowerで、Vivid.JSのパッケージを入手することもできます。

Step 2: HTML

あとは、HTMLでアイコンを配置します。
※SVGなので、画像ファイルは一切不要です。

外部ファイルと上記のコードだけで、アイコンが表示されます。

Step 3: SVGアイコンのカスタマイズ

SVGアイコンのカスタマイズも簡単で、HTMLで記述するだけです。
まずは、サイズを変更してみます。

カラーの変更も簡単で、primary, accent, propを使用します。
プライマリーカラーをブルー、アクセントをイエロー、プロップをホワイトに指定。

デフォルトのSVGアイコン自体をカスタマイズした場合は、jsファイルを編集します。