npm 包 coinmarketcap-icons 使用教程

简述

coinmarketcap-icons 是一个 npm 包，它提供了加密货币市场的图标。这些图标可以方便地用于前端项目中，让项目得到更好的展示效果。

本文将介绍 npm 包 coinmarketcap-icons 的使用教程，包括如何安装、使用和示例代码等内容。本文的目标读者是熟悉 npm 和前端开发的人员。

安装

安装 coinmarketcap-icons 很简单，在终端中执行以下命令即可：

--- ------- -------------------

使用

coinmarketcap-icons 支持两种使用方式：

1. 作为模块导入

可以将 coinmarketcap-icons 作为一个模块导入，然后使用里面提供的函数获取相应的图标。

示例代码：

------ - ---------- - ---- ----------------------

----- ------- - ------------------
--------------------- -- ------------------------------------------------------------

2. 作为 Font 图标

coinmarketcap-icons 也支持作为一个 Font 图标使用。在使用之前，需要将 coinmarketcap-icons/dist/fonts 目录下的字体文件引用到项目中，然后通过 class 属性来指定图标的样式。

示例代码：

  1. 引用字体文件
---------- -
  ------------ ----------------------
  ---- --------------------------------------- -- -------- --
  ---- --------------------------------------------- ---------------------------- -- ------- --
       ---------------------------------------- ---------------- -- ------ --- --
       --------------------------------------- --------------- -- ------ ---------- --------- --
       -------------------------------------- ------------------- -- ------ ---------- --------- --------- --------- --
       ---------------------------------------------------------- -------------- -- --- --------------- ------- --
-

-- ------------ -------------------- ---- --
-------------------- -
  ------------ ----------------------
  ---------- -----
  ----------- -------
  ------------ -------
  ------------ --
  ---------------- -----
  ----------- -------
  -------- -------------
  ----------------------- ------------
  ------------------------ ----------
-

-- --------- ----- ----- --
---------------- -
  -------- -------- -- -- --- --------- ------- --
-
  1. 在 HTML 中使用
-- -------------------------- --------------

示例代码

下面是一个完整的示例代码，通过 getIcons 函数获取各个加密货币的图标，并将它们用作 Font 图标展示：

------ - -------- - ---- ----------------------

----- ----- - ----------- -- ---------

----- -------- - ------------------------------------- -- ---------
----- ---------- - --------------------------------------- -- ---------------

------------------ -- -
  ----- - --- ------- ----- ------ - - -----

  -- ---- - --------
  ----- -------- - ----------------------------
  ------------------ - -------------------- ------------------------------
  -------------- - -----
  ---------------------------------- -- -- ---------------------- -- ----------

  -- ---------
  ----- -------- - -----------------------------
  -------------------------------
  -------------------------------
---

-------- -------------------- -
  ----- - ------- ----- ------ - - -----
  
  -- -----------
  -------------------- - -
    ---- -------------------------
      ---- --------------- -----------------
    ------
    ---- ------------------
      ---- ------------------------------
      ---- --------------------------
    ------
  --
-

总结

本文介绍了 npm 包 coinmarketcap-icons 的使用教程，包括如何安装、使用和示例代码等内容。希望读者通过本文的学习，能够更好地使用 coinmarketcap-icons，并将其应用于自己的前端项目中。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065f7c238a385564ab6a53

阅读全文

