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

相关推荐
2501_9454248015 分钟前
C++编译期矩阵运算
开发语言·c++·算法
yy我不解释19 分钟前
关于comfyui的mmaudio音频生成插件时时间不一致问题(三)
开发语言·python·ai作画·音视频·comfyui
2301_8154829321 分钟前
C++中的类型标签分发
开发语言·c++·算法
SuperEugene21 分钟前
Vue3 模板语法规范实战:v-if/v-for 不混用 + 表达式精简,避坑指南|Vue 组件与模板规范篇
开发语言·前端·javascript·vue.js·前端框架
xushichao198926 分钟前
代码生成优化技术
开发语言·c++·算法
Luna-player28 分钟前
Vue 3 + Vue Router 的路由配置,简单示例
前端·javascript·vue.js
leaves falling35 分钟前
C++类和对象(1)
开发语言·c++
敲代码的约德尔人39 分钟前
JavaScript 设计模式完全指南
javascript·设计模式
2401_8732046540 分钟前
模板编译期循环展开
开发语言·c++·算法