Разница между командами импорта
В чем смысловая разница между
import {
FaceOutline as FaceIcon,
Key as KeyIcon
} from '@iconify/icons-mdi';
и
import FaceIcon from '@iconify/icons-mdi/face-outline';
import KeyIcon from '@iconify-icons/mdi/key';
В то время как последний работает, первый не работает.
Сообщение об ошибке говорит, что @iconify/icons-mdi не найден?!
`
Кстати: с другими пакетами все в порядке. Пример:
import {
Menu as MenuIcon,
ChevronRight as ChevronRightIcon
} from '@material-ui/icons';
Также правильны ли эти пути импорта? У вас есть косые черты и тире в разных точках пути from? Похоже, @iconify/icons-mdi правильный. Также вы уверены, что это точное сообщение об ошибке? Обычно сообщение больше похоже на «модуль X не содержит экспорта Y» или что-то в этом роде.
Ответы 2
Все зависит от того, что и как экспортирует библиотека.
Если библиотека использует экспорт named, вы можете использовать этот синтаксис:
import { some } from 'some;'
Если модуль экспортирует только экспорт default, вам придется использовать следующую запись:
import some from 'some;'
Чтобы лучше разобраться в этой теме, предлагаю вам прочитать следующую статью
Это зависит от того, как модули экспортируются.
В примере @material-ui будет файл index.js, расположенный в корне, содержащий именованные экспорты для других файлов. Это не является обязательным требованием, поэтому не все пакеты позволяют это сделать.
Взгляните на исходный код material-ui. Вы можете видеть здесь, что этот файл экспортирует все значки, используя именованный экспорт.
Однако, если вы перейдете к конкретному модулю значков, вы увидите, что он использует экспорт по умолчанию.
Вот почему вы можете сделать это более чем одним способом.
Что касается @iconify/icons-mdi, я не знаю, содержат ли они этот индексный файл, поэтому вы можете импортировать или не импортировать в обоих направлениях. У меня нет опыта работы с этой библиотекой, как с material-ui, но в документации, которую я нашел, нигде не упоминается именованный импорт.
Вы можете узнать больше о различиях между именованным импортом и импортом по умолчанию в здесь.
Разница в экспорте. Второй работает, поэтому экспорты называются
FaceIconиKeyIcon, а в первом вы пытаетесь импортироватьFaceOutlineиKey- вам нужно поменять местами привязки «как» следующим образом:FaceIcon as FaceOutline, KeyIcon as Key