🌞Moon Will Know

🥸

在 Next.js 项目中将 SVG 作为组件使用

背景

最近需要在 Next.js 项目中使用 SVG 为可控的路径动画提供 Path。但是发现 Next.js 中默认不能直接引入 SVG 作为 React 组件。因为搜索到的解决方案很多，而且有些已经不具备时效性，所以在这里做个记录。

安装并配置 `@svgr/webpack`

yarn add @svgr/webpack

配置 next.config.js


// ...
webpack(config) {
    config.module.rules.push(
      {
        type: 'asset',
        resourceQuery: /url/, // *.svg?url
      },
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        use: ['@svgr/webpack'],
      }
    );

    return config;
  }
// ...

直接将 SVG 作为组件引入

import Path from ‘./path.svg’

当完成这些时，已经可以将 SVG 作为 React 组件使用了，但是在 svg 文件中为元素添加的 id 却不见了，如果不想 id 属性被清除。还需要引入 svgo 。

创建并配置 svgo.config.js 来禁用 cleanupIDs 配置。


module.exports = {
    svgo: true,
    plugins: [
      {
        name: 'preset-default',
        params: {
          overrides: {
            // or disable plugins
            cleanupIDs: false,
            prefixIds: false,
          },
        },
      },
    ],
  }