Блог

Я пытался использовать как плагин 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-файле каждый элемент моей группы имеет атрибут ID, который я планировал использовать для анимации частей SVG с помощью стилизованного компонента, например

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

… но все <g> элементы удаляются!

Я экспортирую SVG из Adobe Illustrator с именами слоев в качестве идентификаторов групп. В настоящее время я тестирую это с последней версией Next.js

Мысли?

Хорошо, я немного покопался в документах SVGR…

https://github.com/svg/svgo

1. добавьте следующее в 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
  },
 

2. затем создайте 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,
        },
      },
    },
  ],
}
 

#Если изображение в каталоге ресурсов mysvg.svg

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