web-dev-qa-db-ja.com

npmのインストール後にGoogle Material-Design-Iconsを参照するにはどうすればよいですか？

npm install material-design-iconsを実行した後、Reactアプリケーションでそれらをどのように使用しますか？

含まれているメソッド here には、npmメソッドは含まれていません。

cssreactjsnpmmaterial-designmaterial-ui
11
hackerl33t

index.htmlの後のnpm install material-design-iconsファイルでこれを使用します。私のAngularプロジェクトで動作します。

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

Npmとlaravel-mixを使用すると、これを行うことができます：

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

システムアイコンをレンダリングする2つのコンポーネントを提供する Material-UI を使用できます。SVGパスをレンダリングする場合は SvgIcon 、および Icon フォントアイコンのレンダリング用。

プロジェクトで Material-UI をまだ使用していない場合は、次のように追加できます。

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

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

SVG素材アイコン：

Material-UIは、1,000以上の公式の Materialアイコン を含む個別のnpmパッケージ @ material-ui/icons を提供しますSvgIconコンポーネントに変換

1。インストール：

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

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

2。アイコンをインポートします：

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

3。使い方：

material.io/tools/icons を使用して、特定のアイコンを見つけることができます。アイコンをインポートするときは、アイコンの名前がPascalCaseであることに注意してください。たとえば、次のようになります。

  • deleteは@material-ui/icons/Deleteとして公開されます
  • delete foreverは@material-ui/icons/DeleteForeverとして公開されます

themedアイコンの場合、テーマ名をアイコン名に追加します。たとえば、

  • Outlineddeleteアイコンは@material-ui/icons/DeleteOutlinedとして公開されます
  • Roundeddeleteアイコンは@material-ui/icons/DeleteRoundedとして公開されます
  • Two Tonedeleteアイコンは@material-ui/icons/DeleteTwoToneとして公開されます
  • Sharpdeleteアイコンは@material-ui/icons/DeleteSharpとして公開されます

このルールには3つの例外があります。

  • 3d_rotationは@material-ui/icons/ThreeDRotationとして公開されます
  • 4kは@material-ui/icons/FourKとして公開されます
  • 360は@material-ui/icons/ThreeSixtyとして公開されます

フォント素材アイコン：

1。 Google Web Fontsを使用して、プロジェクトに Material icon font を含めます：

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

2。 Iconコンポーネントのインポート：

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

3。たとえば、アイコン名をIconコンポーネントでラップします：

<Icon>star</Icon>

詳細 ここ

0
Fraction

これはあなたがそれを参照できる方法です：

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

例えば：

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