前言
React 是目前最流行的前端框架之一，它能够帮助我们快速构建复杂的 web 应用程序。而 icon 是 web 页面中必不可少的组件之一，它可以进行很好的视觉增强和用户体验。今天我们要介绍的是一个 npm 包，它是基于 React 和 Eva Icons 的，并且可以轻松地在 React 项目中集成这些高质量的矢量图标。这个 npm 包的名字叫做 react-eva-icons。
react-eva-icons 的使用
安装
在开始使用 react-eva-icons 之前，我们需要先安装它。它可以通过 npm 安装，使用以下命令：
npm install react-eva-icons --save
基本使用
安装完成之后，我们可以在应用程序中导入和使用这个组件。以下是一个基本的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------- - ---- ------------------
-------- ----- -
------ -
-----
-------- ------------ --
------
--
-
-------------------- --- ---------------------------------在上面的示例中，我们首先导入了 React 和 ReactDOM，然后导入了 EvaIcon 组件。在 render 方法中，我们使用 EvaIcon 组件，并将名为 “heart” 的图标作为 name 属性传递给它。这将渲染一个 Eva Icons 的心形图标。
更多高级使用
react-eva-icons 还支持很多更高级的使用情况，这些情况可以帮助你更好地在你的项目中使用这个组件。
改变图标颜色和大小
要改变图标的颜色和大小，可以使用 style 属性和 className 属性。例如，要将图标的颜色更改为红色并将其大小增加到 50 像素，可以使用以下代码：
<EvaIcon name="heart" style={{ color: "red", fontSize: "50px" }} />渲染图标的 html 标签
有时候，我们需要将 EvaIcons 渲染到一个标签上，而不是默认的 <i> 标签上。这可以通过传递一个自定义组件作为 tagName 属性来实现。例如，要将图标渲染到一个带有 class “my-icon”的<span>标签上，可以使用以下代码：
const MyIcon = (props) => <span className="my-icon">{props.children}</span>;
<EvaIcon name="heart" tagName={MyIcon} />反转图标
有时候，我们需要将 EvaIcons 水平或垂直反转。这可以通过传递 flipX 和 flipY 属性来实现。例如，要将图标垂直翻转，可以使用以下代码：
<EvaIcon name="heart" flipY />
指定图标集
react-eva-icons 支持两个不同的图标集：eva 和 outline。默认情况下，它将使用 eva 图标集。要使用 outline 样式的图标集，可以传递它到 Provider 组件中。例如：
-- -------------------- ---- -------
------ - ------------- ---------------- - ---- -----------------------
------ - -------- ------------ - ---- ------------------
-------- ----- -
------ -
-----
------------- --------------------- ------------------ --
-------- -------------------- --
------
--
-总结
在这篇文章中，我们介绍了一个 npm 包 react-eva-icons，它是基于 React 和 Eva Icons 的，并且可以轻松地在 React 项目中集成这些高质量的矢量图标。我们学习了如何安装和使用它，以及如何进行更高级的使用。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/the-react-eva-icons