Vue

Vuetifyでv-iconが使えないのを解決する方法

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

オススメ本
Web技術を勉強するなら、かなりオススメの雑誌です。毎月新しい発見があります。ついに最終号・・・、みなさん買いましょう!!
読んで損することはない名著。命名で悩むことが多い人はこの本がオススメです。

Vuetify で v-icon が表示されないことがあったことがあったので、解決方法を記事にしました。

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

結論

アイコンによっては、使えなくなっている可能性があります。

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

こちらのコードで試してみてください。2022/5 段階では使えています。

また、以下のサイトのアイコンが使えます。

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

以下、流れとなります。

Udemy の動画では使えていたが実際に試したら使えなかった

今回の記事では、

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

4.jpg”}});

Vue.js + 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の画像

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

このコードは、2022 年 5 月の時点で使えるので、一度このコードをコピペして使えるか確認してみて、もし使えなければ他の原因かもしれないです。

まとめ

以上です。

誰かの参考になればと思います。

感想や質問あれば Twitter で DM していただければと思います。