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

相关推荐
灰子学技术9 小时前
go response.Body.close()导致连接异常处理
开发语言·后端·golang
二十雨辰9 小时前
[python]-AI大模型
开发语言·人工智能·python
Yvonne爱编码10 小时前
JAVA数据结构 DAY6-栈和队列
java·开发语言·数据结构·python
Re.不晚10 小时前
JAVA进阶之路——无奖问答挑战1
java·开发语言
Daniel李华10 小时前
echarts使用案例
android·javascript·echarts
北原_春希10 小时前
如何在Vue3项目中引入并使用Echarts图表
前端·javascript·echarts
JY-HPS10 小时前
echarts天气折线图
javascript·vue.js·echarts
你这个代码我看不懂10 小时前
@ConditionalOnProperty不直接使用松绑定规则
java·开发语言
尽意啊10 小时前
echarts树图动态添加子节点
前端·javascript·echarts
吃面必吃蒜10 小时前
echarts 极坐标柱状图 如何定义柱子颜色
前端·javascript·echarts