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

2019年7月9日

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

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

本当にありがたいです。

 

今日はこの辺でー

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-Icons, UI Components, vue.js, ライブラリ
-, , , , ,