web-dev-qa-db-fra.com

Comment faire référence à Google Material-Design-Icons après l'installation de npm?

Donc, après avoir fait npm install material-design-icons, comment les utiliser dans mon application React?

Les méthodes incluses ici n'incluent pas la méthode npm.

cssreactjsnpmmaterial-designmaterial-ui
11
hackerl33t

Utilisez ceci dans index.html fichier après npm install material-design-icons. Cela fonctionne dans mon Angular Project.

<link href="../node_modules/material-design-icons/iconfont/material-icons.css" rel="stylesheet">
1
Abhishek Ranjan

En utilisant npm et laravel-mix, vous pouvez le faire:

// Material Design Icons - File: sass/app.scss
@import '~material-design-icons/iconfont/material-icons.css';

cmd:

npm run dev

html:

<i class="material-icons"> list </i>
0
Calebe Cavalcante

Vous pouvez utiliser Material-UI qui fournit deux composants pour le rendu des icônes système: SvgIcon pour le rendu des chemins SVG et Icon pour le rendu des icônes de police.

Si vous n'utilisez pas déjà Material-UI dans votre projet, vous pouvez l'ajouter avec:

// with npm
npm install @material-ui/core

// with yarn
yarn add @material-ui/core

Icônes SVG Material:

Material-UI fournit un package npm séparé, @ material-ui/icons , qui inclut les 1000+ officiels Material icons converti en SvgIcon composants

1. Installation :

// with npm
npm install @material-ui/icons

// with yarn
yarn add @material-ui/icons

2. Importez les icônes :

import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';
import ThreeDRotation from '@material-ui/icons/ThreeDRotation';

3. Utilisation :

Vous pouvez utiliser material.io/tools/icons pour trouver une icône spécifique. Lors de l'importation d'une icône, gardez à l'esprit que les noms des icônes sont PascalCase, par exemple:

  • delete est exposé comme @material-ui/icons/Delete
  • delete forever est exposé comme @material-ui/icons/DeleteForever

Pour les icônes à thème, ajoutez le nom du thème au nom de l'icône. Par exemple avec le

  • L'icône Décritdelete est exposée comme @material-ui/icons/DeleteOutlined
  • L'icône Arrondidelete est exposée comme @material-ui/icons/DeleteRounded
  • L'icône Two Tonedelete est exposée sous la forme @material-ui/icons/DeleteTwoTone
  • L'icône Sharpdelete est exposée sous la forme @material-ui/icons/DeleteSharp

Il existe trois exceptions à cette règle:

  • 3d_rotation est exposé comme @material-ui/icons/ThreeDRotation
  • 4k est exposé comme @material-ui/icons/FourK
  • 360 est exposé comme @material-ui/icons/ThreeSixty

Icônes de matériau de police:

1. Inclure police d'icône de matéria dans votre projet, via Google Web Fonts :

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

2. Importer le composant Icon: 

import Icon from '@material-ui/core/Icon';

3. enveloppez le nom de l'icône avec le composant Icon, par exemple :

<Icon>star</Icon>

plus d'infos ici

0
Fraction

Voici comment vous pouvez le référencer:

import 'material-design-icons/iconfont/material-icons.css';

par exemple:

<i class="material-icons">cloud_upload</i>
0
YJBeetle