React 开发日常记录

FontAwesome

• 免费 icon

在 React 中使用 FontAwesome

• 安装依赖

pm i --save @fortawesome/fontawesome-svg-core \
  @fortawesome/free-solid-svg-icons \
  @fortawesome/free-regular-svg-icons \
  @fortawesome/free-brands-svg-icons \
  @fortawesome/react-fontawesome@latest

• 使用

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

function App() {
  return <FontAwesomeIcon icon={faCoffee} />;
}

Next.js 中使用 FontAwesome

• 安装依赖

pm i --save @fortawesome/fontawesome-svg-core \
  @fortawesome/free-solid-svg-icons \
  @fortawesome/free-regular-svg-icons \
  @fortawesome/free-brands-svg-icons \
  @fortawesome/react-fontawesome@latest

• layout.tsx 中配置
  • 不配置会导致图标占满整个空间

import { config } from '@fortawesome/fontawesome-svg-core'
import '@fortawesome/fontawesome-svg-core/styles.css'
config.autoAddCss = false

• pages.tsx 中使用

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

function App() {
  return <FontAwesomeIcon icon={faCoffee} />;
}