Как правильно использовать `material-icons`?
Я использую material-ui в своем проекте реагирования. Я обнаружил, что есть два разных способа использования их значков.
Один с этого веб-сайта: https://material.io/tools/icons/?icon=3d_rotation&style=baseline. Вы можете загрузить значок на левой панели, нажав на него. Или вы можете установить material-design-icons на свой проект.
Другой способ - импортировать их, например:
import SearchIcon from '@material-ui/icons/Search';
import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
import Close from '@material-ui/icons/Close'
Интересно, они одинаковые? Или чем отличается?
Ответы 1
Если вы используете Material-UI, я (и они) советую использовать их с SVGIcons, пакетом @material-ui/icons. Что я обычно делаю, так это ищу значки на том веб-сайте, который вы разместили, и извлекаю их из @material-ui/icons.
Например, на этом веб-сайте вы увидите один из них под названием alarm_on, и вы импортируете его из этого пакета, например import YourIcon from '@material-ui/icons/AlarmOn'.
И причина, по которой мне нравится делать это, а не использовать Icon Fonts, заключается в том, что когда люди с плохим подключением пытаются загрузить ваше приложение, значок может даже не загрузиться, и они увидят уродливое «alarm_on» в обычном тексте, где значок должен быть. .