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

相关推荐
m0_748240252 小时前
Windows编程+使用C++编写EXE加壳程序
开发语言·c++·windows
兮兮能吃能睡4 小时前
R语言模型分析(一)(1)
开发语言·r语言
wuk9985 小时前
基于有限差分法的二维平面热传导模型MATLAB实现
开发语言·matlab·平面
孤狼warrior6 小时前
爬虫进阶 JS逆向基础超详细,解锁加密数据
javascript·爬虫
前端炒粉7 小时前
18.矩阵置零(原地算法)
javascript·线性代数·算法·矩阵
listhi5207 小时前
利用React Hooks简化状态管理
前端·javascript·react.js
初见无风7 小时前
2.5 Lua代码中string类型常用API
开发语言·lua·lua5.4
做运维的阿瑞7 小时前
用 Python 构建稳健的数据分析流水线
开发语言·python·数据分析
华仔啊7 小时前
这个Vue3旋转菜单组件让项目颜值提升200%!支持多种主题,拿来即用
前端·javascript·css
左师佑图7 小时前
综合案例:Python 数据处理——从Excel文件到数据分析
开发语言·python·数据分析·excel·pandas