NextJS中React-FontAwesome呈现巨大的图标
2021-12-13|2022-5-12

tangly1024
前言
我的页面是基于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

图标展示异常
如果在本地
next build && next start
或直接推送到Vercel生产环境编译后,会出现图标巨大:
解决
土办法
设置组件的大小,我这里用的
w-5
限定了图标的宽度。<FontAwesomeIcon icon={faFolder} size='sm' className='mr-1 w-5 text-sm' />
官方解决方案
由于 Next.js 管理 CSS 的方式与大多数 Web 项目不同,如果只是按照普通的 vanilla 文档集成
react-fontawesome
到您的项目中,您将看到巨大的图标,因为它们缺少使它们正常展现的随附 CSS。在
_app.js
加入以下代码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>) }
- Twikoo
- Waline
- Giscus
- Cusdis