如何在 Next.js 中使用 Fontawesome

概述

本文讨论如何在 Next.js 项目中使用 Fontawesome 5免费版。代码示例使用 TypeScript 编写。

1.安装依赖项

npm i --save @fortawesome/fontawesome-svg-core \
             @fortawesome/free-solid-svg-icons \
             @fortawesome/free-brands-svg-icons \
             @fortawesome/react-fontawesome

2. 像专业人士一样使用

这是最简单的入门方法，您可以导入单个图标并直接在组件中使用它。

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

export default function MyComponent(): ReactElement {
  return <FontAwesomeIcon icon={faCoffee} />
}

3. 稍微复杂一点的方法

假设您在多个组件中使用相同的图标，但您不想在每个组件中导入它。

这可以通过在 pages/_app.tsx 中定义一个库来完成。

在下面的代码中，您将所有品牌图标fab和单个咖啡图标添加faCoffee到库中。

import { AppProps } from 'next/app'
import '../styles/index.css'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { ReactElement } from 'react'

library.add(fab, faCoffee)

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

在您的组件中，您可以引用库中的图标。

在您的图标库中，您添加了所有品牌图标。因此，您可以通过指定来引用集合中的fab特定图标（例如）。另一方面，您导入了单个图标，因此您可以直接引用图标名称。twitter['fab', 'twitter']faCoffeecoffee

import { ReactElement } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

export default function IconFromLibrary(): ReactElement {
  return (
    <>
      <FontAwesomeIcon icon={['fab', 'twitter']} />
      <FontAwesomeIcon icon="coffee" />
    </>
  )
}

结论

本文介绍了在 next.js 项目中使用 Fontawesome 的配置和两种方法。

更多信息可以在react-fontawesome文档中找到。

希望你喜欢这篇文章！
感谢阅读！

鏂囩珷鏉ユ簮锛�https://dev.to/vuongddang/how-to-use-fontawesome-in-next-js-5bl5