目次
vue-uniconsとは
vue-uniconsは、1000種類以上のSVGアイコン「Unicons」を使用できるコンポーネントライブラリです。
線だけのあるい、塗りのされたアイコンを指定して使用することが可能です。
環境
| Vue | 2.6.10 |
| vue-unicons | 2.0.3 |
インストール
以下の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ファイルも作成して貰えると嬉しいですねー
今日はこの辺でー
