简介
@fluentui/react-icons 是一套基于 Fluent UI 设计风格的 React 图标组件库，旨在帮助开发者更快速、更方便地进行开发。它包含了 Fluent UI 图标库中的所有图标，使用非常方便。本文将介绍如何使用该包来为自己的项目添加图标。
安装
Node.js环境
在 Node.js 环境下，可以通过 npm 或 yarn 来安装 @fluentui/react-icons。
# npm npm install @fluentui/react-icons # yarn yarn add @fluentui/react-icons
浏览器环境
在浏览器环境下，可以通过 CDN 引入 @fluentui/react-icons 的脚本文件。
<!-- 引入 Fluent UI React 图标库 --> <script src="https://unpkg.com/@fluentui/react-icons@1.2.0/dist/index.js"></script>
使用
导入
在你的项目中，需要先导入要使用的图标组件。
import { IconName } from '@fluentui/react-icons';其中，IconName 是要使用的图标名称。
显示图标
在使用时，可以直接编写如下组件：
<IconName />
这样就可以在页面中显示出对应的图标了。
修改大小和颜色
可以通过 style 来修改图标的大小和颜色。
<IconName style={{ fontSize: '24px', color: 'red' }} />示例代码
下面是一个展示如何使用 @fluentui/react-icons 的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------ - ---- ------------------
------ - ------- - ---- ------------------------
-------- ----- -
------ -
--------
----
-------- -------- ------------ ------ -- --
------ -- ----- -----
-----
---
----- ----- ----- --- ----- ----------- ---------- ----- ------ - --------- ------ ---- -- ------- ------
-------- ------- ---- -- ------ --------- --------- ----- ------- --------- ----- ----- --------- ---- ---
--------- ------
----
---------
--
-
-------------------- --- ---------------------------------总结
@fluentui/react-icons 包含了 Fluent UI 图标库中的所有图标，使用起来非常方便。本文介绍了如何在 Node.js 环境和浏览器环境下安装和使用 @fluentui/react-icons，以及如何修改图标的大小和颜色。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedabe2b5cbfe1ea06108b2