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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/852478.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vscode 连接 GitHub

文章目录 连接 GitHub一、通过 SSH 连接 github二、通过 HTTPS 连接 github 连接 GitHub 在 vscode 中首次使用 git push 命令时会要求输入 github 账户的 username 和 password,这种基本身份验证在 2021.8.13 以前还是可以的,之后的话,就会…

Luma AI 推出梦幻机:据说吊打Sora和快手可灵(KLING)|TodayAI

近日,美国初创公司 Luma AI 宣布推出其最新的文本生成视频工具——梦幻机(Dream Machine)。这一消息发布的时间正好在中国科技公司快手推出其文本生成视频模型可灵(KLING)几天之后,标志着视频生成领域的又一…

Android Compose 十一:常用组件列表 compose自己个的 下拉刷新

列表下拉刷新 material3 还没有下拉刷新功能material:1.3.0 之后 swiperefresh 被弃用 被PullRefresh替代使用PullRefresh 需要添加依赖 implementation ‘androidx.compose.material:material:1.6.8’ 先上代码 var refreshing by remember {mutableStateOf(false)} val…

线性代数|机器学习-P12Ax=b条件下x最小值问题

文章目录 1. Axb下的最值问题-图形转换2. Gram-Schmidt 标准形3. 迭代法-Krylov子空间法 1. Axb下的最值问题-图形转换 假设我们有一个直线方程如下: 3 x 1 4 x 2 1 \begin{equation} 3x_14x_21 \end{equation} 3x1​4x2​1​​ 在二维平面上,各个范…

集成学习 #数据挖掘 #Python

集成学习是一种机器学习方法,它通过结合多个模型的预测结果来提高整体性能和稳定性。这种方法的主要思想是“集合智慧”,通过将多个模型(比如决策树、随机森林、梯度提升机等)的预测集成起来,可以减少单个模型的过拟合…

C# WPF入门学习主线篇(三十一)—— MVVM模式简介

C# WPF入门学习主线篇(三十一)—— MVVM模式简介 MVVM(Model-View-ViewModel)模式是WPF开发中的一种重要架构模式。它通过将用户界面(View)与业务逻辑和数据(Model)分离,…

【文献阅读】一种多波束阵列重构导航抗干扰算法

引言 针对导航信号在近地表的信号十分微弱、抗干扰能力差的问题,文章提出了自适应波束形成技术。 自适应波束形成技术可以分为调零抗干扰算法和多波束抗干扰算法。 调零抗干扰算法主要应用功率倒置技术,充分利用导航信号功率低于环境噪声功率的特点&…

三个pdf工具和浏览软件(pdftk,muppdf,epdfview)

安装pdftk pdftk是一款功能强大的PDF处理工具,主要用于对PDF文件进行各种操作。它提供了丰富的功能,包括但不限于合并、拆分、旋转、加密、解密、添加水印、从PDF文档中解出附件等。pdftk分为图形界面版本和命令行版本,适用于不同的用户需求…

使用ant-design/cssinjs向plasmo浏览器插件的内容脚本content中注入antd的ui组件样式

之前写过一篇文章用来向content内容脚本注入antd的ui:https://xiaoshen.blog.csdn.net/article/details/136418199,但是方法就是比较繁琐,需要将antd的样式拷贝出来,然后贴到一个单独的css样式文件中,然后引入到内容脚…

活动会议发布平台,让你我的距离再近点

随着科技、经济的不断发展,生活水平的不断提高,人们不仅在工作中追求快捷高效的工作工具,生活中对参加各项活动的热情也不断提升。活动会议发布平台以其便捷、高效的使用方式被越来越多人采用。 一. 活动会议发布平台的用户画像 …

博物馆藏品管理的重要性

博物馆是人们了解历史文化、传承文明的重要场所。而博物馆的藏品管理是博物馆的核心工作之一,对于展现博物馆的魅力、吸引观众的眼球有着至关重要的影响。并且博物馆藏品管理是一项复杂且专业的工作,它涉及到多个方面,包括但不限于藏品的收集…

租房项目之并发缺失数据问题

前奏:本项目是一个基于django的租房信息获取项目。本次博客牵扯到两个版本,集中式分布以及分布式部署(两个版本的ui不同,集中式用的是老版ui,分布式使用的是新版ui); 项目链接:http…

Linux2-系统自有服务防火墙与计划任务

一、什么是防火墙 防火墙主要用于防范网络攻击,防火墙一般分为软件防火墙、硬件防火墙 1、Windows中的防护墙设置 2、防火墙的作用 3、Linux中的防火墙分类 Centos6、Centos6>防火墙>iptables防火墙 防火墙系统管理工具 Centos7>防火墙>firewalld防火…

基于STM32的简易智能家居设计(嘉立创支持)

一、项目功能概述 1、OLED显示温湿度、空气质量,并可以设置报警阈值 2、设置4个继电器开关,分别控制灯、空调、开关、风扇 3、设计一个离线语音识别系统,可以语音控制打开指定开关、并且可以显示识别命令词到OLED屏上 4、OLED实时显示&#…

Github 2024-06-14 开源项目日报Top10

根据Github Trendings的统计,今日(2024-06-14统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量JavaScript项目2Python项目2非开发语言项目2TypeScript项目1Dart项目1Rust项目1Lua项目1Java项目1Jupyter Notebook项目1从零开始构建你喜爱的技…

大模型Prompt-Tuning技术入门

Prompt-Tuning方法 1 NLP任务四种范式 目前学术界一般将NLP任务的发展分为四个阶段,即NLP四范式: 第一范式:基于「传统机器学习模型」的范式,如TF-IDF特征朴素贝叶斯等机器算法;第二范式:基于「深度学习模…

解决CentOS的yum命令失效的问题

近日笔者对一台装有 CentOS 7.9 系统的服务器反复折腾,玩到最后发现 yum 命令用不了,总是报下面的错误信息: There was a problem importing one of the Python modules required to run yum. The error leading to this problem was:/usr/l…

Vitis HLS 学习笔记--Vitis Accelerated Libraries介绍

1. 简介 Vitis Accelerated Libraries,包含很多现成的库,这些库都是开源的,也就是说代码是公开的,而且已经优化过,可以让程序运行得更快。你不需要改变太多你的代码,就能让你的程序速度提升。 这些库有很…

ROS 自动驾驶多点巡航

ROS 自动驾驶多点巡航: 1、首先创建工作空间: 基于我们的artca_ws; 2、创建功能包: 进入src目录,输入命令: catkin_create_pkg point_pkg std_msgs rospy roscpptest_pkg 为功能包名,后面两个是依赖&a…

H5的3D展示有可能代替PC传统3D展示么?

H5的3D展示技术正在快速发展,并且随着5G网络的普及和手机硬件性能的提升,H5的3D展示在某些方面已经能够接近甚至超越传统PC上的3D展示效果,比如 博维数孪 的渲染能力及效果。但H5和PC的3D展示互相之间是各有优势领域和行业支持,短…