在前端开发中，使用各种开源库已经成为常态，这样可以快速搭建起自己的项目。而 npm 是前端开发中最常用的包管理工具之一。本文将介绍一个开源的 npm 包，名为 open-source-hero，该包提供了一组开源英雄图标，并支持自定义颜色。
安装及引入
首先我们需要在命令行中使用 npm 安装 open-source-hero 包。打开命令行工具并输入以下命令：
npm install open-source-hero
安装完成后，在需要使用该包的文件中import引入：
import OpenSourceHero from 'open-source-hero'; import 'open-source-hero/dist/index.css';
引入时需要同时引入 css 文件，否则样式将无法正常显示。
基本使用
该包中提供了三种尺寸的英雄图标，在使用时需要先选择适合自己需求的尺寸。代码如下所示：
<OpenSourceHero name="github" size="64px" color="#000000" />
name 属性为必选属性，用于指定要使用的英雄图标名称，如上面的示例中使用了 github 图标，其它图标名称请查看官方文档。
size 属性表示英雄图标的尺寸，默认为 32px，可以自定义修改。
color 属性表示英雄图标的颜色，默认为白色，可以自定义修改。
自定义颜色
如果需要使用自定义颜色，可以通过 css 中的变量进行修改，如下所示：
:root {
--os-hero-color: #ff0000;
}修改完成后，在使用组件时就可以不用再传入 color 属性了。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------------- ---- -------------------
------ ----------------------------------
-------- ----- -
------ -
---- ----------------
---------------
-------------
-----------
---------------
--
------
--
-
------ ------- ----总结
本文介绍了如何使用 npm 包 open-source-hero，以及如何自定义英雄图标的尺寸和颜色。使用该包可以快速搭建前端应用程序，并且可以通过自定义颜色使应用程序更符合个人喜好和需求。如果你也在寻找一组漂亮的开源英雄图标，不妨试试 open-source-hero！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005563781e8991b448d31ec