前言
在开发前端项目的过程中，使用图标是非常常见的，而如何获取/选择一个好看、易用的图标集并不是一件简单的事。此时，npm 包 linux-icons 就呼之欲出了。linux-icons 是一个基于 SVG 图标的 npm 包，提供了丰富的图标集，且完全免费开源。本篇文章将介绍如何使用 linux-icons 包。
安装
在使用 linux-icons 前，首先需要安装该 npm 包，可以在终端中输入以下命令进行安装：
--- ------- ----------- ------
然后，在需要使用该包的文件中，通过 require 来引入 linux-icons：
----- ----- - -----------------------
使用
使用 linux-icons 可以有两种方式：直接使用预编译的 SVG 文件，或者使用 linux-icons 自带的 API。
直接使用 SVG 文件
linux-icons 提供了大量的 SVG 文件，这些文件可以在 node_modules/linux-icons/svg 目录中找到。可以在 HTML 中（或者 React、Vue 等前端框架中）直接使用这些 SVG 文件。
例如，我们可以在 HTML 中创建一个 img 元素来展示一个名为 github.svg 的图标：
---- ----------------------------------------------- ----------- ------
值得注意的是，在使用这种方式引入图标时，需要手动设置 SVG 的 fill、stroke 等样式属性来改变图标颜色、线条颜色和样式等，即：
---- ----------------------------------------------- ----------- ----- ------------ ----- ------------- ---- ------- ------
通过自带 API 使用
linux-icons 提供了一些方便使用的 API 函数，这些函数能够通过输入图标名等信息来获取表示该图标的 SVG 字符串。使用这些 API 函数的优势在于不用担心 SVG 文件的加载问题，同时可以简单地根据需要定制图标样式。
下面介绍几个常用的 API 函数。
getByName
该函数通过图标名称（不包含扩展名）来获取该图标的 SVG 字符串。例如，我们可以通过以下代码获取 github 图标的 SVG 字符串：
----- ---------- - --------------------------
getByNameAndColor
该函数除了支持根据名称获取 SVG 字符串外，还支持可选的颜色参数，用来定制该图标的颜色。例如，我们通过以下代码给 github 图标设置红色：
----- ------------- - --------------------------------- -------
getList
该函数用于获取图标名称列表（不包含扩展名），可以用来在 UI 中展示可选的图标选项。例如，我们可以通过以下代码获取 linux-icons 包中提供的所以图标名称：
----- -------- - ---------------- ----------------------
输出：
- ------------ --------- --------- --------- ---------- --------- -------- ---------- ----------- --------------- --------- ------------ -------- -
示例代码
下面是一个使用 linux-icons 的示例代码，在 React 项目中使用 linux-icons 现有的 logo 图标，且能够切换 logo 的颜色。
-- -- ----------------- --- ---- ---- -- --- ---
----- ------- - ------------------------------- ------------------
-- -- ----------------------- --- --- ---------
-------- -
------ ---- --------------- ---------
--------------- ---------
---- --------------------------------- --------- -------------- -------- ------- --------- --
-----
------------ -------------------
------- ----------- -- --------------------- -------------------------
------- ----------- -- --------------------- -----------------------
------- ----------- -- --------------------- ---------------------
------
------
-总结
linux-icons 是一个非常优秀的图标库，使用方便且丰富，可以为项目带来更好的用户体验和视觉效果。通过本文的介绍，读者可以掌握 linux-icons 的使用方法，并在实际开发中灵活运用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055ad481e8991b448d86e2