前言
在开发前端项目的过程中，使用图标是非常常见的，而如何获取/选择一个好看、易用的图标集并不是一件简单的事。此时，npm 包 linux-icons 就呼之欲出了。linux-icons 是一个基于 SVG 图标的 npm 包，提供了丰富的图标集，且完全免费开源。本篇文章将介绍如何使用 linux-icons 包。
安装
在使用 linux-icons 前，首先需要安装该 npm 包，可以在终端中输入以下命令进行安装：
npm install linux-icons --save
然后，在需要使用该包的文件中，通过 require 来引入 linux-icons：
const icons = 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 的图标：
<img src="./node_modules/linux-icons/svg/github.svg" alt="github icon">
值得注意的是，在使用这种方式引入图标时，需要手动设置 SVG 的 fill、stroke 等样式属性来改变图标颜色、线条颜色和样式等，即：
<img src="./node_modules/linux-icons/svg/github.svg" alt="github icon" style="fill: #333; stroke-width: 2px; stroke: #fff">
通过自带 API 使用
linux-icons 提供了一些方便使用的 API 函数，这些函数能够通过输入图标名等信息来获取表示该图标的 SVG 字符串。使用这些 API 函数的优势在于不用担心 SVG 文件的加载问题，同时可以简单地根据需要定制图标样式。
下面介绍几个常用的 API 函数。
getByName
该函数通过图标名称（不包含扩展名）来获取该图标的 SVG 字符串。例如，我们可以通过以下代码获取 github 图标的 SVG 字符串：
const githubIcon = icons.getByName('github');getByNameAndColor
该函数除了支持根据名称获取 SVG 字符串外，还支持可选的颜色参数，用来定制该图标的颜色。例如，我们通过以下代码给 github 图标设置红色：
const githubRedIcon = icons.getByNameAndColor('github', 'red');getList
该函数用于获取图标名称列表（不包含扩展名），可以用来在 UI 中展示可选的图标选项。例如，我们可以通过以下代码获取 linux-icons 包中提供的所以图标名称：
const iconList = icons.getList(); console.log(iconList);
输出：
-- -------------------- ---- ------- - ------------ --------- --------- --------- ---------- --------- -------- ---------- ----------- --------------- --------- ------------ -------- -
示例代码
下面是一个使用 linux-icons 的示例代码，在 React 项目中使用 linux-icons 现有的 logo 图标，且能够切换 logo 的颜色。
-- -------------------- ---- -------
-- -- ----------------- --- ---- ---- -- --- ---
----- ------- - ------------------------------- ------------------
-- -- ----------------------- --- --- ---------
-------- -
------ ---- --------------- ---------
--------------- ---------
---- --------------------------------- --------- -------------- -------- ------- --------- --
-----
------------ -------------------
------- ----------- -- --------------------- -------------------------
------- ----------- -- --------------------- -----------------------
------- ----------- -- --------------------- ---------------------
------
------
-总结
linux-icons 是一个非常优秀的图标库，使用方便且丰富，可以为项目带来更好的用户体验和视觉效果。通过本文的介绍，读者可以掌握 linux-icons 的使用方法，并在实际开发中灵活运用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ad481e8991b448d86e2