Quasarでアイコンが表示されない原因と解決方法【Vue-CLI 3】

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

表示されない

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

                  src/App.vue

<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> class=cl></template>

なぜだ！！！

原因

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

vue add quasar

📦  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文を追加するだけです。

[adsense-responsive]

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

tree ./node_modules/@quasar/ -L 2

./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とマテリアルデザインアイコンを追加してみようと思います。

src/quasar.ts

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を導入する際に使用するアイコンを最初から全て指定しておけば問題は無いのですが、後から追加するケースも多いにあると思います。

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