Question

我在我的React项目中使用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，则我（和他们）建议使用它们的方式是使用@material-ui/icons软件包SVGIcons。我通常要做的是在您发布的网站上查找图标，并将其从@material-ui/icons中拉出。

例如，在该网站上，您会看到一个名为alarm_on的网站，就像从import YourIcon from '@material-ui/icons/AlarmOn'这样的包中导入它一样。

我喜欢这样做而不使用图标字体的原因是，当连接不良的人尝试加载您的应用时，该图标甚至可能无法加载，并且他们会在纯文本中看到一个难看的“ alarm_on”，图标。

Take a look at the usage section here.

什么是使用“材料图标”的正确方法？

1 个答案: