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

相关推荐
Mintopia8 分钟前
Next.js自建部署:Docker + PM2 + Nginx
前端·javascript·全栈
艾小码10 分钟前
还在重复造轮子?3个Vue3组合函数让你开发效率翻倍!
前端·javascript·vue.js
一枚前端小能手11 分钟前
🎨 CSS-in-JS到底香不香?性能陷阱让我重新思考了
前端·javascript·css
NeverSettle_14 分钟前
2025年React 18 + React 19源码深度解析
javascript·react.js
Mintopia15 分钟前
AIGC在电商Web端的个性化推荐技术实现
前端·javascript·aigc
SamsongSSS25 分钟前
JavaScript逆向SM国密算法
javascript·算法·逆向
NeverSettle_28 分钟前
2025前端网络相关知识深度解析
前端·javascript·http
堕落年代31 分钟前
小红书JS SDK签名过程
开发语言·javascript·ecmascript
MediaTea33 分钟前
Python:math 库函数手册(双曲函数)
开发语言·python
muchu_CSDN36 分钟前
谷粒商城项目-P16快速开发-人人开源搭建后台管理系统
前端·javascript·vue.js