[next.js] svgr/webpack

news/2024/7/9 1:48:03

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


http://lihuaxi.xjx100.cn/news/2218114.html

相关文章

线程相关的基本方法

1.线程等待(wait) 调用该方法后,线程会释放锁;线程进入到WATING状态;调用notifyAll()和notify()进行唤醒。 2.线程睡眠(sleep) 调用该方法不会释放锁(抱着锁睡);线程进入TIMED-…

【leetcode刷题】面试经典150题 , 27. 移除元素

leetcode刷题 面试经典150 27. 移除元素 难度:简单 文章目录 一、题目内容二、自己实现代码2.1 方法一:直接硬找2.1.1 实现思路2.1.2 实现代码2.1.3 结果分析 2.2 方法二:排序整体删除再补充2.1.1 实现思路2.1.2 实现代码2.1.3 结果分析 三、…

Gauss200使用分享

登录、授权控制 解锁账户 su - omm gsql -d db_rdb -p 8000 -ralter user ado_user account unlock; alter user sig_qry_rpt account unlock;参数控制 && 优化参考 只读模式解锁 su - omm gs_guc reload -Z coordinator -Z datanode -N all -I all -c "defau…

探索Napier:Kotlin Multiplatform的日志记录库

探索Napier:Kotlin Multiplatform的日志记录库 在现代软件开发中,日志记录是不可或缺的部分,它帮助开发者追踪应用的行为和调试问题。对于Kotlin Multiplatform项目而言,能够在多个平台上统一日志记录的方法显得尤为重要。Napier…

iText7画发票PDF——小tips

itext7教程: 1、https://blog.csdn.net/allway2/article/details/124295097 2、https://max.book118.com/html/2017/0720/123235195.shtm 3、https://www.cnblogs.com/fonks/p/15090635.html 4、https://www.cnblogs.com/sky-chen/p/13026203.html 5、官方&#xff…

【React】如何使用npm run start命令运行两个服务

我们开发前端项目时,有时候需要本地 mock 数据,这样就需要启动两个服务,一个是接口服务,一个是前端项目。可以安装一个插件来帮助我们通过一个命令启动两个服务。 方法一 添加& npm run server 注意:Windows系统…

AI导航网

文章目录 1、[AI导航网](https://www.ainav.cn/) 1、AI导航网 https://www.ainav.cn/

C# Log4Net不输出日志的解决方法,请看到最后,最后一个方案在大部分情况下能够解决你的问题

当您在C#项目中使用Log4Net时,如果发现日志没有按预期输出,可以尝试以下解决方法来诊断和解决问题,请看到最后,最后一个方案在大部分情况下能够解决你的问题: 检查配置文件路径: 确保log4net.Config.XmlConfigurator的…