Как изменить иконку svgr webpack?

Спасибо за ваш вопрос! Чтобы изменить иконку вебпака, сгенерированную с помощью svgr, вам необходимо выполнить следующие шаги:

Шаг 1: Установка пакета @svgr/webpack

npm install @svgr/webpack --save-dev

Шаг 2: Добавление настроек для загрузчика вебпака
Далее, вам нужно добавить настройки для загрузчика изображений в файл webpack.config.js. Ниже показан пример настроек:

module.exports = {
  //...
  module: {
    rules: [
      {
        test: /.svg$/,
        use: [
          '@svgr/webpack',
          'url-loader'
        ]
      }
    ]
  }
}

Этот код добавляет новое правило для файлов с расширением .svg. Используя пакет @svgr/webpack, он трансформирует файлы SVG в компоненты React, которые вы затем можете использовать в своем коде.

Шаг 3: Настройка иконки по умолчанию
По умолчанию, svgr генерирует компоненты React с использованием стандартной иконки. Если вы хотите изменить эту иконку на вашу собственную, вам нужно просто создать компонент React, который будет отображать вашу иконку.

Например, создайте файл CustomIcon.js:

import React from 'react';
import { ReactComponent as MyIcon } from './my-icon.svg'; // путь к вашей собственной иконке SVG

const CustomIcon = () => <MyIcon />;

export default CustomIcon;

Шаг 4: Использование своей иконки
Теперь вы можете использовать свою собственную иконку в своем коде, например:

import React from 'react';
import ReactDOM from 'react-dom';
import CustomIcon from './CustomIcon';

ReactDOM.render(
  <CustomIcon />,
  document.getElementById('root')
);

Теперь, при сборке вашего проекта с вебпаком, ваша иконка будет использоваться вместо стандартной иконки svgr.

Вот и все! Теперь вы знаете, как изменить иконку svgr с помощью вебпака. Вы можете настроить свою собственную иконку и использовать ее в своем проекте.