前端框架
Next.js Add Font Awesome
By Kurau···3 分鐘閱讀
Next.js 整合 Font Awesome
走 Font Awesome 官方 React 整合,不要用 CDN link。三個必要套件(fontawesome-svg-core + 圖示包 + react-fontawesome)+ 在 _app.tsx 關掉自動加 CSS,改成手動 import 樣式表(避免閃爍)。
安裝
npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons # 實心圖示
npm install @fortawesome/react-fontawesome
| 套件 | 用途 |
|---|
@fortawesome/fontawesome-svg-core | 核心,所有圖示都依賴它 |
@fortawesome/free-solid-svg-icons | 實心圖示包(可換 regular / brands 等) |
@fortawesome/react-fontawesome | React 元件包裝 |
free-solid-svg-icons — 實心(最常用)free-regular-svg-icons — 線條free-brands-svg-icons — 品牌(Twitter / GitHub 等)pro-*(付費)— 更多風格
在 _app.tsx(Pages Router)
// pages/_app.tsx
import type { AppProps } from 'next/app';
import { config } from '@fortawesome/fontawesome-svg-core';
import '@fortawesome/fontawesome-svg-core/styles.css';
config.autoAddCss = false; // ⚠️ 必須關掉自動加 CSS
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
Font Awesome 預設會在 component mount 時 動態 inject CSS 到 <head>。在 SSR / SSG 流程下,首次 render 時 CSS 還沒注入 → 圖示會超大(因為沒 size styles)→ 等 JS 跑完才修復 → 出現「閃爍放大」。
關掉自動 inject + 手動 import 那個 styles.css → CSS 在 build 時就被 Next.js 處理進 bundle,SSR 出來就有正確 style,沒閃爍。
App Router(Next.js 13+)
// app/layout.tsx
import { config } from '@fortawesome/fontawesome-svg-core';
import '@fortawesome/fontawesome-svg-core/styles.css';
config.autoAddCss = false;
export default function RootLayout({ children }) {
return (
<html>
<body>{children}</body>
</html>
);
}
使用圖示
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee, faHeart } from '@fortawesome/free-solid-svg-icons';
import { faGithub } from '@fortawesome/free-brands-svg-icons';
function Header() {
return (
<nav>
<FontAwesomeIcon icon={faCoffee} />
<FontAwesomeIcon icon={faHeart} style={{ color: 'red' }} size="2x" />
<FontAwesomeIcon icon={faGithub} />
</nav>
);
}
常用 props
| Prop | 範例 | 說明 |
|---|
size | "xs" "lg" "2x" "3x" | 圖示大小 |
color | (CSS color) | 顏色 |
spin | true | 旋轉動畫(loading 用) |
pulse | true | 脈衝旋轉 |
fixedWidth | true | 固定寬度(等寬排列) |
rotation | 90 180 270 | 旋轉角度 |
flip | "horizontal" "vertical" | 翻轉 |
Bundle size 優化
只 import 用到的圖示
// ✅ Tree-shaking 友善
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
// ❌ 整包載入(整個 free-solid 約 1.5MB!)
import * as solid from '@fortawesome/free-solid-svg-icons';
用 library 註冊全域(可選)
// app/icons.ts
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCoffee, faHeart } from '@fortawesome/free-solid-svg-icons';
library.add(faCoffee, faHeart);
// 之後可以用字串引用
<FontAwesomeIcon icon="coffee" />
代價:失去 type safety + tree-shaking。小型專案不建議,大型 design system 才需要。
替代方案考量
| 方案 | 優 | 劣 |
|---|
| Font Awesome | 圖示多、業界熟悉 | bundle 大、需設定 |
| Lucide | 現代、輕量、tree-shake 完美 | 圖示量較少 |
| Heroicons(by Tailwind) | 風格現代、輕 | 圖示量少 |
| Tabler Icons | 4000+ 免費 | — |
| react-icons | 多家 icon set 統一 import | bundle 較大 |
新專案優先選 Lucide 或 Tabler,輕量現代。Font Awesome 適合需要付費 Pro 圖示或團隊已熟悉的專案。