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

FontAwesome图标的React组件库在NextJS下会出现显示异常的问题
NextJS中React-FontAwesome呈现巨大的图标
category
tags
type
slug
date
summary
status
icon
password

前言

我的页面是基于NextJS开发的,引入了React-fontawesome相关的依赖后,图标在线上生产环境会变得巨大,然而在本地开发的时候是正常的。
引入内容
开发模式图标尺寸正常
notion image

图标展示异常

如果在本地 next build && next start 或直接推送到Vercel生产环境编译后,会出现图标巨大:
notion image
 
 

解决

土办法

设置组件的大小,我这里用的w-5限定了图标的宽度。

官方解决方案

由于 Next.js 管理 CSS 的方式与大多数 Web 项目不同,如果只是按照普通的 vanilla 文档集成react-fontawesome到您的项目中,您将看到巨大的图标,因为它们缺少使它们正常展现的随附 CSS。
 
_app.js 加入以下代码
正常在页面中使用即可
上一篇
如何在本地调试GoogleAdsense样式?
下一篇
VSCode保存文件时自动按照ESLint格式化代码
Loading...
2023-7-20
最新发布
博弈论教程系列(3) — 纳什均衡中的支配关系
2024-11-20
博弈论教程系列(1)— 博弈论入门之纯策略纳什均衡
2024-11-20
博弈论教程系列(2)— 零和博弈与混合策略纳什均衡
2024-11-20
十年一次的机遇,2024年A股牛市操作手册,如何让资产快速翻25倍?
2024-11-20
滚仓是什么策略?为什么交易大神们都在用?新手能学会滚仓吗?
2024-11-20
什么是正确的交易理念?《毛选》已经给了我们答案
2024-11-20