1500種類のSVG アイコンを「Vue-Awesome」で使用する

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アイコンコンポーネントでした。

世の中にはこんなに便利なアイコンを無料で提供してくれるサイトもあるんですねー。

本当にありがたいです。

 

今日はこの辺でー