目次
Vue-Awesomeとは
「Vue-Awesome」は、Font Awesomeアイコンを内蔵した、SVGアイコンコンポーネントです。
Font Awesomeは膨大な数のSVGアイコンをフリーで(一部有料)提供してくれているサイトです。
このライブラリを使うとSVGのアイコンを簡単に使用する事ができます。
インストール
以下のnpm、bower、CDNを使ってインストールします。
npm
npm install vue-awesome
bower
bower install vue-awesome
CDN
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-awesome.js"></script>
gitリポジトリは以下から取得できます。
https://github.com/Justineo/vue-awesome
導入手順
1. ライブラリの取り込み
webpack等の場合 ※モジュール版は未検証です。
import 'vue-awesome/icons' import Icon from 'vue-awesome/components/Icon' Vue.component('v-icon', Icon)
WEBページの場合
Vue.component('v-icon', window.VueAwesome);
2. テンプレートを準備
<p><v-icon name="beer"/></p> <p><v-icon name="pager"/></p> <p><v-icon name="arrow-alt-circle-right" pulse /></p> <p><v-icon name="sync" scale="2" spin/></p> <p><v-icon name="comment" flip="vertical"/></p> <p><v-icon name="code-branch" label="Forked Repository"/></p>
サンプル
プロパティ
設定例
<v-icon name="cat" spin pulse scale="4" flip="vertical" />
一覧
名 | type | 初期値 | 説明 |
name | string | null | アイコンの名前です。 Font Awesomeのアイコンを使用することができます。 使用できるのは無料のアイコンだけです。 |
scale | number|string | 1 | アイコンのサイズを調整するために使用されます。 |
spin | boolean | false | アイコンが回転しているかどうかを指定するために使用されます。 |
inverse | boolean | false | trueに設定すると、アイコンの色は#fffになります |
pulse | boolean | false | パルス効果をアイコンに設定します。 |
flip | 'vertical'|'horizontal'|null | null | アイコンを反転するために使用されます。 |
label | string | null | アイコンがある場合は、そのアリアラベルを設定します。 |
title | string | null | アイコンのタイトルを設定します。 |
まとめ
Font Awesomeアイコンを内蔵した、SVGアイコンコンポーネントでした。
世の中にはこんなに便利なアイコンを無料で提供してくれるサイトもあるんですねー。
本当にありがたいです。
今日はこの辺でー