在前端开发中，icon 图标的使用非常普遍。通常情况下，我们需要使用一些工具或者第三方库来完成 icon 图标的使用。而 devicon-react 就是一个非常好用的 npm 包，它可以让我们方便地使用大量的 icon 图标。
简介
devicon-react 是一个基于 React 的 icon 图标库。它提供了数百个网站开发中最常用的 icon 图标，包括各种编程语言和技术标志，如 HTML、CSS、JavaScript、React、Vue、Node.js、MySQL、MongoDB 等等。
安装
使用 npm 包管理器进行安装：
npm install devicon-react --save
使用方法
1. 导入库：
在需要使用 icon 的组件文件中导入库：
import { Devicon } from "devicon-react";2. 选择 icon：
在需要使用 icon 的组件 render 函数中选择所需的 icon：
<Devicon icon="react" />
这将渲染一个 React 的 icon 图标。
3. 自定义 icon：
可以在组件中设置自己的颜色、SVG 代码或 CSS 类：
<Devicon
icon="react"
color="#61DBFB"
svg={"<path d=.../>"}
className={"my-custom-class"}
/>示例代码
-- -------------------- ---- -------
------ - ------- - ---- ----------------
-------- ----- -
------ -
-----
--------------
---
----------
-------- ------------ --
-------- ------------- --
-------- -------------- --
----
---
----------
-------- ---------- --------------- --
--------
-----------------
----------- -----------------
-----------------------------
--
----
------
--
-
------ ------- ----这将渲染一个包含个人技术栈的网页，其中显示了已经掌握和正在学习的技术，并使用了不同的颜色和 CSS 类。
总结
devicon-react 是一个非常好用的 npm 包，它提供了大量的 icon 图标，使我们能够轻松地在项目中使用各种技术的标志。通过上述步骤，您已经可以开始使用 devicon-react 愉快地探索其所有功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f981e8991b448e0c7d