2020/12/21
NuxtJS+VuetifyでLine Awesomeを使えるようにする
概要
NuxtJS + Vuetifyベースのサイトの話です。
IconにLine Awesomeをつかいたかったので、その設定方法になります。
Vuetifyjs公式のカスタムアイコンの使用を参考にしました。
実装内容
install
yarn add line-awesome
coding
plugins/icons.js
- まずはpluginを作成します。
- line-awesomeのcssを読み込みます
- vuetifyの各コンポーネントで使っているデフォルトのiconを書き換えます
import 'line-awesome/dist/line-awesome/css/line-awesome.min.css'
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
export default new Vuetify({
icons: {
iconfont: 'la',
values: {
complete: 'la-check',
cancel: 'la-times-circle',
close: 'la-times',
delete: 'la-times-circle', // delete (e.g. v-chip close)
clear: 'la-times',
success: 'la-check-circle',
info: 'la-info',
warning: 'la-exclamation',
error: 'la-exclamation-triangle',
prev: 'la-chevron-left',
next: 'la-chevron-right',
checkboxOn: 'la-check-square',
checkboxOff: 'la-stop',
checkboxIndeterminate: 'la-minus-square',
delimiter: 'la-circle', // for carousel
sort: 'la-arrow-up',
expand: 'la-chevron-down',
menu: 'la-bars',
subgroup: 'la-caret-down',
dropdown: 'la-caret-down',
radioOn: 'la-check-circle',
radioOff: 'la-circle',
edit: 'la-edit',
ratingEmpty: 'lar la-star',
ratingFull: 'las la-star',
ratingHalf: 'la-star-half-alt',
loading: 'la-sync',
first: 'la-step-backward',
last: 'la-step-forward',
unfold: 'la-arrows-alt-v',
file: 'la-file',
plus: 'la-plus',
minus: 'la-minus',
},
},
})
nuxt.config.js
- 作ったpluginを読み込ませます
// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
plugins: [
{ src: '~/plugins/icons' }, // この行を追加
],
使い方
- 以下のようにして使用できます。
<v-icon>la-bell</v-icon>
以上になります。
関連する記事
Nuxt2からNuxt3への移行とNextJSとNuxt3の比較について
弊社ホームページとブログサイトをNuxt2からNuxt3ベースに移行しました。
Nuxt.jsからNext.jsへのリニューアルを経て思うこと
Nuxt.jsからNext.jsへフルリニューアルしたことで見えてきた個人的なメリットとデメリットを整理します
NuxtJSにEditor.jsを導入
リッチでカスタマイズが自由なテキストエディタであるEditor.jsをNuxtJSのサイトに導入しました。
AOSをNuxtJSのサイトに導入する
スクロールアニメーションを簡単に実装できるAOSというライブラリをNuxtJSベースのサイトに導入しました