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

Question

我想使用我用 npm install 完成的 svg-icons 文件夹中的 material-ui 图标，但是每个 js 文件上的每个图标的实现都有不同的导入，就像动作或编辑器中的那些一样。我必须查看 js 文件才能找到如何导入每个图标。我想要一个专门允许我复制粘贴每个图标的导入的文档或网站。

我正在寻找来自 google design 的 **navigate next** 图标并在

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

Answer 1

Pre 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';

注意空格会变成破折号。所以你想要的列表在上面的链接上。

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

ma​​terial-ui @v1.0.0-beta.41 已弃用，并且在 material-ui @v1.0.0-beta.42 中它没有 svg-icons 模块（material-ui/svg-icons） 因此，要使用 svg-icons 中存在的模块，我们现在不需要安装 material-ui-icons。

**我遇到了这个错误，经过搜索才知道。 **

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';

示例：

安装material-ui @v1.0.0-beta.42后也安装 material-ui-icons 链接：

material-ui-icons

npm install --save material-ui-icons

material-ui @v1.0.0-beta.42 中不存在的几个模块是 并且存在于“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