什么是 kawaii
kawaii 是一个 npm 包，是一个支持 React 组件的可爱图标库。它提供了一系列可爱的图标，可以在你的项目中轻松地使用。
如何使用 kawaii
安装
我们可以通过 npm 安装 kawaii，打开终端，输入以下指令即可安装。
npm install kawaii-icons
使用
在我们的组件中引入 kawaii 的图标组件，然后使用即可。
-- -------------------- ---- -------
------ ----- ---- --------
------ - --- - ---- ---------------
----- ----------- - -- -- -
------ -
-----
---- ---------- --------------- -------------- --
------
--
--在上面的例子中，我们引入了一个 kawaii 图标——Cat，并且设置它的大小、颜色和心情。
可用 Props
kawaii 的组件支持以下一些 Props。
size
设置组件的尺寸，单位为 px。
<Icon size={100} />color
设置组件的颜色，可以是一个颜色字符串或者是一个包含多个颜色的数组。
<Icon color="#E0A48B" />
<Icon color={['#CC3333', '#FFAE00']} />mood
kawaii 的图标拥有不同的心情和表情，通过 mood 来改变组件的心情。mood 可以是以下项之一。
- curious（好奇）
- happy（开心）
- lovestruck（热恋中）
- shocked（惊讶）
- sleepy（困惑）
- sad（难过）
<Icon mood="happy" />
使用案例
kawaii 可以在不同场景使用，例如表单验证的成功和失败，还可以用在404页面等等场景中。
以下是一个表单验证的例子。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - --- - ---- ---------------
----- ----------- - -- -- -
----- ------ -------- - -------------
----- ------------- --------------- - ----------------
----- ---------------- - --- -- -
------------------------
------------------------------------------- - ---
--
------ -
-----
-------
-----
------ ----------- ------------ --------------------------- --
------------ - ---- --------- ------------ -- - ---- --------- ---------- ---
--------
------
--
--在上面的例子中，我们通过监听表单的输入内容，判断它是否为空来确定组件的 mood，这样在表单验证时，就可以显示不同的心情了。
总结
kawaii 是一个可爱的图标库，它能够让我们的页面看起来更加有趣和好玩。在项目中，我们可以用它来代替一些传统的图标，让我们的网站更加有个性和识别度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066eff4c49986ca68d8b71