SVGアイコンを簡単に、サイズや色をカスタマイズして使える超軽量ライブラリ「vivid.js」

色を変えたりサイズを変えたり、SVGアイコンを簡単に使えるようにしてくれるMITライセンスのスクリプト「vivid.js」。オリジナルアイコンと比べて半分サイズの超軽量だそうです。種類も豊富で、今のところ96種類の中から選べるようになっていました。新しいアイコンのリクエストも受け付けているようなので、さらに増えていくんでしょうねemoji199.gif

  • スクリプトを読み込む
  • HTMLで配置

 

使い方はコレだけ。色やサイズの変更といったカスタマイズはカスタムデータ属性を付けるだけという簡単さ。しかも、プライマリ、アクセント、プロップの3色それぞれ好きな色に変更できるので使い勝手が良さそうだなと思いました。ただ、同じアイコンをページ内で複数使うことはできないそうです。(ごめんなさい、まだ試してません…sweat01.gif

  • サイズ: data-vi-size=”number”
  • プライマリカラー: data-vi-primary=”#hexcode”
  • アクセントカラー: data-vi-accent=”#hexcode”
  • プロップカラー: data-vi-prop=”#hexcode”

 

たとえばこんな感じ。
<i data-vi=”doc” data-vi-primary=”#FFB400″ data-vi-accent=”#070C2B” data-vi-prop=”#FFFFFF”></i>

vivid

デモはこちら→ Vivid.js

No related posts.

トラックバックURL