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

相关推荐
朝朝辞暮i5 分钟前
C++ 第 15 课:指针 * 和地址 &
开发语言·c++
linux_cfan8 分钟前
videojs v10 源代码系列解读:35 · HLS 解析器:multivariant 与 media playlist
前端·javascript·音视频
奶茶树9 分钟前
【C++】14. C++11新特性【下】
开发语言·c++
web打印社区11 分钟前
汽修 / 4S 店:维修工单、结算单网页怎么静默出纸
开发语言·前端·javascript·chrome·ecmascript
Sirens.14 分钟前
Java多线程实例:单例模式、阻塞队列、线程池与定时器
java·开发语言·单例模式
liangshanbo121524 分钟前
Webpack的分包策略面试题
前端·webpack·node.js
沫璃染墨29 分钟前
《从零入门Linux系统篇(五十三):线程篇·六——线程互斥详解:从并发问题到mutex互斥锁》
linux·运维·服务器·开发语言·后端·架构·系统架构
老王爱玩车32 分钟前
深入理解指针6
c语言·开发语言·学习
Eloudy40 分钟前
全文 - version.A - AMBA CHI Chip-to-Chip(C2C)
java·开发语言·数据库·gpu·chiplet
秋名RG1 小时前
Java历代LTS版本新特性详解(代码增强版)
java·开发语言·python