ホーム
Sponserd by↑転職したい人向け、ベンチャー企業の採用動画があります

Vuetifyでv-iconが使えなかった話

現在インストールするだけで涼しくなれるアプリを開発中のまっつんです(嘘)

Vue.js を触りだしてから面白くて仕方がなかったのですが、ちょっと詰まりました・・・。

⇨Vuetify についてはこちらの記事で書いてます。

v-icon が表示されない

 正確には、表示されるものと表示されないものがある、と言う感じでした。

自分の中では、「どっちかにしてくれ」って感じです。

Udemy の動画では使えている

Vue.js を一番最初に触るときにめちゃめちゃ参考になった、Udemy の講座である

https://www.udemy.com/vuejs-firebase/

これの中では普通に

add vuetify

するだけで v-icon が使えているんですよね。

僕は使えませんでした・・・。

まぁパッケージ関係は、バージョンによって使えなくなるものもあるんでしょうね。

そういうこともあるんでしょう。

解決方法

マテリアルデザインアイコン公式

アイコンの公式サイトです。

mdi:Material Design Icon の略だそうです。

例えば、

account-box

というアイコンを使いたい時は、mdi-account-box というように mdi-を付け足すことによって使用することができます。

<v-icon>mdi-plus-thick</v-icon>
<v-icon>mdi-account-box</v-icon>

V-iconの画像

こんな感じで表示されます。

このコードは、2021 年 4 月の時点で使えるので、一度このコードをコピペして使えるか確認してみるのも良いかもしれないです。

まとめ

オススメの Vue の本

この記事を書いてから1年半くらいたったので、現在使っているマテリアルデザインアイコンの URL に変えるなど、修正しました。

他にも Vuetify の記事を書いているので、タグで検索してみてください。