React Chakra UI 媒体与图标组件详解

组件介绍

React Chakra UI 的媒体和图标组件专为管理媒体内容以及显示图标和图片而量身定制。Chakra UI 为我们提供了一组通用的界面图标，我们可以直接在网站或应用中使用。这些图标通过直观的视觉元素帮助用户识别功能，特别是在鼠标悬停时提供反馈，从而提供更好的用户体验，并让操作流程变得更加高效。

ReactJS Chakra UI 提供了多种使用媒体图标的方式，我们将在下文中详细探讨。

目录

• 通过使用 Chakra UI 图标库
• 通过使用第三方图标库
• 通过使用自定义创建的图标

前提条件：

• NPM & Node.js
• ReactJS
• HTML, CSS, 和 JavaScript
• ReactJS Chakra UI

通过使用 Chakra UI 图标库

实现思路：

我们创建了一个包含 Chakra UI Icons 库中所有图标的基础应用，并将它们放置在组件中以便于理解。此外，我们还展示了如何通过导入第三方图标库并在不同的组件中使用它们。我们也可以使用 createIcon() 函数和 Icon 组件来创建自定义图标。在本示例中，我们仅选取了部分图标来演示其用法，开发者可以根据实际需求引入其他图标。

创建 React 应用程序并安装模块的步骤：

步骤 1：​ 使用以下命令创建一个 React 应用程序：

npx create-react-app my-icon-app

步骤 2：​ 创建项目文件夹（即 my-icon-app）后，使用以下命令进入该目录：

cd my-icon-app

步骤 3：​ 创建 React 应用程序后，使用以下命令安装所需的包：

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
npm i @chakra-ui/icons

项目结构：

!image

package.json 文件中更新后的依赖项：

"dependencies": {
    "@chakra-ui/react": "^2.8.2",
   "@chakra-ui/icons": "^2.1.1",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "framer-motion": "^6.5.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

示例： 在相应的文件中编写代码。用户可以使用任意数量的图标及其对应的组件名称，这里我们为了基础演示使用了其中的一部分。
JavaScript：

JavaScript


“

import { ChakraProvider, Text,

Flex, Box} from "@chakra-ui/react";

import { PhoneIcon,

AddIcon,

CalendarIcon,

AtSignIcon,

ChatIcon,

AttachmentIcon,

CheckIcon,CloseIcon,

EditIcon,ExternalLinkIcon,

RepeatIcon,SearchIcon

} from ‘@chakra-ui/icons‘

import "./App.css";

function App() {

return (

<Text

color="#2F8D46"

fontSize="2rem"

textAlign="center"

fontWeight="600"

my="1rem"

>

ReactJS 技术探索

Chakra UI 媒体图标