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

相关推荐
2601_9615934226 分钟前
Rust 开发环境配置繁琐?RustRover 开箱即用搞定编码调试
开发语言·后端·macos·rust
HZZD_HZZD1 小时前
DL/T 645-2026新国标深度解读与智能电表协议适配实战:从帧结构变化到Java采集器升级的全链路改造方案
java·开发语言
多加点辣也没关系3 小时前
JavaScript|第4章:类型转换
开发语言·javascript
聪慧的水蜜桃3 小时前
【YFIOs】用C#开发硬件之设备上云
开发语言·c#
yqcoder3 小时前
httpOnly 是什么,又有什么用?
开发语言·前端·javascript
烬羽4 小时前
还在手动拼路径、写回调地狱?一文吃透 Node.js 的 path 和 fs
javascript·程序员·node.js
mONESY4 小时前
LangChain JS 高性能并行执行解析、工具调用底层封装
javascript
wuqingshun3141594 小时前
重写equals而不重写hashCode,会出什么问题?
java·开发语言
飞猪~4 小时前
LangChain python 版本 第一集
开发语言·python·langchain
迅速的自行车5 小时前
从一段模板说起
前端·javascript·vue.js