1000種類以上のSVGアイコンUniconsを使用できるライブラリ「vue-unicons」

vue-uniconsとは

vue-uniconsは、1000種類以上のSVGアイコン「Unicons」を使用できるコンポーネントライブラリです。

線だけのあるい、塗りのされたアイコンを指定して使用することが可能です。

環境

インストール

以下のnpm、CDNを使ってインストールします。

npm

npm i vue-unicons

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-unicons.umd.min.js"></script>

gitリポジトリは以下から取得できます。

https://github.com/antonreshetov/vue-unicons

導入手順

1. ライブラリの取り込み

（1）webpack等の場合 [注意]モジュール版は未検証です。

import Unicon from 'vue-unicons'
// アイコンデータ
import { uniLayerGroupMonochrome, uniCarWash } from 'vue-unicons/src/icons'

（2）WEBページの場合

const Unicon = window['vue-unicons'].default;

2.メソッドを設定

使用したいアイコンコンポーネントをUnicon.add に取り込みます。
今回はuniLayerGroupMonochrome、uniCarWash を使用します。
※WEBの場合はこちらの設定で行います。

使用できるコンポーネントはこちらを参照してください。

上記で取得したUniconを Vue.use に取り込みます。

Unicon.add([uniLayerGroupMonochrome, uniCarWash]);
Vue.use(Unicon);

new Vue({
  el: '#app'
});

3. テンプレートを準備

<unicon> を設置します。

name プロパティにコンポーネントのnameを設定します。

[注意] サンプルはケバブケースで記載しています。

<div id="app">
  <unicon name="car-wash" fill="limegreen"></unicon>
  <unicon name="layer-group" fill="royalblue" icon-style="monochrome"></unicon>
</div>

サンプル

>>専用ページで確認する

CDN使用時のアイコンコンポーネント取得方法

vue-unicons は、コンポーネントの出力は対応しているのですが、使用したいコンポーネントを設定する方法がありません。

なので、今回は当ブログで加工したスクリプトを こちら からダウンロードして、下記の設定を使用します。

<script src="domein/path/to/icons.umd.js"></script>
// icons 定数の中にコンポーネントが設定されています。
Unicon.add([icons.uniLayerGroupMonochrome, icons.uniCarWash]);

コンポーネントの種類

今回は1000個近く種類があるので、当ブログでご紹介しきれません・・・

下記のURLから取得できるコンポーネントを調べる事が可能です。

https://antonreshetov.github.io/vue-unicons/

さいごに

1000種類以上のSVGアイコン「Unicons」を使用できるコンポーネントライブラリでした。

1000種類も無料で使わせてくれるなんて神かと思いました。

できれば、コンポーネントのumdファイルも作成して貰えると嬉しいですねー

今日はこの辺でー