在npm安装后如何参考material-design-icons？

Question

在完成npm install material-design-icons之后，如何在我的React应用程序中使用它们？

包含here的方法不包含npm方法。

Answer 1

这是您引用它的方式：

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

例如：

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

Answer 2

在index.html之后的npm install material-design-icons文件中使用它。 它可以在我的Angular Project中工作。

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

Answer 3

使用npm和laravel-mix，您可以执行以下操作：

@Html.ActionLink("Link Name", 
"ActionName",
"ControllerName",
null,
new { @class = "your css class" }
)

cmd：

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

html：

npm run dev

Answer 4

在项目中打开angular.json，并在node_modules/material-design-icons/iconfont/material-icons.css下添加以下行projects => YOUR_APP => architect => options => styles

我的棱角版本ng version：

Angular CLI: 8.0.3 
Node: 11.15.0
OS: linux x64
Angular: 8.0.1

Answer 5

我制作了“ node_modules / material-design-icons / iconfont / material-icons.css”的副本，更改了文件中的url，然后将该副本导入了我的主样式表。 / p>

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('~material-design-icons/iconfont/MaterialIcons-Regular.eot'); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url('~material-design-icons/iconfont/MaterialIcons-Regular.woff2') format('woff2'),
       url('~material-design-icons/iconfont/MaterialIcons-Regular.woff') format('woff'),
       url('~material-design-icons/iconfont/MaterialIcons-Regular.ttf') format('truetype');
}

Answer 6

您可以使用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，其中包括将1,000多种官方Material 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

对于以为主题的图标，请在图标名称后附加主题名称。例如，

• 概述 delete图标显示为@material-ui/icons/DeleteOutlined
• 圆形 delete图标显示为@material-ui/icons/DeleteRounded
• 双音 delete图标显示为@material-ui/icons/DeleteTwoTone
• Sharp delete图标显示为@material-ui/icons/DeleteSharp

此规则有三个例外：

• 3d_rotation显示为@material-ui/icons/ThreeDRotation
• 4k显示为@material-ui/icons/FourK
• 360显示为@material-ui/icons/ThreeSixty

字体材质图标 ：

1。通过Google网络字体在您的项目中添加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>

更多信息here

Answer 7

使用 laravel 8 和 npm 对我有用：

//terminal:
npm install material-design-icons

然后在你的 webpack.mix.js 添加

.postCss('node_modules/material-design-icons/iconfont/material-icons.css', 'public/css')

所以它看起来像这样：

mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.postCss('node_modules/material-design-icons/iconfont/material-icons.css', 'public/css')
.sourceMaps();

下一步

//terminal
npm run dev

因此，您将在公共文件夹中获得 material-icons.css 文件，所以现在，您要做的就是将其包含在您的 html 中。

<link href="{{ asset('css/material-icons.css') }}" rel="stylesheet">