简述
coinmarketcap-icons 是一个 npm 包，它提供了加密货币市场的图标。这些图标可以方便地用于前端项目中，让项目得到更好的展示效果。
本文将介绍 npm 包 coinmarketcap-icons 的使用教程，包括如何安装、使用和示例代码等内容。本文的目标读者是熟悉 npm 和前端开发的人员。
安装
安装 coinmarketcap-icons 很简单，在终端中执行以下命令即可：
npm install coinmarketcap-icons
使用
coinmarketcap-icons 支持两种使用方式：
1. 作为模块导入
可以将 coinmarketcap-icons 作为一个模块导入，然后使用里面提供的函数获取相应的图标。
示例代码：
import { getIconUrl } from 'coinmarketcap-icons';
const iconUrl = getIconUrl('BTC');
console.log(iconUrl); // 输出：https://s2.coinmarketcap.com/static/img/coins/64x64/1.png2. 作为 Font 图标
coinmarketcap-icons 也支持作为一个 Font 图标使用。在使用之前，需要将 coinmarketcap-icons/dist/fonts 目录下的字体文件引用到项目中，然后通过 class 属性来指定图标的样式。
示例代码：
- 引用字体文件
-- -------------------- ---- -------
---------- -
------------ ----------------------
---- --------------------------------------- -- -------- --
---- --------------------------------------------- ---------------------------- -- ------- --
---------------------------------------- ---------------- -- ------ --- --
--------------------------------------- --------------- -- ------ ---------- --------- --
-------------------------------------- ------------------- -- ------ ---------- --------- --------- --------- --
---------------------------------------------------------- -------------- -- --- --------------- ------- --
-
-- ------------ -------------------- ---- --
-------------------- -
------------ ----------------------
---------- -----
----------- -------
------------ -------
------------ --
---------------- -----
----------- -------
-------- -------------
----------------------- ------------
------------------------ ----------
-
-- --------- ----- ----- --
---------------- -
-------- -------- -- -- --- --------- ------- --
-- 在 HTML 中使用
<i class="coinmarketcap-icons icon-btc"></i>
示例代码
下面是一个完整的示例代码，通过 getIcons 函数获取各个加密货币的图标，并将它们用作 Font 图标展示：
-- -------------------- ---- -------
------ - -------- - ---- ----------------------
----- ----- - ----------- -- ---------
----- -------- - ------------------------------------- -- ---------
----- ---------- - --------------------------------------- -- ---------------
------------------ -- -
----- - --- ------- ----- ------ - - -----
-- ---- - --------
----- -------- - ----------------------------
------------------ - -------------------- ------------------------------
-------------- - -----
---------------------------------- -- -- ---------------------- -- ----------
-- ---------
----- -------- - -----------------------------
-------------------------------
-------------------------------
---
-------- -------------------- -
----- - ------- ----- ------ - - -----
-- -----------
-------------------- - -
---- -------------------------
---- --------------- -----------------
------
---- ------------------
---- ------------------------------
---- --------------------------
------
--
-总结
本文介绍了 npm 包 coinmarketcap-icons 的使用教程，包括如何安装、使用和示例代码等内容。希望读者通过本文的学习，能够更好地使用 coinmarketcap-icons，并将其应用于自己的前端项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f7c238a385564ab6a53