简介
@cleerio/cleerio-icons 是一个基于 SVG 的图标库。该库包含多个常见的图标，支持自适应大小和颜色，且易于使用和定制。
安装
在项目中安装该包可以使用 npm 或 yarn。
使用 npm 安装：
npm install @cleerio/cleerio-icons
如果使用 yarn：
yarn add @cleerio/cleerio-icons
使用
- 引入所需的图标
import { AiOutlineUser } from "@cleerio/cleerio-icons";- 在组件中使用
<AiOutlineUser width="24" height="24" color="#fff" />
以上代码将渲染一个宽和高均为 24px，颜色为白色的用户图标。更多可供定制的属性，请参阅 API。
API
@cleerio/cleerio-icons 中所有的图标都是基于 React 的无状态函数组件构建的。它们接受以下属性：
| 属性 | 类型 | 描述 |
|---|---|---|
| width | 字符串 | 表示宽度的像素数值，如："24"。 |
| height | 字符串 | 表示高度的像素数值，如："24"。 |
| color | 字符串 | 表示颜色的 CSS 颜色值，如："#fff"。 |
| style | 对象 | 一个可以应用到根元素上的 React 样式对象。 |
| classes | 字符串[] | 包含自定义 CSS 类名的字符串数组，将应用于根元素上的类名属性中。 |
示例代码
下面的代码演示了如何将一个搜索图标添加到页面中，并自定义它的大小和颜色：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------------- - ---- -------------------------
----- --------- - -- -- -
------ -
-----
------ ----------- --
---------------- ---------- ----------- ------------ --
------
--
--
------ ------- ----------结论
@cleerio/cleerio-icons 提供了一种简单且易于使用的方式来添加常用的 SVG 图标到网站或应用程序中，它可以帮助你减少创建自定义图标的时间和工作量，从而能更快地实现你的项目需求。如果你想获得更多的图标，可以访问官方网站。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005a1ad81e8991b448ed546