色を変えたりサイズを変えたり、SVGアイコンを簡単に使えるようにしてくれるMITライセンスのスクリプト「vivid.js」。オリジナルアイコンと比べて半分サイズの超軽量だそうです。種類も豊富で、今のところ96種類の中から選べるようになっていました。新しいアイコンのリクエストも受け付けているようなので、さらに増えていくんでしょうね
- スクリプトを読み込む
- HTMLで配置
使い方はコレだけ。色やサイズの変更といったカスタマイズはカスタムデータ属性を付けるだけという簡単さ。しかも、プライマリ、アクセント、プロップの3色それぞれ好きな色に変更できるので使い勝手が良さそうだなと思いました。ただ、同じアイコンをページ内で複数使うことはできないそうです。（ごめんなさい、まだ試してません…
）
- サイズ： 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.js
