📌  相关文章
📜  材质 ui 图标 - Javascript (1)

📅  最后修改于: 2023-12-03 14:55:28.253000             🧑  作者: Mango

材质 UI 图标 - JavaScript

简介

材质 UI 是一种流行的前端框架，提供了丰富的组件和样式，其中包括了可自定义的图标库。这个图标库有超过 900 个图标，可以用来代表不同的操作或状态。这个图标库支持 SVG 和 CSS 两种方式来使用。在这个文章中，我们将会解释如何在 JavaScript 中使用材质 UI 图标库。

安装

材质 UI 图标库可以通过 NPM 安装。你需要先安装材质 UI，然后再安装材质 UI 图标库。

npm install @material-ui/core
npm install @material-ui/icons
使用
SVG 方式

通过材质 UI 的 SvgIcon 组件，你可以很容易地使用材质 UI 图标库中的图标。你只需要将图标的名称传递给 SvgIcon 组件即可。

import React from 'react';
import { SvgIcon } from '@material-ui/core';
import { Alarm } from '@material-ui/icons';

export default function Example() {
  return (
    <SvgIcon>
      <Alarm />
    </SvgIcon>
  );
}

如果你需要在材质 UI 图标库中找到更多图标的名称，可以访问 官方文档。

CSS 方式

材质 UI 也可以通过 CSS 的方式来使用图标库。需要在 HTML 文件中引入材质 UI 的图标 CSS 文件，然后可以使用图标名称来创建相应的元素。

<!DOCTYPE html>
<html>
  <head>
    <!-- ... -->
  </head>
  <body>
    <i class="material-icons">alarm</i>
    <!-- ... -->
    <script src="index.js"></script>
  </body>
</html>
总结

在本文中，我们介绍了如何在 JavaScript 中使用材质 UI 图标库。通过 SvgIcon 组件或者 CSS 图标，你可以快速的添加材质 UI 图标到你的应用中。对于在材质 UI 图标库中找图标名称有疑问，可以访问 官方文档。