Есть ли список того, как использовать значки материала-ui в папке svg-icons?

Я хочу использовать значки material-ui в папке svg-icons, которые я сделал с установкой npm, но реализации каждого значка в каждом файле js имеют различный импорт, как в действии, в редакторе и т.д. Мне пришлось посмотреть через файл js, чтобы найти, как импортировать каждый значок. Мне нужна документация или сайт, который позволяет копировать и вставлять импорт каждой иконки.

Я искал значок **navigate next** в Google Design и нашел его в

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

Ответы

Ответ 1

Pre v1

Вы можете просто найти категорию и имя на значках.

Каждый SvgIcon будет отображаться на:

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

Например, если мне нужен значок баланса счета, который является частью категории действия, которую я бы импортировал.

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

Ответ 2

Вы можете искать имена значков в подкаталоге вашего проекта 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

Ответ 4

material-ui @v1.0.0-beta.41 устарела и в material-ui @v1.0.0-beta.42 не имеет модуля svg-icons (material-ui/svg-icons)  Итак, чтобы использовать модуль, представленный в svg-icons, теперь мы должны установить материал-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';

Пример:

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

Материально-щ-иконки

npm install --save material-ui-icons

Несколько модулей, которых нет в material-ui @v1.0.0-beta.42 и которые присутствуют в значках "материал-интерфейс":

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