素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

【Vue-CLI 3系】Quasarでアイコンが表示されない場合の原因と解決方法まとめ【マテリアルアイコン/FontAwesame/MDI】

投稿日:

スポンサーリンク

336×280




アイコンが出ない助けて!!!

表示されない

Quasarを使ってWebシステムやサイトを構築している際に、ドキュメントに「マテリアルアイコン以外にもFontAwesameMDIなどをサポートしているよ!」という記載があったので使ってみようと思ったところ表示されませんでした。

The QIcon component allows you to easily insert icons within other components or any other area of your pages. Quasar currently supports: Material Icons , Font Awesome, Ionicons, MDI, Eva Icons and Themify Icons.Icon | Quasar Framework

なぜだ!!!

原因

これは、Vue-CLIのプラグインとして、Quasarを導入する際の対話時Select featuresの項目で使用するアイコンを指定せずに生成すると、Choose Quasar Icon Set指定したものしか読み込まれなくなってしまいます。

この際に全てにチェックを入れていれば、問題なく使用出来るのですが、後から追加するには、「quasar.conf.jsを作って記述をする必要があるよ!」と公式ドキュメントに書いてありましたが、別の方法でも簡単に実現出来たので今回はそちらをご紹介しようと思います。

手順

前提

今回はVue-CLI3系によってプロジェクトにQuasarを導入していることを前提とします。

以下の記事にて導入方法をご紹介しているので参考にしていただければなと思います。

quasar.tsの修正

やり方はとても簡単で、src/quasar.ts使いたいアイコンのcssファイルのimport文を追加するだけです。

各アイコンのモジュール自体はデフォルトでインストールされているようなので、yarnやnpmでインストールする必要は無さそうです。

今回は、FontAwesameマテリアルデザインアイコンを追加してみようと思います。

確認

それではブラウザで再度確認してみましょう。

無事に表示されるようになりましたね♪

本日のオススメ商品

終わりに

以上のように、Vue-CLIを使ってQuasarを導入する際に使用するアイコンを最初から全て指定しておけば問題は無いのですが、後から追加するケースも多いにあると思います。

そんな時は、上記の方法で試してみてください♪

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , , , , , ,

blogenist

Author: blogenist