ウェブアプリ

色を簡単にカスタマイズして使用できる無料アイコンライブラリ「vivid.js」



vivid.jsはSVG形式のアイコンを簡単にカスタマイズして使用できるようにするJavaScriptのライブラリです。

SVG Icons Library - Vivid.js
https://webkul.github.io/vivid/

使用は非常に簡単で、アイコンを使いたいページのヘッダー部分に

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

と記入するだけで準備完了。

インストールにはヘッダーにコードを貼り付ける方法のほか、パッケージマネージャーも使用できます。

npmを使用している場合は

npm install vivid-icons

Bowerを使用している場合は

bower install vivid-icons

でインストールできます。

アイコンを使いたい場合は、実際にアイコンを配置したい場所に以下の形式のコードを貼り付ければOKです。

<i data-vi="アイコンの名前"></i>


例えば

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

というコードを貼り付けると、以下のようにTシャツのアイコンが表示されます。


また、i要素(element)のデータ属性(data attribute)に「data-vi-size="○○"」と加えることでサイズを変更できます。例えば

<i data-vi="layers" data-vi-size="300"></i>

のようにサイズを300にすると以下のように大きく表示されます。


vivid.jsによって追加されるアイコンは最大3つのカラーで成り立っており、それぞれのカラーを自由に調整できます。サイズのカスタマイズと同様に、「data-vi-primary="#FFFFFF"」「data-vi-accent="#CCCCCC"」「data-vi-prop="#888888"」のようなデータ属性を使用して調整します。この#○○という形式の文字列はhexcodeと呼ばれる色を指定するためのコードで、「HTMLカラーチャート」などのサイトで必要なコードを入手できます。

色の調整を行う場合は、コードを以下のように記述します。

<i data-vi="doc" data-vi-primary="#0000FF" data-vi-accent="#FFFF00" data-vi-prop="#FFFFFF"></i>

このコードで表示されるアイコンはこんな感じ。


アイコンの数自体は全部で96個ですが、さまざまな色に調整できるのでサイトの雰囲気に合わせやすく、実用性が高いライブラリとなっていました。ただし、同じアイコンはページ内で1回しか使用できないようです。なお、アイコン一覧は以下のページより確認できます。

Cheatsheet - SVG Icons Library - Vivid.js
https://webkul.github.io/vivid/cheatsheet.html

・関連記事
無料で商用利用可能でクレジット表示も不要なアイコンをまとめた「IconStore」 - GIGAZINE

無料で商用利用も可能なシンプルなデザインのアイコンセット「Feather」 - GIGAZINE

無料で3万7000種類以上のアイコンが商用利用できる「iconscout」 - GIGAZINE

260種類以上のアイコンが無料で商用利用OK、CSSツールキットも付属したアイコンフォント「Fontisto」 - GIGAZINE

無料で使えるオープンソースの200種類以上あるSVG形式アイコンセット「Clarity Icons」 - GIGAZINE

in ネットサービス,   ウェブアプリ, Posted by log1d_ts