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

相关推荐
黑夜照亮前行的路4 小时前
JavaScript 性能优化实战技术指南
javascript·性能优化
fs哆哆4 小时前
在VB.net中一维数组,与VBA有什么区别
java·开发语言·数据结构·算法·.net
johnZhangqi4 小时前
深圳大学-计算机信息管理课程实验 C++ 自考模拟题
java·开发语言·c++
Sally璐璐5 小时前
Go语言变量声明与初始化详解
java·开发语言·golang
Stringzhua5 小时前
Vue数据的变更操作与表单数据的收集【6】
前端·javascript·vue.js
luofeiju5 小时前
交叉编译笔记
开发语言
StudyWinter6 小时前
【C++】仿函数和回调函数
开发语言·c++·回调函数·仿函数
无羡仙6 小时前
Webpack 核心实战:从零搭建支持热更新与 Babel 转译的现代前端环境
前端·webpack·前端框架
乐~~~6 小时前
el-date-picker type=daterange 日期范围限制
javascript·vue.js·elementui
C4程序员6 小时前
北京JAVA基础面试30天打卡14
java·开发语言·面试