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

IT

投稿日: 2019年10月19日
最終更新日:

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

ねこじゃすり

created by Rinker
PEPPY(ペピイ)
¥3,850 (2025/01/05 12:56:12時点 Amazon調べ-詳細)

猫を魅了する魔法の装備品!

【最新機種】GoPro hero11 Black

created by Rinker
¥61,300 (2025/01/05 20:59:47時点 楽天市場調べ-詳細)

最新機種でVlogの思い出を撮影しよう!

ペヤング ソースやきそば 120g×18個

created by Rinker
ペヤング
¥3,280 (2025/01/05 12:33:38時点 Amazon調べ-詳細)

とりあえず保存食として買っておけば間違いなし!

レッドブル エナジードリンク 250ml×24本

created by Rinker
Red Bull(レッドブル)
¥4,000 (2025/01/05 12:33:39時点 Amazon調べ-詳細)

翼を授けよう!

Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK

created by Rinker
Bauhutte(バウヒュッテ)
¥15,855 (2025/01/05 12:09:12時点 Amazon調べ-詳細)

メインデスクの横に置くのにぴったりなおしゃれな可動式ラック!

BANDAI SPIRITS ULTIMAGEAR 遊戯王 千年パズル 1/1スケール

created by Rinker
BANDAI SPIRITS(バンダイ スピリッツ)
¥10,429 (2025/01/05 12:09:13時点 Amazon調べ-詳細)

もう一人の僕を呼び覚ませ!!

サンディスク microSD 128GB

スマホからSwitchまで使える大容量MicroSDカード!

スポンサーリンク

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

関連記事

YouTubeも見てね♪