背景
最近需要在 Next.js 项目中使用 SVG 为可控的路径动画提供 Path。但是发现 Next.js 中默认不能直接引入 SVG 作为 React 组件。因为搜索到的解决方案很多，而且有些已经不具备时效性，所以在这里做个记录。
安装并配置 @svgr/webpack
yarn add @svgr/webpack
- 配置
next.config.js
- 直接将 SVG 作为组件引入
import Path from ‘./path.svg’当完成这些时，已经可以将 SVG 作为 React 组件使用了，但是在 svg 文件中为元素添加的 id 却不见了，如果不想 id 属性被清除。还需要引入svgo。
- 创建并配置
svgo.config.js来禁用cleanupIDs配置。