UMD(CDN)版Quasarでデフォルト以外のアイコンを使う

最近、GASでWEBアプリを作ったりする際にQuasarのUMD(CDN)版を使用しています。
PCに開発環境を構築する必要がなく、サクっと使い始められるのでとでも便利です。

Quasarを使っていて、デフォルトのアイコン(Material Icons)以外を使おうとして少し詰まったので、解決方法を記録しておきます。

ちなみに、私が使いたかったのはMaterial Icons (Outlined)なので、その前提で記載しています。

CDNインストール

Quasarの公式サイトはとても親切で、導入用のコードを生成できるようになっています。

Quasar UMD - CDN install | Quasar Framework
How to use the Unified Module Definition form of Quasar.

上記のページにアクセスし、必要なアイコンを選択し、Quasar Icon Setも変更します。
(Iconには関係ないですが、Quasar Language Packを日本語にしました)

使用したいアイコンを選択し、Quasar Icon Setも変更しておく。
Icon Setを変更していないと、Qursarのコンポーネントが正しく表示されなかったりする(例えばSelectの右側に表示される▼マークなど)

すると、htmlのソースが生成されますので、コピー&ペーストして使用します。

選択した内容に応じてソースが生成される。ペーストしてすぐ使用できるのでとても便利。

アイコンの使用

Quasar公式ドキュメントの各種説明は、デフォルトのアイコン(Material Icons)を使用する前提で記載されています。つまり、Google Fontsのサイトで言うところの、Filledに属するアイコンが使われます。

Quasarでデフォルトのアイコンを使う場合、Google Fontsのサイトで”Filled”を選択してアイコンを検索し、右側のアイコン名(この例では”thumb_up”)を利用する。

デフォルトのアイコン(Filled)をQuasarで使う場合は、Google Fontsサイトで確認できるアイコン名(例:thumb_up)をq-iconname属性にセットして使用します。

<q-icon name="thumb_up"></q-icon>

それ以外のアイコン、たとえばOutlinedを使う場合は・・・

Google Fontsのサイトで”Outlined”を選択してアイコンを検索します。

Google Fontsのサイトで”Outllined”を選択してアイコンを検索し、右側のアイコン名(この例では”thumb_up”)を利用する。

そして、htmlを記述するのですが、その際に、アイコン名の前にプレフィックスを付与する必要があります。

<!-- Outlinedのアイコンを使う場合、アイコン名の頭に o_ を付与する -->
<q-icon name="o_thumb_up"></q-icon>

UMD(CDN版)では基本的に自己完結タグが使えないので、閉じタグ付きで記述します。

NG: <q-icon name="o_thumb_up" />
OK: <q-icon name="o_thumb_up"></q-icon>

これで、Outlinedのアイコンを使うことができました。
Roundedのアイコンを使う場合もほぼ同様で、アイコン名の頭にr_を付与します。

アイコン名の付与するプレフィックスは、Quasarのドキュメントで確認することができますので、他の種類のアイコンを使いたい場合は、以下のサイトを参照してください。

Icon | Quasar Framework
The QIcon Vue component allows you to insert icons within other components or any other area of your pages.
Quasarのドキュメントの”Name Prefix”の部分で、アイコン名の付与すべきプレフィックスを確認できる。

コメント