category
tags
type
status
slug
date
summary
icon
password
前言
我的页面是基于NextJS开发的,引入了React-fontawesome相关的依赖后,图标在线上生产环境会变得巨大,然而在本地开发的时候是正常的。
引入内容
开发模式图标尺寸正常
![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F9578a5ff-8ffb-4fa1-bc5b-1e645ffc582d%2FUntitled.png?table=block&id=19ec4150-18bf-43b4-b78d-d46693a7a56c)
图标展示异常
如果在本地
next build && next start
或直接推送到Vercel生产环境编译后,会出现图标巨大:![notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F63335dfa-88c9-4e77-bb3a-f59eddbaf9f7%2FUntitled.png?table=block&id=33133948-dd38-4316-909b-221ac7044544)
解决
土办法
设置组件的大小,我这里用的
w-5
限定了图标的宽度。官方解决方案
由于 Next.js 管理 CSS 的方式与大多数 Web 项目不同,如果只是按照普通的 vanilla 文档集成
react-fontawesome
到您的项目中,您将看到巨大的图标,因为它们缺少使它们正常展现的随附 CSS。在
_app.js
加入以下代码正常在页面中使用即可
- 作者:NotionNext
- 链接:https://tangly1024.com/nextjs-react-fontawesome-big-icon
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。
相关文章