Как правильно использовать `material-icons`?

Question

Я использую 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'

Интересно, они одинаковые? Или чем отличается?

Answer 1

Если вы используете Material-UI, я (и они) предлагаем использовать их с SVGIcons, пакетом @material-ui/icons.Обычно я смотрю значки на том веб-сайте, который вы разместили, и извлекаю их из @material-ui/icons.

Например, на этом веб-сайте вы увидите значок с именем alarm_on, который вы импортируете из этого пакета.как import YourIcon from '@material-ui/icons/AlarmOn'.

И причина, по которой мне нравится это делать, а не использовать Icon Fonts, заключается в том, что когда люди с плохими соединениями пытаются загрузить ваше приложение, значок может даже не загрузиться, и они увидят уродливое«alarm_on» в виде обычного текста, где будет значок.

Взгляните на раздел использования здесь.