NextJS中React-FontAwesome呈现巨大的图标

前言

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

<FontAwesomeIcon icon={faFolder}/>

"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.16",

next dev

图标展示异常

解决

土办法

<FontAwesomeIcon icon={faFolder} size='sm' className='mr-1 w-5 text-sm' />

官方解决方案

Font Awesome

The world's most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.

https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react

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

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

import Head from 'next/head'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faFaceRelieved } from '@fortawesome/pro-solid-svg-icons'

export default function Home() {
  return (
    <div className="container"><main><h1 className="title"><FontAwesomeIcon icon={faFaceRelieved} />
          Welcome to <a href="https://nextjs.org">Next.js!</a></h1></main></div>)
}