Quasar Icon Sets

지원 아이콘

https://github.com/quasarframework/quasar/tree/dev/ui/icon-set

Material Icons
Material Symbols
Font Awesome
Ionicons
MDI
Eva Icons
Themify Icons
Line Awesome
Bootstrap Icons

아이콘 라이브러리 설치

목록

https://github.com/quasarframework/quasar/tree/dev/extras

quasar.config

extras: [
  'material-icons',
  'mdi-v7',
  'ionicons-v4', // last webfont was available in v4.6.3
  'eva-icons',
  'fontawesome-v6',
  'themify',
  'line-awesome',
  'bootstrap-icons'
],
framework: {
  iconSet: 'fontawesome-v6'
}

extras에 포함되면 프로젝트 전체에서 사용되고 iconset은 기본적으로 사용할 아이콘을 설정.

동적변경

boot 파일 생성

quasar new boot quasar-icon-set [--format ts]

import { Quasar } from "quasar";

// relative path to your node_modules/quasar/..
// change to YOUR path
const iconSetList = import.meta.glob(
  "../../node_modules/quasar/icon-set/*.mjs"
);
// or just a select few (example below with only mdi-v7 and fontawesome-v6):
// import.meta.glob('../../node_modules/quasar/icon-set/(mdi-v7|fontawesome-v6).mjs')

export default async () => {
  const iconSetName = "mdi-v7"; // ... some logic to determine it (use Cookies Plugin?)

  try {
    iconSetList[`../../node_modules/quasar/icon-set/${iconSetName}.mjs`]().then(
      (lang) => {
        Quasar.iconSet.set(setDefinition.default);
      }
    );
  } catch (err) {
    // Requested Quasar Icon Set does not exist,
    // let's not break the app, so catching error
  }
};