Vuetifyでv-iconが使えなかったときのTips

Vuetifyめちゃくちゃ便利で,最近はBootstrapとかより重宝してます.

「vuetify」の画像検索結果

最近Vuetify使っていて一つ問題が起きたのがv-iconが使えない(一部しか使えない)ことがあったことです.

普通にVuetifyの公式ドキュメントのサンプル(<v-icon>mdi-anchor</v-icon>みたいなやつ)を書いても表示されない!?ってなって調べたのでそれを備忘録として書いておきます.

https://vuetifyjs.com/ja/components/icons

結果的には,./public/index.html(./dist/ではない)に以下の行を追加することで動くようになりました.

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">

公式ドキュメントには書いてなかったので,少しだけ焦りましたが,単純な話でした.

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です