svg-icons 文件夹中是否有关于如何使用 material-ui 图标的列表？

Question

我想使用我用 npm install 做的 svg-icons 文件夹中的 material-ui 图标，但是每个 js 文件上每个图标的实现都有不同的导入在操作或编辑器等中。我必须查看 js 文件以找到如何导入每个图标。我想要一个专门让我复制粘贴每个图标导入的文档或网站。

我正在寻找来自 google 设计的 **navigate next** 图标，并在

中找到了它

import ImageNavigateNext from 'material-ui/svg-icons/image/navigate-next';

Answer 1

前 v1

您可以在 Icons 上查找类别和名称。

每个 SvgIcon 将映射到：

import MyIconName from 'material-ui/svg-icons/<category>/<name>';

例如，如果我想要 account balance 图标，它是我要导入的 action 类别的一部分。

import BalanceIcon from 'material-ui/svg-icons/action/account-balance';

注意空格会变成破折号。所以你要的名单就在上面的link

v1

新版本的 material-ui 图标在它们自己的包中 material-ui-icons。现在您只需要查找名称和 PascalCase 即可找到正确的名称。该类别不再相关。所以：

import BalanceIcon from 'material-ui/svg-icons/action/account-balance';

变为：

import BalanceIcon from 'material-ui-icons/AccountBalance';

Answer 2

material-ui @v1.0.0-beta.41 已弃用，在 material-ui @v1.0.0-beta 中.42 它没有 svg-icons 模块 (material-ui/svg-icons) 所以现在要使用 svg-icons 中的模块，我们必须安装 material-ui-icons.

**I faced this error and after searching got to know. **

Module not found:Can't resolve 'material-ui/MenuItem' 

Module not found: Can't resolve 'material-ui/svg-icons/file/file-download' 

Module not found: Can't resolve 'material-ui/svg-icons/content/content-copy'

Module not found: Can't resolve 'material-ui/svg-icons/toggle/star-border'

Module not found: Can't resolve 'material-ui/svg-icons/action/delete' 

Module not found: Can't resolve 'material-ui/svg-icons/image/remove-red-eye';

示例：

After installing material-ui @v1.0.0-beta.42 also install material-ui-icons link:

material-ui-icons

npm install --save material-ui-icons

Few modules which are not present in material-ui @v1.0.0-beta.42 are and that are present in 'material-ui-icons':

// import MenuItem from 'material-ui/MenuItem';//this was used in version material-ui @v1.0.0-beta.41
import { MenuItem } from 'material-ui/Menu';//Now in version material-ui @v1.0.0-beta.42, also need to install material-ui-icons

// import RemoveRedEye from 'material-ui/svg-icons/image/remove-red-eye';
import RemoveRedEye from 'material-ui-icons/RemoveRedEye';

import PersonAdd from 'material-ui-icons/PersonAdd';

// import ContentCopy from 'material-ui/svg-icons/content/content-copy';
import ContentCopy from 'material-ui-icons/ContentCopy';

// import Download from 'material-ui/svg-icons/file/file-download';
import FileDownload from 'material-ui-icons/FileDownload';

// import Delete from 'material-ui/svg-icons/action/delete';
import Delete from 'material-ui-icons/Delete';

// import StarBorder from 'material-ui/svg-icons/toggle/star-border';
import StarBorder from 'material-ui-icons/StarBorder';

Answer 3

您可以在项目子目录node_modules/@material-ui/icons中搜索图标名称。

ls node_modules/@material-ui/icons/*.js | grep -v 'Outlined' | grep -v 'Rounded' | grep -v 'Sharp' | grep -v 'TwoTone'

node_modules/@material-ui/icons/AccessAlarm.js
node_modules/@material-ui/icons/AccessAlarms.js
node_modules/@material-ui/icons/Accessibility.js
node_modules/@material-ui/icons/AccessibilityNew.js
node_modules/@material-ui/icons/AccessibleForward.js
node_modules/@material-ui/icons/Accessible.js
node_modules/@material-ui/icons/AccessTime.js
node_modules/@material-ui/icons/AccountBalance.js
node_modules/@material-ui/icons/AccountBalanceWallet.js
node_modules/@material-ui/icons/AccountBox.js
node_modules/@material-ui/icons/AccountCircle.js
node_modules/@material-ui/icons/AcUnit.js

svg-icons 文件夹中是否有关于如何使用 material-ui 图标的列表？

Is there a list on how to use material-ui icons in the svg-icons folder?

svg

material-ui