Не удается импортировать SVG в Next.js

Вам нужно предоставить загрузчик веб-пакетов, который будет обрабатывать импорт SVG, один из известных — СВГР.

Чтобы настроить его для работы со следующим, вам нужно добавить в свой файл next.config.js использование загрузчика, например:

// next.config.js
    
module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      issuer: {
        test: /\.(js|ts)x?$/,
       // for webpack 5 use
       // { and: [/\.(js|ts)x?$/] }
      },
      
      use: ['@svgr/webpack'],
    });

    return config;
  },
};

Для получения дополнительной информации о конфигурации проверить документы.

Не забывайте, чтобы сначала установить @svgr/webpack:

$ npm install --save-dev @svgr/webpack

Редактировать

Я добавил раздел issuer, который ограничивает эти svg как компоненты только для svg, импортированных из файлов js / ts. Это позволяет настроить другое поведение для svg, которые импортируются из других типов файлов (например, .css).

Установите следующие изображения.

yarn add -D next-images

Создайте next.config.js в своем проекте.

// next.config.js
const withImages = require('next-images')
module.exports = withImages()

Это сработало для меня без какой-либо другой зависимости

// In next.config.js

module.exports = {
    webpack (config, options) {
        config.module.rules.push({
            test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 100000
                }
            }
        });
        return config;
    }
};

Вы можете использовать Babel-плагин-встроенный-реагировать-SVG

import React from 'react';
import CloseSVG from './close.svg';

const MyComponent = () => <CloseSVG />;

npm install --save-dev babel-plugin-inline-react-svg

// .babelrc
{
  "plugins": [
    "inline-react-svg"
  ]
}

Или смотрите ссылку для получения дополнительных инструкций.

Лично я предпочитаю плагин следующий-реагировать-SVG, который позволяет обрабатывать изображения SVG как компоненты React и автоматически встраивать их, подобно тому, как это делает приложение Create React.

Вот как это использовать:

1. Установить next-react-svg:

npm i next-react-svg

2. Добавьте необходимые настройки в next.config.js:

const withReactSvg = require('next-react-svg')
const path = require('path')

module.exports = withReactSvg({
  include: path.resolve(__dirname, 'src/assets/svg'),
  webpack(config, options) {
    return config
  }
})

Параметр include является обязательным и указывает на папку с изображениями SVG.

Если у вас уже есть какие-либо подключаемые модули для вашего Next.js, рассмотрите возможность использования следующий компоновщик-плагины для их правильного объединения.

3. Импортируйте свои SVG как обычные компоненты React:

import Logo from 'assets/svg/Logo.svg';

export default () => (
  <Logo />
);

Вот и все. Отныне Next.js будет включать изображения SVG, импортированные таким образом, в отображаемую разметку в виде тегов SVG.

Вы можете просто импортировать его через тег <img>.

<img src='./next.svg' alt='next' />

Просто убедитесь, что svg находится в общей папке.

Вы можете использовать next-plugin-svgr и next-compose-plugins для очистки плагинов (если они у вас есть):

// next.config.js
const withPlugins = require("next-compose-plugins");
const withSvgr = require("next-svgr");
 
module.exports = withPlugins([
  withSvgr
  // your other plugins here
]);

или просто next-plugin-svgr:

// next.config.js
const withSvgr = require('next-plugin-svgr');
 
module.exports = withSvgr({
  webpack(config, options) {
    return config;
  },
});

Источник: https://www.npmjs.com/package/next-plugin-svgr

Быстрый способ: <img> или <Image>

Не подходит для интерактивных SVG или если вы собираетесь манипулировать SVG с помощью внешнего CSS/JS.

Можно использовать официальный компонент next/image или тег img (как указано в этом отвечать).

Вам просто нужно переместить файл svg в public вместо static и сделать что-то вроде этого:

import Image from 'next/image';

// ...

<Image src = "/Rolling-1s-200px.svg" width = "2000" height = "2000" />

Но при использовании этого метода содержимое файла svg не будет присутствовать непосредственно в ответе; браузер получит тег <img src = "..." ...></img>.

Также нужно указать width и height, но можно посчитать из атрибута viewbox.

В Next.js v11 и выше вы также можете:

import Image from 'next/image';

import Illustration from '../static/Rolling-1s-200px.svg';

// ...

<Image src = {Illustration} />

// one needs to use `Illustration.src` to get the source URL
// <img src = {Illustration.src} ... />

Включение SVG внутри HTML (для webpack-5, TS)

принятый ответ показал, как это сделать с помощью webpack-4, но поскольку webpack-5 теперь используется по умолчанию, я делюсь соответствующей конфигурацией. Вы можете использовать его после установки @svgr/webpack (yarn add -D @svgr/webpack или npm install @svgr/webpack --save-dev):

// next.config.js
// https://github.com/gregberge/svgr/issues/551#issuecomment-839772396

module.exports = {
  // other configs...

  // future: { webpack5: true }, // -- not needed since Next.js v11.0.0
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: { and: [/\.(js|ts|md)x?$/] },
      use: [
        {
          loader: '@svgr/webpack',
          options: {
            prettier: false,
            svgo: true,
            svgoConfig: { plugins: [{ removeViewBox: false }] },
            titleProp: true,
          },
        },
      ],
    });
    return config;
  },
};

Если вы не используете options для загрузчика, вы можете просто написать это:

use: ['@svgr/webpack']

Если вы используете v6 of @svgr/webpack, вам нужно указать конфигурацию SVGO следующим образом:

// ...

plugins: [
  {
    name: 'preset-default',
    params: {
      overrides: { removeViewBox: false },
    },
  },
],

// ...

Если вы используете машинописный текст, вам необходимо определить соответствующие модули (в каталоге, откуда вы импортируете svg, или, возможно, добавить его в корень как <some-name>.d.ts и включить его tsconfig):

// index.d.ts

declare module '*.svg' {
  const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
  export default ReactComponent;
}

Затем вы можете использовать его как:

import Illustration from '../static/Rolling-1s-200px.svg';

// ...

<Illustration />

Примечание: Next.js v11.0.1+ объявили SVG как модули, экспортирующие any. Ваша пользовательская конфигурация не будет переопределять типы, установленные next-env.d.ts, если вы не исключите последний. См. это.

[УСТАРЕЛО (Фиксированный)] ОБНОВИТЬ :

Если вы используете Next.js v11.0.0, вы можете получать ошибки при импорте SVG. Пожалуйста, обновите до v11.0.1 или выше. Воспользуйтесь обходным решением, упомянутым в этот комментарий.

Как импортировать SVG в компонент Next.js?

Другое решение без установки какой-либо библиотеки

import React from "react";
export default function GoogleLogo() {
  return (
    <svg className = "svgIcon-use" width = "25" height = "37" viewBox = "0 0 25 25">
      <g fill = "none" fillRule = "evenodd">
        <path
          d = "M20.66 12.693c0-.603-.054-1.182-.155-1.738H12.5v3.287h4.575a3.91 3.91 0 0 1-1.697 2.566v2.133h2.747c1.608-1.48 2.535-3.65 2.535-6.24z"
          fill = "#4285F4"
        />
        <path
          d = "M12.5 21c2.295 0 4.22-.76 5.625-2.06l-2.747-2.132c-.76.51-1.734.81-2.878.81-2.214 0-4.088-1.494-4.756-3.503h-2.84v2.202A8.498 8.498 0 0 0 12.5 21z"
          fill = "#34A853"
        />
        <path
          d = "M7.744 14.115c-.17-.51-.267-1.055-.267-1.615s.097-1.105.267-1.615V8.683h-2.84A8.488 8.488 0 0 0 4 12.5c0 1.372.328 2.67.904 3.817l2.84-2.202z"
          fill = "#FBBC05"
        />
        <path
          d = "M12.5 7.38c1.248 0 2.368.43 3.25 1.272l2.437-2.438C16.715 4.842 14.79 4 12.5 4a8.497 8.497 0 0 0-7.596 4.683l2.84 2.202c.668-2.01 2.542-3.504 4.756-3.504z"
          fill = "#EA4335"
        />
      </g>
    </svg>
  );
}

и используйте:

import GoogleLogo from "./GoogleLogo";

  class Login extends React.Component {
    render() {
      return (
        <LoginLayout title = "Login Page">
          <div>
            <Link href = "/auth/google">
              <a className = "button">
                <div>
                  <span className = "svgIcon t-popup-svg">
                    <GoogleLogo />
                  </span>

                </div>
              </a>
            </Link>
          </div>
        </LoginLayout>
      );
    }
  }

Я попробовал первый ответ, но получил ошибку, так что это работает:

module.exports = {
webpack(config) {
  config.module.rules.push({
    test: /\.svg$/,
    use: ["@svgr/webpack"]
  });

  return config;
}};

С Next.js 12.0.9 и Webpack 5 это работает для меня:

yarn add --dev url-loader @svgr/webpack

// next.config.js
module.exports = {
    webpack(config, options) {
        config.module.rules.push({
          test: /\.svg$/,
          use: ['@svgr/webpack', 'url-loader'],
        });
    
        return config;
    },
  };

Если вы хотите использовать файлы SVG в своем коде БЕЗ КОНФИГУРАЦИИ ИЛИ УСТАНОВКИ ЗАВИСИМОСТИ и иметь полный контроль в атрибутах тега, лучшим решением будет преобразование файла SVG в компоненты JSX или TSX.

JSX-решение:

export const YourSVg = ({color, width, height}) => (
   <svg fill = {color} height = {height} width = {width}>
    ..rest of the svg tags...
   </svg>
)

TSX-решение:

   export const YourSVg:React.FC<{color:string, width:string, height:string}> =
       ({color, width, height}) => (
          <svg color = {color} height = {height} width = {width}>
            ..rest of the svg tags...
          </svg>
    )

Как это использовать?

может импортировать его как обычный компонент и использовать так же, как и раньше

например:

import YourSVg from '../from the path/path


<YourSVg color='red' width='10px' height='10px/>