[next.js] svgr/webpack

nextjs如何配置svg文件,使其像react组件一样导入?

当前next.js 开发环境我使用了--turbo 来开启turbopack加速文件构建,所以之前的一些webpack loader之类的无法正常工作。通过搜索发现一般都是使用@svgr/webpack来处理svg,打开svgr官网发现有nextjs配置示例,

按照上面的配置后发现无效,组件直接报错了。思考了许久才发现是因为我在开发环境使用了--turbo,所以一些webpack的loader加载器不支持。

所以当时的笨方法是把.svg内容复制下来放到封装的react组件里。

偶然间在next.js的官网文档里turbo的介绍中发现就有@svgr/webpack的示例

直接在next.config.js里这样配下就好了,现在Next.js会把import进来的svg处理成react 组件。

相关推荐
小成2023032026524 分钟前
Linux高级02
linux·开发语言
知行合一。。。34 分钟前
Python--04--数据容器(总结)
开发语言·python
咸鱼2.01 小时前
【java入门到放弃】需要背诵
java·开发语言
ZK_H1 小时前
嵌入式c语言——关键字其6
c语言·开发语言·计算机网络·面试·职场和发展
A.A呐1 小时前
【C++第二十九章】IO流
开发语言·c++
椰猫子1 小时前
Java:异常(exception)
java·开发语言
lifewange1 小时前
pytest-类中测试方法、多文件批量执行
开发语言·python·pytest
cmpxr_1 小时前
【C】原码和补码以及环形坐标取模算法
c语言·开发语言·算法
2401_827499992 小时前
python项目实战09-AI智能伴侣(ai_partner_5-6)
开发语言·python
PD我是你的真爱粉2 小时前
MCP 协议详解:从架构、工作流到 Python 技术栈落地
开发语言·python·架构