前言
随着前端开发的不断发展，我们需要大量的图标来装饰我们的页面。很多时候，我们都需要用到一些特定的图标，但又不想制作自己的图标库，这时候我们可以使用 file-icons-js 这个 npm 包。
file-icons-js 可以为你的项目提供超过 3000 个图标，这些图标包括常见的文件格式，也包括特定的框架和库的图标。
本文将介绍使用 file-icons-js 包来提供图标的方法及技巧。
安装
在开始使用之前，我们需要安装 file-icons-js。
可以使用 npm 进行安装，使用以下命令：
npm install file-icons-js
安装完成后，我们可以引入包来使用它提供的功能。
import fileIcons from 'file-icons-js';
使用
在接下来的内容中，我们将使用 file-icons-js 根据文件类型为每个文件添加图标。
基础用法
file-icons-js 中的 getClass() 函数可以返回一个字符串，表示针对给定文件扩展名的图标样式。
为了演示如何使用 getClass() 函数，我们将创建一个名为 getFileIcon 的函数，该函数接受文件名作为参数并返回 file-icons-js 类名。
import fileIcons from 'file-icons-js';
function getFileIcon(fileName) {
const parts = fileName.split('.');
const ext = parts[parts.length - 1];
return fileIcons.getClassWithColor(`.${ext}`); // 获取图标类名
}现在我们可以在一个 HTML 文件中使用这个函数，例如：
-- -------------------- ---- -------
------
------
----- ---------------- -------------------------------------------------------------------------------
-------
----- -
---------- -----
----------- -----
----------- -------
-
--------
-------
------
---- -------------
-- -----------------------------------------
-- ----------------------------------------
-- ----------------------------------------
-- ----------------------------------------
------
-------
-------这个示例演示了如何在一个 HTML 文件中使用 file-icons-js 为文件添加图标。在这里，我们使用类名 .icon 将所有图标居中。我们使用 i 标签显示 icon，i 标签的类由 getFileIcon 函数提供。
你可以在 GitHub 上查看文件扩展名和其对应的类名：file-icons-js/github.com/milo-minderbinder/file-icons-js
自定义图标颜色
默认情况下，file-icons-js 会使用黑色渲染所有图标。但是，有时候我们需要根据我们的项目需要自定义图标颜色，file-icons-js 提供了自定义颜色的方法。
在上面的示例中，我们可以看到 getFileIcon 函数返回的类名中有一个 .fi- 前缀。我们可以使用 .fi-*color* 这个类来自定义颜色。例如，.fi-orange 将使用橙色进行渲染。
import fileIcons from 'file-icons-js';
function getFileIcon(fileName) {
const parts = fileName.split('.');
const ext = parts[parts.length - 1];
return fileIcons.getClassWithColor(`.${ext}`, 'orange'); // 获取橙色图标类名
}.parent { color: orange; }
/* ... */
上面的代码演示了如何从类名 .fi- 和 .parent 中使用 orange 颜色为元素 .icon 定义样式。
目前，file-icons-js 支持 16 种颜色，分别是：black、blue、brown、gray、green、indigo、orange、pink、purple、red、teal、yellow、crimson、cyan、lime、emerald。可以根据项目需求选择合适的颜色。
更高级的用法
我们可以使用 getClass() 函数获取 CSS 类名，进而进行更高级的用法。例如，可以使用一个 getIcons() 函数来为一个文件夹中的所有文件返回图标元素。
-- -------------------- ---- -------
------ --------- ---- ----------------
-------- ---------------- -
----- ----- - ------------------- -- ---------------
------ ---------------- -- -
----- --- - ----------------- - ------------------------- - ---
----- --------- - ------------------------------
----- ---- - ----------------------------
------------------------------ -- ---------- - ---
------ -----
---
-这个示例演示了如何使用 file-icons-js 为文件夹中的文件生成图标。getFileIcon 函数返回可以使用的类名，getIcons 函数使用这些类名生成图标并返回 i 元素的数组。
结束语
file-icons-js 提供了一种快速为项目中添加图标的简便方法。本文介绍了 file-icons-js 的安装，基础用法和高级用法，并提供了代码示例。对于任何需要为前端应用程序添加图标的项目都会有所帮助。
请注意，file-icons-js 只提供了很多常见的图标，不一定能包含所有你需要的图标。如果你需要更多定制化的需求，你可以重新创建文件图标的 CSS 类。这里提供一个在线图标生成工具，可以手动生成自己需要的图标。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaacfb5cbfe1ea06105a5