跳到主要內容
← 回到學習

學習 · 前端框架

Next.js Add Font Awesome

By Kurau3 分鐘閱讀

目錄 · 6 個段落
  1. 01安裝
  2. 02在 _app.tsx(Pages Router)
  3. 03App Router(Next.js 13+)
  4. 04使用圖示
  5. 05Bundle size 優化
  6. 06替代方案考量

Next.js 整合 Font Awesome

TL;DR
走 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
bash
套件用途
@fortawesome/fontawesome-svg-core核心,所有圖示都依賴它
@fortawesome/free-solid-svg-icons實心圖示包(可換 regular / brands 等)
@fortawesome/react-fontawesomeReact 元件包裝
圖示包選擇
  • 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} />;
}
tsx
為什麼要 autoAddCss = false
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>
  );
}
tsx

使用圖示

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>
  );
}
tsx

常用 props

Prop範例說明
size"xs" "lg" "2x" "3x"圖示大小
color(CSS color)顏色
spintrue旋轉動畫(loading 用)
pulsetrue脈衝旋轉
fixedWidthtrue固定寬度(等寬排列)
rotation90 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';
tsx

用 library 註冊全域(可選)

// app/icons.ts
import { library } from '@fortawesome/fontawesome-svg-core';
import { faCoffee, faHeart } from '@fortawesome/free-solid-svg-icons';
 
library.add(faCoffee, faHeart);
tsx
// 之後可以用字串引用
<FontAwesomeIcon icon="coffee" />
tsx

代價:失去 type safety + tree-shaking。小型專案不建議,大型 design system 才需要。

替代方案考量

方案優劣
Font Awesome圖示多、業界熟悉bundle 大、需設定
Lucide現代、輕量、tree-shake 完美圖示量較少
Heroicons(by Tailwind)風格現代、輕圖示量少
Tabler Icons4000+ 免費—
react-icons多家 icon set 統一 importbundle 較大
2026 年建議
新專案優先選 Lucide 或 Tabler,輕量現代。Font Awesome 適合需要付費 Pro 圖示或團隊已熟悉的專案。
參考

目錄