はじめに
Buefyは、BulmaをベースにしたVue.js向けUIライブラリです。
Buefyはアイコンを利用できるのですが、ドキュメントにはCDNからダウンロードする方法しか記載されていません。
ここではnpm(or yarn)でinstallしたMaterial Design Iconsのアイコンを使うときの手順を紹介します。
環境
Node.js v12.13.1
vue-cli v4.4.1
アプリケーションの雛形を作って、Buefyをインストールする
$vue create my-app # オプションは自由に$cd my-app
$npminstall buefy
アプリの雛形ができたら、Buefyを使えるようにします。
main.js
importVuefrom'vue';importBuefyfrom'buefy';importAppfrom'./App.vue';import'buefy/dist/buefy.css';Vue.use(Buefy);Vue.config.productionTip=false;newVue({render:(h)=>h(App),}).$mount('#app');Material Design Iconsをインストールする
$npm i @mdi/font
main.js
importVuefrom'vue';importBuefyfrom'buefy';importAppfrom'./App.vue';import'buefy/dist/buefy.css';// 追加import'@mdi/font/css/materialdesignicons.css';Vue.use(Buefy);まとめ
これでアイコンを使えるようになりました。
チートシートを見るとmdi-が先頭についていますが、コンポーネントのiconプロパティには不要です。mdi-をつけるとアイコンが表示されません。
MyComponent.vue
<template><section><b-buttonicon-left="github">Add</b-button><b-iconicon="home"></b-icon></section></template>