ReactJS - 图标

Web 图标是 Web 应用中重要的资源。开发人员在多个地方广泛使用它来更好地可视化上下文。例如，菜单可以通过菜单图标轻松识别。Web 图标有着悠久的历史，在其漫长的历史中有多种实现方式。

最初，图标是标准尺寸的简单图像，例如 24x24、32x32、48x48 等。后来，多个图标被设计成单个图像，称为图标精灵，通过 CSS 定位属性在网站中使用。然后，字体用于保存多个图标，并通过 CSS font-family 属性使用。列表中最新的是 SVG 图标。SVG 图标以 SVG 格式设计和保存，并在网站中使用 img 标签或内联 SVG 选项。

React 提供了一个基于社区的图标库，称为 React 图标，它提供了来自不同图标库的大量图标集。让我们在本节中学习如何在 React 中使用 React 图标库。

React 图标 (React-icon) 库

React 图标库从不同的供应商收集了数千个图标，并将其包装成 React 组件。开发人员可以使用它，就像包含一个 React 组件一样简单，以便在其项目中使用特定图标。React 图标提供的一些图标集的简短列表如下：

Bootstrap 图标
Material Design 图标
Font Awesome
Devicons
Boxicons
Ant Design 图标
Github Octicons 图标
VS Code 图标

React 图标提供了更多图标集，我们可以在其网站上查看所有图标 (https://react-icons.github.io/react-icons/)

安装 React 图标库

在 Web 应用中安装 React 图标库就像使用 npm 安装包一样简单，如下所示：

npm install react-icons --save

使用 React 图标组件

库中的每个图标都将有一个相关的 React 组件。开发人员可以从 React 图标库网站找到他们需要的图标组件，并在其 Web 应用中使用它。让我们看看如何从 React 图标库的 Material Design 集中使用日历图标。来自 Material Design 的日历图标组件的名称为 MdCalendarToday。Material Design 图标集的包为 react-icons/md。开发人员需要导入该包，并在相关位置使用该组件，如下所示：

import { MdCalendarToday } from "react-icons/md";
// ...
// ...
class SimpleIcon extends React.Component {
   render() {
      return <div>This icons <MdCalendarToday /> is calendar icon imported from react icon library</div>
   }
}

开发人员可以通过 CSS 更改图标的颜色和大小。

class SimpleIcon extends React.Component {
   render() {
      return <div>This icons <MdCalendarToday style={{backgroundColor: "red", size: "24px"}}/>
      is calendar icon imported from react icon library</div>
   }
}

应用 React 图标库

让我们通过开发一个应用来学习 forwardRef 的概念。

首先，创建一个新的 React 应用，并使用以下命令启动它。

create-react-app myapp
cd myapp
npm start

接下来，安装 React 图标库，如下所示：

npm install react-icons --save

接下来，打开 App.css (src/App.css) 并删除所有 CSS 类。

// remove the css

接下来，创建一个简单的组件，SimpleIcon (src/Components/SimpleIcon.js)，如下所示：

import React from "react";
import { MdCalendarToday } from "react-icons/md";
class SimpleIcon extends React.Component {
   render() {
      return <div>This icons <MdCalendarToday style={{ color: "red", size: "24px" }} />
      is calendar icon imported from react icon library</div>
    }
}
export default SimpleIcon

这里，

导入了 react-icons/md 库。
使用了 MdCalendarToday 组件来渲染日历图标。
使用内联样式更改图标的颜色和大小。

接下来，打开 App 组件 (src/App.js) 并使用 SimpleIcon 组件更新内容，如下所示：

import './App.css'
import React from 'react';
import SimpleIcon from './Components/SimpleIcon'
function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <SimpleIcon />
            </div>
         </div>
      </div>
   );
}
export default App;

这里，

导入了 SimpleIcon 组件。
使用了 SimpleIcon 组件来渲染日历图标。

最后，在浏览器中打开应用。日历图标将按如下所示渲染：

总结

React 图标库通过从不同来源收集各种图标并将其放在一个地方，并以简单易用的方式提供它们，从而帮助开发人员。

打印页面