a minute ago

vue-awesome Vue.jsでfont-awesomeのIcon導入


Install

npm install vue-awesome

https://github.com/Justineo/vue-awesome

nuxtの場合は以下をplugin/vicon.tsとかで保存

import Vue from 'vue'
import 'vue-awesome/icons'
import Icon from 'vue-awesome/components/Icon'
Vue.component('v-icon', Icon)

typescript使ってたら多分怒られるので回避

declare module 'vue-awesome/components/Icon'

nuxt.config.js

plugins: [
  { src: '~/plugins/vicon.ts' },
],

Use

<!-- basic -->
<v-icon name="beer"/>

<!-- with options -->
<v-icon name="sync" scale="2" spin/>
<v-icon name="comment" flip="horizontal"/>
<v-icon name="code-branch" label="Forked Repository"/>

<!-- stacked icons -->
<v-icon label="No Photos">
  <v-icon name="camera"/>
  <v-icon name="ban" scale="2" class="alert"/>
</v-icon>

オプション一覧

type初期値説明
namestringnullアイコンの名前です。 Font Awesomeのアイコンを使用することができます。 使用できるのは無料のアイコンだけです。
scalenumber|string1アイコンのサイズを調整するために使用されます。
spinbooleanfalseアイコンが回転しているかどうかを指定するために使用されます。
inversebooleanfalsetrueに設定すると、アイコンの色は#fffになります
pulsebooleanfalseパルス効果をアイコンに設定します。
flip'vertical'|'horizontal'|nullnullアイコンを反転するために使用されます。
labelstringnullアイコンがある場合は、そのアリアラベルを設定します。
titlestringnullアイコンのタイトルを設定します。

https://www.kabanoki.net/4257/


Related Articles