こんばんは！毎度毎度ではありますが、久しぶりの投稿です。
今回はちょっと気になったvivid.jsなるものをテストしてみました！

vivid.jsとは

vivid.js公式ページを見れば早いといえば早いのですが、
jsを読み込むだけでvivid.jsが用意してくれているsvgアイコンが使えるというものです！
Font Awesomeの数少ない版みたいな感じですね！

何故気になったのか

以前にsvgスプライトのお話をしたのですが、
あれから約1年。。。意外や意外にsvgスプライト全く使わない。。。

■使わない理由

  • サイトごとに使うアイコンが違うので毎回設定するのが面倒
  • IDでつけた名前が覚えられない
  • 効率が逆に落ちている気がした

といった感じで、結局使いませんでした。。。
そこでふと目にしたvivid.js！！
Font Awesomeの方が数も多いし良いんじゃね？という意見もあると思うのですが、Font Awesomeよりシンプルながら、必要最低限を抑えている感じがして魅力的でした！！

vivid.jsの使い方

いたって簡単です！！まずは下記jsを読み込む！！

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

そしてアイコンを使いたい所に、以下のように利用する！！

<i data-vi="arrow-top"></i>

これだけ。。。これだけです。
アイコン一覧はこちら

ちなみにnpmも対応していました。

npm install -D vivid-icons

ボクはこれを機にと思い、webpackも導入してみました！！(今更)

サイズや色の変更もdata属性で行っているようです。

// サイズの変更
data-vi-size="100"

// メインカラーの変更
data-vi-primary="#000"

// アクセントカラーの変更
data-vi-accent="#f00"

// 何か分からないがどこかのカラー変更
data-vi-prop="#fff"

vivid.jsのデメリット

さて、シンプルでよく使用するアイコンが揃うに揃っているvivid.jsですが、デメリットもあります。

■考えうるデメリット

  • 色が何故かメインとアクセントで分かれており、単色にするのに2つdata属性がいる
  • cssで変更する場合は!importantじゃないと反応しない

特に2つ目が悩みポイントかなぁと思っており、
要素にホバーした時に色を変更したかったら以下のような書き方になってしまいます。。。

p:hover svg path,
p:hover svg rect{
  fill: #fff !important;
}

個人的にimportant嫌いなので、出来れば使いたくない。。。
が、しかしそこさえ目を瞑れば大丈夫かなぁと感じました！！

一度案件で使ってみても良いかなぁと思ったので、シンプルに使えるsvgライブラリをお探しの方は試してみては！？

以上、vivid.jsのご紹介でしたっ！
ありがとうございました！！