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 图标提供的一小群图标集如下 -

• Bootstrap icons
• Material design icons
• Font Awesome
• Devicons
• Boxicons
• Ant Design icons
• Github Octicons icons
• VS Code icons

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

安装 react 图标库

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

 npm install react-icons --save

使用 react icon 组件

库中的每个图标都有一个相关的 react 组件。开发人员可以从 React 图标库网站找到他们需要的图标组件，并在他们的 Web 应用程序中使用它。让我们看看如何使用 react 图标库中材料设计集中的日历图标。Material Design 中的日历图标组件的名称是 MdCalendarToday。材料设计图标集的包是 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 应用程序并使用以下命令启动它。

接下来，安装 react 图标库，如下所示 -

接下来，打开 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 图标库通过收集来自不同来源的所有类型的图标并将其放在一个地方并以简单易行的方式提供它来帮助开发人员。