Vue-Awesomeとは

 

Vue-Awesome」は、Font Awesomeアイコンを内蔵した、SVGアイコンコンポーネントです。

Font Awesomeは膨大な数のSVGアイコンをフリーで(一部有料)提供してくれているサイトです。

このライブラリを使うとSVGのアイコンを簡単に使用する事ができます。

 

インストール

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

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

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

本当にありがたいです。

 

今日はこの辺でー

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください