[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 组件。

相关推荐
lly202406几秒前
Lua 循环
开发语言
※※冰馨※※几秒前
【QT】初始化显示时正常,操作刷新后布局显示问题。
开发语言·c++·windows·qt
D_FW2 分钟前
数据结构第四章:串
java·开发语言
_pengliang2 分钟前
react native ios 2个modal第二个不显示
javascript·react native·react.js
Dylan的码园2 分钟前
JAVA中对象的几种比较
java·开发语言
数据大魔方2 分钟前
【期货量化实战】威廉指标(WR)策略:精准捕捉超买超卖信号(Python源码)
开发语言·数据库·python·算法·github·程序员创富
纳兰瑞雪3 分钟前
nodeJs electron程式开发demo
开发语言·前端·javascript
亮子AI3 分钟前
【Python】Typer应用如何打包为Windows下的.exe文件?
开发语言·windows·python
Lhan.zzZ5 分钟前
嵌入式Qt接收串口数据错乱问题分析:缓冲区残留数据的陷阱
开发语言·c++·qt
CCPC不拿奖不改名12 分钟前
Python基础:python语言中的文件操作+面试题目
开发语言·数据结构·人工智能·python·学习·面试·职场和发展