Inertia JS-Vite项目中Quasar图标集无法渲染问题求助

API 探路者

2026-8-7

问题：Quasar图标仅显示名称无法渲染（Inertia JS + Vite环境）

我在基于Inertia JS和Vite的应用中已安装Quasar及Quasar图标集，但图标无法正常渲染，仅显示图标名称。

app.js 配置代码

import iconSet from 'quasar/icon-set/fontawesome-v6'
import '@quasar/extras/fontawesome-v6/fontawesome-v6.css'

setup({el, app, props, plugin}) {
    return createApp({render: () => h(app, props)})
        .use(plugin)
        .use(ZiggyVue, Ziggy)
        .use(PrimeVue)
        .use(Quasar,{iconSet: iconSet,})
        .mount(el);
},

模板代码

<q-btn color="yellow" glossy text-color="black" push label="First" icon="fabAngular"/>

排查与解决方案

确认依赖安装完整
确保已安装@quasar/extras和FontAwesome核心依赖，执行以下命令补装：
```
npm install @quasar/extras @fortawesome/fontawesome-free
```
修正图标命名格式
Quasar的FontAwesome v6图标有严格命名规则：品牌图标需遵循faBrands[IconName]的驼峰格式，你使用的fabAngular不符合规范，正确名称应为faBrandsAngular，修改模板代码：
```
<q-btn color="yellow" glossy text-color="black" push label="First" icon="faBrandsAngular"/>
```

调整Quasar插件注册顺序
将Quasar插件的注册提前，避免其他UI库可能的配置冲突：

setup({el, app, props, plugin}) {
    return createApp({render: () => h(app, props)})
        .use(plugin)
        .use(Quasar, { iconSet: iconSet })
        .use(ZiggyVue, Ziggy)
        .use(PrimeVue)
        .mount(el);
},

配置Vite静态资源支持
在vite.config.js中明确指定字体文件的资源类型，确保Vite能正确加载：
```
export default defineConfig({
    assetsInclude: ['**/*.woff', '**/*.woff2', '**/*.ttf']
})
```
清除缓存重启服务
执行npm run dev --force强制重启开发服务，同时清除浏览器缓存，避免旧资源残留导致的加载问题。