nuxt-quasar-ui
で、Material IconsやFont Awesomeなどのアイコンライブラリを使用する方法に読み込む方法に少しハマったのでメモ。
結論
nuxt.config.ts
にて、defineNuxtConfig
内のquasar.extras.fontIcons
に使用したいライブラリの名前を指定するだけ。
export default defineNuxtConfig({
...
modules: ["nuxt-quasar-ui"],
quasar: {
extras: {
fontIcons: ["fontawesome-v6"],
},
},
});
<q-icon name="fa-brands fa-ambulance" />
name
に渡す値の形式はライブラリによって異なる。
ハマったポイント
以下のインストール手順では、/quasar.config
という設定ファイルに設定を書く方法が紹介されている。
https://quasar.dev/options/installing-icon-libraries#installing-webfonts
ただし、この/quasar.config
はQuasarのCLIを使ってQuasarをインストールしている場合に読み込まれるファイルらしい。
nuxt-quasar-ui
を使っている場合は、冒頭に書いたようにnuxt.config.ts
のquasar
の欄に設定を記述する必要がある。