More than 1 year has passed since last update.

Nuxt3+Quasarのプロジェクトでアイコンライブラリを読み込む

Posted at 2024-04-21

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の欄に設定を記述する必要がある。