web-dev-qa-db-fra.com

Existe-t-il une liste sur l'utilisation des icônes Material-ui dans le dossier svg-icons?

Je souhaite utiliser les icônes Material-ui du dossier svg-icons que j'ai installé avec npm install, mais les implémentations de chaque icône sur chaque fichier js ont une importation différente, comme celles de l'action ou de l'éditeur, etc. via le fichier js pour savoir comment importer chaque icône. Je veux une documentation ou un site qui me permette spécifiquement de copier-coller l'importation de chaque icône, ce qui aiderait beaucoup, merci d'avance :)

Je cherchais l'icône **navigate next** de Google Design et l'ai trouvée dans 

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

svgmaterial-ui
12
6by3

Pre v1

Vous pouvez simplement rechercher la catégorie et le nom sur https://design.google.com/icons/ .

Chaque SvgIcon mappera vers:

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

Par exemple, si je souhaite que l’icône compte de solde, qui fait partie de la catégorie action, j’aimerais importer.

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

Notez que les espaces deviendront des tirets. Donc, la liste que vous voulez est sur le lien ci-dessus.

v1

Avec la nouvelle version de material-ui, les icônes sont dans leur propre package material-ui-icons . Maintenant, il vous suffit de rechercher le nom et PascalCase pour trouver le nom correct. La catégorie n'est plus pertinente. Alors:

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

Devient:

import BalanceIcon from 'material-ui-icons/AccountBalance';
32
Jeroen Wienk

Vous pouvez rechercher les noms des icônes dans votre sous-répertoire de projet 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
2
Alexander van Trijffel

material-ui @ v1.0.0-beta.41 est obsolète et, dans material-ui @ v1.0.0-beta.42, le module svg-icons (material-ui/svg-icons) n'est pas disponible Donc, pour utiliser le module présent dans svg-icons, nous n’avons pas encore installé material-ui-icons.

** J'ai fait face à cette erreur et après avoir cherché à savoir. **

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

Exemple:

Après avoir installé material-ui @ v1.0.0-beta.42, installez également lien material-ui-icons:

https://www.npmjs.com/package/material-ui-icons

npm install --save material-ui-icons

Peu de modules qui ne sont pas présents dans material-ui @ v1.0.0-beta.42 sont et qui sont présents dans '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';
0
Vinay Kumar