ошибка импорта: иконка не экспортируется из antd

Question

Я создал приложение реагирования и использую Ant-Design (antd), в одном из файлов моего проекта я хочу использовать тег, но не могу. По-видимому, это проблема ANT V4.

Я использую следующий оператор импорта;

import { Icon } from 'antd',

и получаю следующую ошибку:

Attempted import error: 'Icon' is not exported from 'antd'.

---

есть ли решение использовать этот тег в v4?

---

Я знаю, что мы можем импортировать каждый значок и затем использовать его как тег, но он дает очень длинный код, если у нас есть несколько иконок

Answer 1

Весь способ управления иконками изменен в v4, от шрифтов до SVG. При использовании шрифтов не имеет значения, импортируете ли вы один или несколько значков, потому что в любом случае вы загружаете весь шрифт целиком. С SVG каждый значок имеет свой собственный модуль. Это дает преимущество, позволяя упаковщикам вытряхивать значки, которые не используются, уменьшая размер загружаемого файла.

Это, однако, означает необходимость импортировать их по отдельности.

Возможно, вы возможность создать свой собственный файл библиотеки, например,

// my-icons.js
import {
  Icon1,
  Icon2,
  Icon3,
  ...
} from '@ant-design/icons';

const myIcons = {
  Icon1,
  Icon2,
  Icon3,
  ...
};

export default myIcons;

// MyComponent.jsx
import Icons from './my-icons';

Это много в одном файле, но, по крайней мере, это только один файл.

Answer 2

Для импорта значков в v4:

импорт из @ ant-design / icons

import { SmileOutlined } from '@ant-design/icons';

<SmileOutlined />

или с использованием пакета совместимости

import { Icon } from '@ant-design/compatible';

<Icon type="smile" />

Угадайте, что второй соответствует вашим требованиям.

---

Вы можете проверить документ обновления с v3 до v4 для получения дополнительной информации об этом.