Как мне сослаться на Google Material-Design-Icons после установки npm? - PullRequest
Новая
       19

Как мне сослаться на Google Material-Design-Icons после установки npm?

0 голосов
/ 05 июня 2018

Итак, после выполнения npm install material-design-icons, как мне использовать их в моем React приложении?

Методы, включенные здесь , не включают метод npm.

Ответы [ 5 ]

0 голосов
/ 18 июля 2019

Вы можете использовать Material-UI , который предоставляет два компонента для визуализации системных значков: SvgIcon для рендеринга путей SVG и Icon для рендерингазначки шрифтов.

Если вы еще не используете Material-UI в своем проекте, вы можете добавить его с помощью: 

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

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

SVGЗначки материалов :

Material-UI предоставляет отдельный пакет npm, @ material-ui / icons , в который входит более 1000 официальных лиц Значки материалов преобразованы в 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

Для тематических значков добавьте название темы к имени значка.Например, с

  • Значок Outlined delete отображается как @material-ui/icons/DeleteOutlined
  • Значок Rounded deleteотображается как @material-ui/icons/DeleteRounded
  • Значок Two Tone delete отображается как @material-ui/icons/DeleteTwoTone
  • Отображается значок Sharp deleteas @material-ui/icons/DeleteSharp

Из этого правила есть три исключения:

  • 3d_rotation выставлено как @material-ui/icons/ThreeDRotation
  • 4k выставленокак @material-ui/icons/FourK
  • 360 отображается как @material-ui/icons/ThreeSixty

Значки материалов шрифта :

1.Включите шрифт значка материала в свой проект через Google Web Fonts : 

<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 голосов
/ 17 июня 2019

Откройте angular.json в своем проекте и добавьте следующую строку node_modules/material-design-icons/iconfont/material-icons.css в projects => YOUR_APP => architect => options => styles

add new stylesheet to angular project

Моя угловая версияng version: 

Angular CLI: 8.0.3 
Node: 11.15.0
OS: linux x64
Angular: 8.0.1
0 голосов
/ 06 декабря 2018

Это способ, которым вы можете ссылаться на него (в вашем файле styles.css): 

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

Чтобы использовать его: 

<i class="material-icons">cloud_upload</i>
0 голосов
/ 12 февраля 2019

Используя 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 голосов
/ 18 сентября 2018

Используйте это в index.html файле после npm install material-design-icons.Это работает в моем Angular Project. 

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