忘れないように記録しとこ

カバの樹

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

2019年7月9日

完全版を表示する

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

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

本当にありがたいです。

 

今日はこの辺でー

  • B!