投稿日：
2019年10月19日
最終更新日：
【Vue-CLI 3系】Quasarでアイコンが表示されない場合の原因と解決方法まとめ【マテリアルアイコン/FontAwesame/MDI】
YouTubeも見てね♪
ねこじゃすり
猫を魅了する魔法の装備品！
Anker PowerCor
旅行には必須の大容量モバイルバッテリー！
【最新機種】GoPro hero11 Black
最新機種でVlogの思い出を撮影しよう！
[ノースフェイス] THE NORTH FACE メンズ アウター マウンテンライトジャケット
防水暴風で耐久性抜群なので旅行で大活躍です！
レッドブル エナジードリンク 250ml×24本
翼を授けよう！
Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK
メインデスクの横に置くのにぴったりなおしゃれな可動式ラック！
MOFT X 【新型 ミニマム版】 iPhone対応 スマホスタンド
Amazon一番人気のスマホスタンド！カード類も収納出来てかさ張らないのでオススメです！
アイコンが出ない助けて！！！
表示されない
Quasarを使ってWebシステムやサイトを構築している際に、ドキュメントに「マテリアルアイコン以外にもFontAwesameやMDIなどをサポートしているよ！」という記載があったので使ってみようと思ったところ表示されませんでした。
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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<template>
<q-layout view="lHh Lpr lFf">
<q-page-container>
<div>
<p>
<span>マテリアルアイコン:</span>
<q-icon name="thumb_up" />
</p>
<p>
<span>FontAwesame:</span>
<q-icon name="fas fa-ambulance" />
</p>
<p>
<span>MDI:</span>
<q-icon name="mdi-alert-circle-outline" />
</p>
</div>
</q-page-container>
</q-layout>
</template>
|
なぜだ！！！
原因
これは、Vue-CLIのプラグインとして、Quasarを導入する際の対話時にSelect featuresの項目で使用するアイコンを指定せずに生成すると、Choose Quasar Icon Setに指定したものしか読み込まれなくなってしまいます。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
📦 Installing vue-cli-plugin-quasar...
yarn add v1.17.3
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Saved 1 new dependency.
info Direct dependencies
└─ vue-cli-plugin-quasar@1.0.0
info All dependencies
└─ vue-cli-plugin-quasar@1.0.0
✨ Done in 6.21s.
✔ Successfully installed plugin: vue-cli-plugin-quasar
? Allow Quasar to replace App.vue, About.vue, Home.vue and (if available) router.js? Yes
? Treeshake Quasar? (you'll need to import the components, directives and plugins that you use yourself) Yes
? Use RTL support? No
? Choose Quasar Icon Set Material
? Quasar language pack - one from https://github.com/quasarframework/quasar/tree/dev/quasar/lang en-us
? Select features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ IE11 support
◯ Roboto font
◯ Material icons
◯ Fontawesome icons
◯ Ionicons icons
◯ MDI icons
◯ Eva icons
|
この際に全てにチェックを入れていれば、問題なく使用出来るのですが、後から追加するには、「quasar.conf.jsを作って記述をする必要があるよ！」と公式ドキュメントに書いてありましたが、別の方法でも簡単に実現出来たので今回はそちらをご紹介しようと思います。
手順
前提
今回はVue-CLI3系によってプロジェクトにQuasarを導入していることを前提とします。
以下の記事にて導入方法をご紹介しているので参考にしていただければなと思います。
quasar.tsの修正
やり方はとても簡単で、src/quasar.tsに使いたいアイコンのcssファイルのimport文を追加するだけです。
各アイコンのモジュール自体はデフォルトでインストールされているようなので、yarnやnpmでインストールする必要は無さそうです。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
./node_modules/@quasar/
└── extras
├── LICENSE
├── README.md
├── animate
├── eva-icons
├── fontawesome-v5
├── ionicons-v4
├── material-icons
├── material-icons-outlined
├── material-icons-round
├── material-icons-sharp
├── mdi-v3
├── mdi-v4
├── package.json
├── roboto-font
├── roboto-font-latin-ext
└── themify
14 directories, 3 files
|
今回は、FontAwesameとマテリアルデザインアイコンを追加してみようと思います。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
import Vue from "vue";
import "./styles/quasar.styl";
import "quasar/dist/quasar.ie.polyfills";
import lang from "quasar/lang/ja.js";
import "@quasar/extras/roboto-font/roboto-font.css";
import "@quasar/extras/material-icons/material-icons.css";
import "@quasar/extras/fontawesome-v5/fontawesome-v5.css"; // 追加
import "@quasar/extras/mdi-v4/mdi-v4.css";// 追加
...
(略)
...
|
確認
それではブラウザで再度確認してみましょう。
無事に表示されるようになりましたね♪
終わりに
以上のように、Vue-CLIを使ってQuasarを導入する際に使用するアイコンを最初から全て指定しておけば問題は無いのですが、後から追加するケースも多いにあると思います。
そんな時は、上記の方法で試してみてください♪