简介
@bolt/components-icons 是一个由 Bolt Design System 提供的针对 React 应用的图标组件库。该组件库提供了一系列常用的矢量图标，可以通过 npm 包管理工具轻松地安装到项目中，方便开发人员进行快速开发。本文将详细介绍如何使用该组件库。
安装
使用 npm 安装 @bolt/components-icons，可以通过以下命令进行安装：
npm install @bolt/components-icons
使用
引入
在项目中，可以通过以下方式引入 @bolt/components-icons：
import { IconName } from "@bolt/components-icons";其中，IconName 为所需要使用的图标名称，例如：
import { XCircleIcon } from "@bolt/components-icons";基本用法
引入图标后，可以直接在 JSX 代码中使用该图标：
-- -------------------- ---- -------
------ - ----------- - ---- -------------------------
-------- ------------- -
------ -
-----
------------ ----------- --------- --
------
--
-在代码中生成了一个颜色为红色，大小为 20 像素的 XCircle 图标。
属性
@bolt/components-icons 的图标组件支持常用的 HTML 属性，可以通过这些属性来定制图标。
属性列表如下：
size：设置图标的大小，默认值为 16。color：设置图标的颜色，可以是 CSS 颜色值或者使用颜色变量，例如 "var(--color-red-500)"。title：设置图标的标题，用于辅助和屏幕阅读器通信。aria-hidden：设置该图标是否应当隐藏于屏幕阅读器中。
示例代码：
-- -------------------- ---- -------
------ - ----------- - ---- -------------------------
-------- ------------- -
------ -
-----
------------
---------
----------------------------
--------------
------------------
--
------
--
-深度理解
本节将深入讲解如何定制 @bolt/components-icons 组件库，以便读者可以更加灵活地使用这个组件库。
自定义图标库
尽管 @bolt/components-icons 带有丰富的图标库，但是在某些情况下，开发人员可能需要自己创建一些特定的图标。
首先，需要在项目中创建一个 SVG 图标文件，例如：
-- -------------------- ---- -------
---- ---------- - -- --- ----------- -----------------------------------
-----
----- ---- ---- ---
---------------------
------------------
----------------------
-----------------------
--
------该图标的路径描述了一个从 (9,7) 到 (14,12) 再到 (9,17) 的线段组成的箭头。
然后，可以使用 svgr 工具将 SVG 图标文件转换为 React 组件。先安装 svgr：
npm install --save-dev @svgr/cli
然后，使用以下命令将 SVG 文件转换为 React 组件：
npx svgr --icon --out-dir src/icons src/icons/my-icon.svg
这将在项目根目录中创建一个 src/icons/my-icon.js 文件，其中包含了一个名为 MyIcon 的 React 组件。
然后，可以将 MyIcon 组件添加到 @bolt/components-icons 的图标库中：
import { createBoltIcon } from "@bolt/components-icons";
import MyIcon from "../icons/my-icon";
export const BoltIcon = createBoltIcon(MyIcon, "MyIcon");现在，BoltIcon 就添加到了 @bolt/components-icons 的图标库当中。
接下来，可以像使用其他 @bolt/components-icons 组件一样使用 BoltIcon：
<BoltIcon size={20} color="var(--color-red-500)" />定制图标尺寸
默认情况下，@bolt/components-icons 的图标大小为 16 像素。如果需要定制图标大小，可以修改图标组件的 CSS 样式：
svg {
height: 1em;
width: 1em;
}在该样式中，将 SVG 的高度和宽度设置为 1em，这将导致根据字体大小自适应调整 SVG 的尺寸。
然后，在使用图标的地方可以通过修改 font-size 属性来控制图标大小：
<XCircleIcon className="my-icon" style={{ fontSize: "24px" }} />在这个例子中，为 XCircleIcon 的样式设置了一个 24 像素的字体大小，从而可以将图标的大小调整为 24 像素。
总结
本文详细介绍了如何使用 @bolt/components-icons 这个图标组件库，并讨论了如何通过定制自定义图标和修改组件样式来实现更加灵活的图标定制。希望本文的内容可以帮助读者更好地了解 @bolt/components-icons，并轻松地在 React 项目中使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaa58b5cbfe1ea0610473