npm install 后如何引用 Google Material-Design-Icons？

Posted 2023-02-22

【中文标题】npm install 后如何引用 Google Material-Design-Icons？

【英文标题】：How do I reference Google Material-Design-Icons after npm install?

【发布时间】：2018-11-14 11:19:48

【问题描述】：

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

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

【问题讨论】：

我建议使用free icons from here。更容易使用。并进行了高度优化

【参考方案1】：

在npm install material-design-icons 之后的index.html 文件中使用它。 它适用于我的 Angular 项目。

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

【参考方案2】：

这是您可以引用它的方式（在您的 styles.css 中）：

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

使用它：

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

【参考方案3】：

使用 npm 和 laravel-mix 你可以做到这一点：

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

命令：

npm run dev

html:

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

【参考方案4】：

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

我的角版ng version:

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

【讨论】：

有趣的是，这个 Angular 答案是如何在 React 问题下发布的，但它还是很有帮助的 :)

【参考方案5】：

您可以使用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 多个官方 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

对于主题图标，将主题名称附加到图标名称。例如与

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

更多信息here

【讨论】：

在 React 中，您可以像这样使用导入的图标：<DeleteForever />

【参考方案6】：

我复制了“node_modules/material-design-icons/iconfont/material-icons.css”，更改了文件中的urls，然后将该复制的文件导入到我的主样式表中。

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

【参考方案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">