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

 
90種類以上のSVGアイコンを簡単に実装できるアイコンライブラリ「Vivid.js」の紹介です。data属性を使用して、サイズ・カラーを設定できるので、サイトに合わせたアイコンを配置することができます。

Vivid.js

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

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

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

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

npm
npm install vivid-icons

bower
bower install vivid-icons


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

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


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

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


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

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


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


  • フラットな可愛らしいアバターアイコンセット「Free Cute Avatar Icon Set」
  • SVGの背景パターンを手軽に作れるジェネレーター「SVG Backgrounds」
  • シンプルなチャートを実装できるライブラリ「Frappé Charts」
  • 商用利用可能なアイコンセットを集めたサイト「IconStore」
  • 【CSS】CSSだけで作られた簡単に使えるアイコンセット
RELATED POSTS
  • Web上で差分が確認できるテキスト比較ツール「difff」
  • Web制作に役立つ素材をダウンロードできる「Freebies.ByPeople」
  • 【jQuery】レスポンシブ対応のスライダー「Glide.js」
  • 【jQuery】ジオメトリックを実装できる「particleground.js」
  • 【jQuery】プレースホルダにアニメーションを実装できる「FoxHolder」
  • 【jQuery】Google画像検索結果風のUI「Thumbnail Grid with Expanding Preview」
RECENT POSTS
  • 背景や区切り線などを簡単に装飾できるCSSライブラリ「pattern.css」
  • セクションの区切りをデザインできる「CSS Section Separator Generator」
  • 動画やアニメーションgifの背景を自動で消去してくれる「Unscreen」
  • ポップなイラストをダウンロードできる「Download 80 free illustrations」
  • hulu (フールー)で観れるおすすめの海外ドラマ・国内ドラマ【2020年3月版】
  • パーツを組み合わせてイラストを作成できる「Open Peeps」
  • 無料で使用できるポップなフリーイラスト「illlustrations」
  • 宮崎県小林市が提供するお肉のフリー素材サイト「oniku images」