在 Next 13.0 使用 Font Awesome 字體套件

Next
, , , ,

做法

安裝依賴。

1
2
3
4
5
npm i @fortawesome/fontawesome-svg-core \
    @fortawesome/react-fontawesome \
    @fortawesome/free-solid-svg-icons \
    @fortawesome/free-brands-svg-icons \
    --save

修改 _app.tsx 檔。

1
2
3
4
5
6
7
8
9
10
11
import React from 'react';
import '../styles/globals.css';
import type { AppProps } from 'next/app';
import { config } from '@fortawesome/fontawesome-svg-core';
import '@fortawesome/fontawesome-svg-core/styles.css';

config.autoAddCss = false;

export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

修改 index.tsx 檔，引入字體。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faFaceSmile } from '@fortawesome/free-solid-svg-icons';

export default function Home() {
  return (
    <div className="container">
      <main>
        <h1 className="title">
          <FontAwesomeIcon icon={faFaceSmile} />
        </h1>
      </main>
    </div>
  );
};

參考資料