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

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

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

サイトのキャプチャ

vivid.js
vivid.js -Github

vivid.jsの特徴

vivid.jsの特徴
  • 90種類以上のSVGアイコンが全部商用利用無料
    vivid.jsでは現在90種類以上のアイコンが利用できます。
    手作業で追加するのも可能で、リクエストも受け付けています。
  • 超軽量ライブラリ
    オリジナルのSVGアイコンのちょうど半分のサイズで実装された超軽量ライブラリ。他のCSSやJavaScriptなどの依存は無しです。
  • SVGアイコンは使用もカスタマイズも簡単
    アイコンはHTMLで簡単に使用でき、サイズやカラーはdata属性でカスタマイズできます。
  • MITライセンス
    個人でも商用でも無料で利用できます。
vivid.jsの特徴

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

vivid.jsのデモ

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

vivid.jsのデモ

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ファイルを編集します。

sponsors

top of page

©2018 coliss