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

阅读全文

猜你喜欢

  • ng2-smart-table-custom-filters 前端 npm 包使用教程

    在 Web 开发中，前端 npm 包已经成为了一个不可或缺的工具，可以帮助我们快速地搭建 Web 应用，并提供了许多有用的功能。其中，ng2-smart-table-custom-filters 是一...

    3 年前
  • npm 包 @mmintel/tachyons-sass 使用教程

    前言 在前端开发中，使用 CSS 框架可以让我们的代码更加模块化、可读性更强，同时也可以大大提高开发效率。Tachyons 是一个让我们在页面开发中更加快速、高效、灵活的 CSS 框架。

    3 年前
  • npm 包 graphql-binding-world-countries 使用教程

    GraphQL 是一种查询语言和同步的 API 标准，graphql-binding-world-countries 是一款可使用 GraphQL 查询获取国家相关信息的 npm 包。

    3 年前
  • npm包simple-rgb-hex-converter使用教程

    介绍 simple-rgb-hex-converter是一个用于将RGB值转换为十六进制颜色代码的npm包。它可以节省前端开发人员在转换颜色代码时的时间和精力。 安装 使用npm安装simple-rg...

    3 年前
  • npm 包 vue-test-helpers 使用教程

    介绍 在 Vue.js 应用的测试时，我们通常需要实例化一个组件，传递一些 props 和事件，然后观察结果是否符合预期。vue-test-utils 是官方推荐的 Vue.js 测试工具，其中就包含...

    3 年前
  • npm 包 youdao-translate-cli 使用教程

    在现代 web 开发中，前端工程师需要对多种技术有所了解，其中一项不可或缺的技能就是 i18n（国际化）。i18n 的核心在于将软件应用程序（或网页）本地化为特定语言，使不同国家、地区的用户均能轻松使...

    3 年前
  • npm 包 excel-addin 使用教程

    如果你需要在前端中操作 Excel 文件，那么 excel-addin npm 包会是一个非常优秀的选择。本文将深入讲解 excel-addin 的使用方法，并提供详细的示例代码以及学习和指导意义。

    3 年前
  • npm 包 nodebelt 使用教程

    在前端开发中，我们经常需要使用各种工具来帮助我们快速地开发和部署我们的应用程序。其中一个非常有用的工具是 npm 包 nodebelt。本文将为您介绍如何使用 nodebelt 来改善您的前端开发流程...

    3 年前
  • npm 包 rn-classnames 使用教程

    在 React Native 开发中，我们经常会遇到需要动态添加或删除组件样式 classname 的情况。通常我们会通过字符串拼接的方式来完成这个操作。然而，这种方式不够优雅且容易出错。

    3 年前
  • npm 包 @sgbj/angular-prism 使用教程

    介绍 在前端开发中，经常会需要对代码进行高亮展示。而 Prism.js 是一款轻量级的代码语法高亮库，支持多种语言，支持自定义样式。而 @sgbj/angular-prism 是 Prism.js 的...

    3 年前
  • npm 包 ckl-js-footer 使用教程

    前言 在前端开发中，经常需要在网站页面中添加底部导航栏。为了提高开发效率，我们可以使用 ckl-js-footer 这个 npm 包。它提供了简便的方式来创建具有高可自定义性的底部导航栏。

    3 年前
  • npm 包 excel-io 使用教程

    Excel 是日常办公中常用的工具，而在前端开发中，对于 Excel 的处理也是不可避免的。npm 上有很多处理 Excel 的包，而其中 excel-io 就是其中其中一款十分不错的工具。

    3 年前
  • npm 包 flyway-blog 使用教程

    前言 在前端开发中，我们经常需要使用各种工具来提升开发效率。而 npm 是前端工程师必不可少的工具之一。今天，我想介绍一款非常实用的 npm 包 —— flyway-blog。

    3 年前
  • npm包kv-demo使用教程

    前言 kv-demo是一个前端开发常用的npm包，它提供了一个用于存储键值对的轻量级存储器，通过kv-demo，我们可以方便地将键值对保存在localStorage、sessionStorage或co...

    3 年前
  • npm包 schulz-js-footer 使用教程

    前言 在前端开发中，我们经常需要在页面底部添加一些固定的信息，比如版权信息、联系方式等。这些信息通常是相对静态的，在页面中多次使用且格式相同。为了方便管理和维护，我们可以将这些信息封装成一个npm包，...

    3 年前
  • npm 包 react-native-scroll-up 使用教程

    前言 在开发移动应用时，总是希望用户能够顺畅地浏览页面。然而对于一些内容较长的页面，用户想要跳转到页面顶部时就需要滑动一段距离，这会降低用户体验。为了优化这个问题，我们可以使用一个名为“react-n...

    3 年前
  • npm 包 almost-test-1-1 使用教程

    介绍 almost-test-1-1（以下简称 almost-test）是一个功能强大的 npm 包，用于前端开发中的单元测试和自动化测试。它可以帮助开发者快速编写可靠的测试代码，提高开发效率和代码质...

    3 年前
  • npm 包 js-exporter 使用教程

    前言 前端开发中，我们经常会需要将一些 JavaScript 对象、数组、XMLHttpRequest 对象等输出到文件或通过网络传输。而 js-exporter 这个 npm 包则可以帮助我们方便地...

    3 年前
  • npm 包 opal-calendar-timeline 使用教程

    什么是 opal-calendar-timeline? opal-calendar-timeline 是一个基于 HTML、CSS 和 JavaScript 的可定制化时间轴组件库。

    3 年前
  • npm 包 phpq 使用教程

    介绍 phpq 是一个基于 Node.js 的命令行工具，可以使用它来将 PHP 代码转换为 JavaScript 代码。它适用于需要将 PHP 代码嵌入到 Node.js 应用程序中的情况。

    3 年前

相关推荐

    暂无文章