カスタマイズして使用できるアイコンライブラリ「Vivid.js」

アイコンはフラットの使用しやすそうなアイコンが揃ってます。

使い方は簡単でまず、ライブラリのCDNを読み込みます。

<script src="https://unpkg.com/vivid-icons@1.0.3/dist/vivid-icons.min.js" type="text/javascript"></script>

パッケージマネージャ(npm・bower)でも入手することが可能です。

npm install vivid-icons

bower install vivid-icons

あとはアイコン一覧から使用したいアイコンのコードをコピペするだけです。

<i data-vi="laptop"></i>

アイコンサイズを変更したい場合はdata-vi-sizeの属性を追加し数値を設定します。

<i data-vi="doc" data-vi-size="96"></i>

アイコンのカラーを変更したい場合はdata-vi-primarydata-vi-accentdata-vi-propの属性を追加し、それぞれのカラーを設定します。

<i data-vi="doc" data-vi-primary="#1A055D" data-vi-accent="#FF613D" data-vi-prop="#A1FFFE"></i>

現在90種類のアイコンが用意されていますが、Vivid.jsのサイトをみるとアイコンのリクエストも受け付けているようなので、今後アイコンの種類が充実することを期待しましょう。無料で使用できるSVGアイコンライブラリ「Vivid.js」の紹介でした。