ReactJS - 图标

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

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

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

React 图标 (React-icon) 库

React 图标库收集了来自不同供应商的数千个图标并将其包装为 React 组件。开发人员可以像在项目中包含 React 组件一样简单地使用它来使用特定图标。 React icons 提供的图标集小列表如下 −

• Bootstrap 图标

• Material design 图标

• Font Awesome

• Devicons

• Boxicons

• Ant Design 图标

• Github Octicons 图标

• VS Code 图标

React icons 提供了更多的图标集，我们可以在他们的网站上查看所有图标(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 类。

// 删除 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 图标库通过从不同来源收集各种图标并将其放在一个地方并以简单易行的方式提供，从而帮助开发人员。