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

相关推荐
lly20240623 分钟前
jQuery Mobile 表格
开发语言
惊讶的猫27 分钟前
探究StringBuilder和StringBuffer的线程安全问题
java·开发语言
m0_748233171 小时前
30秒掌握C++核心精髓
开发语言·c++
摘星编程1 小时前
OpenHarmony环境下React Native:自定义useTruncate文本截断
javascript·react native·react.js
Fleshy数模1 小时前
从数据获取到突破限制:Python爬虫进阶实战全攻略
java·开发语言
Duang007_1 小时前
【LeetCodeHot100 超详细Agent启发版本】字母异位词分组 (Group Anagrams)
开发语言·javascript·人工智能·python
froginwe112 小时前
Redis 管道技术
开发语言
u0109272712 小时前
C++中的RAII技术深入
开发语言·c++·算法
superman超哥2 小时前
Serde 性能优化的终极武器
开发语言·rust·编程语言·rust serde·serde性能优化·rust开发工具
一个响当当的名号3 小时前
lectrue9 索引并发控制
java·开发语言·数据库