猜你喜欢

  • npm 包 @ghalex/tus-node-server 使用教程

    @ghalex/tus-node-server 是一款基于 tus 协议的 Node.js 服务器，用于处理大文件传输。它具有可扩展性、可定制化等特点，被广泛应用于大文件上传、断点续传等场景。

    3 年前
  • 前端开发：使用 @gerhobbelt/grunt-banner npm 包的指南

    在前端开发中，Grunt 是一个广泛使用的构建工具，它提供了一种简便的方式来管理和自动化开发流程。其中一个 Grunt 插件是 @gerhobbelt/grunt-banner，它提供了一种方便的方式...

    3 年前
  • npm 包 deep-thought.js 使用教程

    前言 在前端开发过程中，我们常常需要使用各种第三方库或插件来实现自己的需求。而 npm 是一个很好的包管理工具，可以方便地添加、更新和删除我们的依赖包。 今天，我要介绍的是一个很实用的 npm 包 d...

    3 年前
  • npm 包 intellij-license-cli 使用教程

    介绍 intellij-license-cli 是一个基于 Node.js 的命令行工具，可用于生成 IntelliJ IDEA 的安装许可证。这个工具可以轻松地帮助我们在不需要手动向 JetBrai...

    3 年前
  • npm 包 mmosru-palindrome 使用教程

    前言 本文将介绍如何使用 mmosru-palindrome 包，这是一个可以检查字符串是否回文的 npm 包。该包通过简洁明了的 API，提供了一种轻松的方法来检验字符串是否为回文。

    3 年前
  • npm 包 ngx-circle-progress 使用教程

    什么是 ngx-circle-progress ngx-circle-progress 是一个用于构建圆形进度条的 Angular 组件。它内置了多个自定义选项，可以自定义进度条的颜色、厚度、绘制线条...

    3 年前
  • npm 包 react-rocket-mask 使用教程

    在前端开发中，我们常常需要使用表单控件进行输入和提交数据。而表单控件的输入格式或者展示方式可能与需求不符合，此时我们就需要使用mask来约束或调整输入方式。今天要介绍的是一个非常实用的mask组件——...

    3 年前
  • npm 包 rocket-mask 使用教程

    在前端开发中，有些时候需要对数据进行脱敏处理，比如在显示电话号码、邮件地址等信息时，为保护用户隐私，我们需要将一些关键信息部分用 * 替换掉。这时候就需要使用一个强大的 npm 包 rocket-ma...

    3 年前
  • npm 包 rsemi_js_footer 使用教程

    什么是 rsemi_js_footer？ rsemi_js_footer 是一个用于在网页底部添加随机签名的轻量级 JavaScript 库，可以帮助前端开发者快速添加个性化、有趣的网页底部签名文案。

    3 年前
  • npm 包 vue-slug-input 使用教程

    前言 在前端开发过程中，经常会遇到需要生成 URL Slug 的情况。URL Slug 即指 URL 中的底线分隔符，用于表示文章标题等内容。但是对中文字符需要进行转换，这就是一个繁琐的问题。

    3 年前
  • npm 包 babel-plugin-undecorate 使用教程

    简介 在使用 JavaScript 进行开发的过程中，我们经常会使用 ES6 提供的 class 和装饰器语法来简化代码，增加可读性，但是由于浏览器对于 ES6 的支持程度不尽相同，而且装饰器语法本身...

    3 年前
  • npm 包 generations 使用教程

    什么是 generations generations 是一个用于生成随机数据的 npm 包。它提供了很多种类型的数据，包括姓名、电话号码、日期、邮件地址、地址等等，可以用于前端开发中的自动化测试、模...

    3 年前
  • npm 包 react-sort-search-table 使用教程

    React-sort-search-table 是一个简单易用的 React 表格组件，可以方便地进行排序和搜索操作，提高前端开发效率和美观度。本文将会详细介绍如何使用 react-sort-sear...

    3 年前
  • npm 包 sleek-log 使用教程

    前言 在前端开发中，经常需要输出一些调试信息或者日志信息，而 console.log 不能满足我们的需求，因为输出的信息不够明确、可读性不够好。而且在正式环境下要及时清除一些无用的日志信息，否则会带来...

    3 年前
  • npm 包 zerp 使用教程

    介绍 zerp 是一个轻量级的 JavaScript Web 框架，它提供了简单易用的 API，能够快速开发出高性能的 Web 应用程序。它是一款响应式的框架，使用了许多现代的 Web 技术来提高性能...

    3 年前
  • npm 包 immutable-update-values 使用教程

    随着前端开发变得越来越复杂，以及 JavaScript 语言继续发展壮大，使用合适的工具来提高开发效率变得越发重要。immutable-update-values 是一个 npm 包，可用于在不改变原...

    3 年前
  • npm包buble-jest-flow使用教程

    介绍 buble-jest-flow是一个用于ES6转换的npm包，可以在Jest测试框架中使用。该库使用了Buble和Flow作为后端来处理ES6构建，并使用Jest作为前端运行环境。

    3 年前
  • 前端开发必备：npm 包 @chrayo/number-formatter 使用教程

    在前端开发过程中，我们常常需要对数字进行格式化处理。例如，我们需要将 10000 转化为 10,000 这样的字符串形式，或者将小数转化为百分数形式，或者将数字金额格式化为千位分隔符形式等。

    3 年前
  • npm 包 adon-candle 使用教程

    adon-candle 是一款用于生成带线条和颜色填充效果的蜡烛图的 npm 包。它可以在前端开发中用于可视化数据、交易所、股票市场等领域的应用。 本文将介绍 adon-candle 的安装和使用方法...

    3 年前
  • npm 包 vue-modal-wizard 使用教程

    随着前端技术的不断发展，越来越多的优秀的 npm 包应运而生。vue-modal-wizard 就是其中之一，它是一个用于 Vue.js 的模块化工具，可以快速构建一个强大的模态框向导。

    3 年前

相关推荐

    暂无文章