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

相关推荐
We་ct1 小时前
LeetCode 5. 最长回文子串:DP + 中心扩展
前端·javascript·算法·leetcode·typescript
JAVA面经实录9175 小时前
Java企业级工程化·终极完整版背诵手册(无遗漏、全覆盖、面试+落地通用)
java·开发语言·面试
周杰伦fans6 小时前
AutoCAD .NET 二次开发:深入理解 EntityJig 的工作原理与正确实现
开发语言·.net
Bat U7 小时前
JavaEE|多线程初阶(七)
java·开发语言
谭欣辰8 小时前
C++ 排列组合完整指南
开发语言·c++·算法
foundbug9999 小时前
自适应滤除直达波干扰的MATLAB实现
开发语言·算法·matlab
XDH_CS9 小时前
MySQL 8.0 安装与 MySQL Workbench 使用全流程(超详细教程)
开发语言·数据库·mysql
小短腿的代码世界9 小时前
Qt实时盈亏计算深度解析:从持仓数据到动态盈亏展示
开发语言·qt
小康小小涵9 小时前
基于ESP32S3实现无人机RID模块底层源码编译
linux·开发语言·python