简介
在当前数字货币市场中，随着市值不断攀升，越来越多的投资者都开始了他们的数字货币之旅。随着数字货币越来越普及，每家电商平台都需要提供数字货币支付选项。此时，开发人员需要使用一些与数字货币相关的 icon 进行开发。而 cryptocurrency-icons 就是一个方便的 npm 图标组件包，提供了各个数字货币的 icon，可以帮助前端开发者快速构建各种数字货币应用。
在本篇文章中，我们将会介绍如何使用 cryptocurrency-icons。我们首先会介绍该包的安装过程，包括如何在项目中使用它。之后我们会介绍如何通过调用 cryptocurrency-icons 的 API，来实现其提供的各种数字货币的 icon。最后我们会介绍这个包的使用注意事项和一些推荐的 best practices。
安装
在开始前确保你的项目环境中已经安装了 NodeJS 和 npm。如果没有安装，建议使用这里进行安装。
在项目中安装 cryptocurrency-icons 非常简单。在项目目录下执行以下命令即可：
npm install cryptocurrency-icons --save
其中 --save 参数是用于将该包的版本信息保存到项目的 package.json 文件中。
可以在初始化后的项目目录（即 node_modules/cryptocurrency-icons 目录）下找到一组 SVG 文件。这组文件会对所有支持的数字货币进行覆盖。
使用方法
在已经安装并保存了 cryptocurrency-icons 之后，我们可以开始使用它了。在你的项目中添加下面的代码，可以在 HTML 中使用该包提供的各种数字货币的 icon 了。
<i class="cc BTC"></i>
其中，class 的作用是告诉浏览器要使用的图标。cc 是前缀，表示这是一组加密货币的缩写，而 BTC 则是具体的加密货币缩写。
如果在一个多项指数的表格中使用，这样就不用在每一个元素中单独添加一个 img 标签或其他的因素，只需在样式文件中定义该类，就能在所有元素中使用，减少了许多代码量。
.cc {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}在 CSS 文件中定义全局样式即可，currentColor 表示该元素的字体颜色。
API
cryptocurrency-icons 在样式上提供了以下选择器：
.cc.ICON-CODE /* Defines an icon in 'iconfont'. */ .cc-color-ICON-CODE /* Defines a colored icon in 'iconfont'. */ .cc-gradient-ICON-CODE /* Defines a gradient icon in 'iconfont'. */ .cc-stroke-ICON-CODE /* Defines a stroke icon in 'iconfont'. */ .cc-stroke-color-ICON-CODE /* Defines a stroke-color icon in 'iconfont'. */ .cc-stroke-gradient-ICON-CODE /* Defines a stroke-gradient icon in 'iconfont'. */
其中 ICON-CODE 表示数字货币缩写。该选择器定义了图标的主题，包括颜色、梯度和边线等信息。
注意事项
- 支持的缩写
通过 cryptocurrency-icons 支持的数字货币可能会与你的预期略有不同。在安装该包之前，你可以查看一下 cryptocurrency-icons 的 GitHub 页面，了解该包具体支持哪些数字货币。例如，对于想要用于开发以太坊智能合约的开发者，需要注意的是，该包中 Ether 的缩写是 ETH，而不是 ETC。这个小错误在开发过程中很容易出现，建议使用时注意。
- icon 格式
考虑到不同项目中可能会有不同的需求，cryptocurrency-icons 支持了多种不同格式的 icon 选择器。不同的选择器具有不同的样式和图标文件，需要占用不同的网络带宽。
注意，使用 cryptocurrency-icons 所提供的 SVG 图标列表是很重要的。由于 SVG 可以按照不同的比例缩放，并且在各种现代设备上都可以实现灵活的效果，所以使用这些 SVG 图标而不是在 app 包中使用 bitmap 图标（如 PNG、JPG 等）是唯一的选择。
- 缩放
cryptocurrency-icons 提供的 SVG 图标可以在编写 CSS 代码时轻松调整大小，但是对于在 HTML 中直接调整图标大小的开发者来说，可能就需要进行一些额外的样式操作了。有时候这个过程会有点棘手，需要额外的代码和样式。所以，建议在使用 cryptocurrency-icons 图标时，使用 CSS 进行统一样式控制，以实现更一致的效果。
最佳实践
使用 cryptocurrency-icons 构建数字货币应用程序可能很有趣，但这种图标组件可以扩展到许多不同类型的项目中。下面提供了一些基本的最佳实践：
- 使用语义化的图标名称
在开发网站或应用程序时，最好优先使用语义化的图标名称。对于数字货币应用程序来说，这意味着使用正确的数字货币缩写，并在使用 cryptocurrency-icons 时进行统一命名规范。
- 避免乱用样式
如果不加思考地乱用 cryptocurrency-icons 的样式选择器可能会导致样式冲突和系统性能下降。在使用该样式时，应遵循样式和文档建议，并在实际部署之前进行充分测试。
- 提供额外的可访问性选择器
尽管 cryptocurrency-icons 提供了默认样式，但始终需要考虑到不同的设备和用户的不同阅读需求。添加可访问性标记标记，以便于可缩放 SVG 图标实现。
<svg class="icon Bitcoin" role="img" aria-label="Bitcoin"><use xlink:href="#Bitcoin"/></svg>
在表格中使用该选择器，则可以增加语义化标记，不影响样式。
最后，cryptocurrency-icons 是一款方便的前端工具库，可以快速创建各种数字货币缩写图标，开箱即用，节约了大量的开发时间并提高了开发效率。在使用前建议阅读文档并掌握基本使用方法，并合理使用 API 和注意事项以实现最佳的开发效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f7033c8a9b7065299ccbab9