为什么当我将 SVG 导入 React 时，所有组元素都被删除了？答案

【问题标题】：Why when I import an SVG into React, are all the group elements removed?为什么当我将 SVG 导入 React 时，所有组元素都被删除了？
【发布时间】：2022-01-11 14:35:00
【问题描述】：

我尝试使用 babel 插件 babel-plugin-inline-react-svg 和 Webpack 加载器 @svgr/webpack - 但在成功将我的 SVG 导入 React 后，所有组元素都被删除了。

即我可以导入为...

import MySVG from '../assets/images/mysvg.svg'

或

import { ReactComponent as MySVG } from '../assets/images/mysvg.svg'

在我的源 SVG 文件中，我的每个 group 元素都有一个 ID 属性，我计划用它来通过样式组件为 SVG 的各个部分设置动画，例如

<g id="foo"><path..../></g>

...但是所有<g> 元素都被删除了！

我从 Adobe Illustrator 中导出 SVG，图层名称作为组 ID。我目前正在使用最新版本的 Next.js 对此进行测试

想法？

【问题讨论】：

标签： reactjs svg

【解决方案1】：

好吧，稍微深入研究一下 SVGR 文档...

https://github.com/svg/svgo

将以下内容添加到 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
  },

然后创建一个 svgo.config.js 文件，并将其放在 next.js 项目的根目录中，使用以下选项...

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

【讨论】：

【解决方案2】：

#如果asset目录下的图片是mysvg.svg

import mysvg from "../assets/images/mysvg.svg";

【讨论】：