Based on the Cryptocurrency Icons

Table of Contents

• About
• Install
• Examples
• Coins Model Overview
• Api

About

The project contains almost 400 crypto currencies in the SVG format.

The project also have a generic icon for cryptocurrencies missing an icon here. and in addition some fiat currencies: USD, GBP, EUR, JPY, CNY, RUB.

You can use tools such as Sharp & Svg.Js to image processing and modifying SVG icons to Create your desired output.

Install

npm i @mh.alijany/crypto-icons

Examples

import { cryptoIcons, lightTheme } from "@mh.alijany/crypto-icons";

Use default themes :

cryptoIcons()
  .operation(lightTheme(1024))
  .saveSVG("./images");

Filter and save the icons :

cryptoIcons()
  .filter((coin) => coin.name == "Bitcoin")
  .saveManifest("./dir")
  .reload()
  .filter((coin) => coin.color == "#eab304")
  .saveSVG("./images");

Use SVG.js to manipulate SVG elements :

Note : this works in Node.Js environment

Note : The SVG.Box functions are currently unavailable

cryptoIcons()
  .modifySVG((svgJs) => {
    svgJs.height(200);
    svgJs.width(200);
  })
  .saveSVG("./images");

Use sharp to image processing :

cryptoIcons()
  .filter((coin) => coin.name == "Bitcoin")
  .sharp((sharpInstance) => sharpInstance.toFile("btc-bitcoin.png"));

Coins Model Overview

In this project, each Coin is an object that includes the name , symbol , id , color and svg of the Coin. The id is a combine of symbol-name which is lower case and its spaces have been replaced by dashes.

for example:

const Coin = {
  id: "btc-bitcoin",
  symbol: "BTC",
  name: "Bitcoin",
  color: "#f7931a",
  svg:
    '<svg height="32" width="32" xmlns="http://www.w3.org/2000/svg">...</svg>',
};

Api

cryptoIcons(): CryptoIcon

create new instance of CryptoIcon

import { cryptoIcons } from '@mh.alijany/crypto-icons';
const instance = cryptoIcons();

saveManifest(path: string, name?: string, callback?: Function) : CryptoIcon

Writes a JSON file that contains an array of ‍‍Coin objects

Parameter	Description
path	directory to write output
name	name of the output file (default is manifest.json)
callback	map function to customize the default Coin

example:

cryptoIcons()
  .saveManifest(
    "./dir",
    "manifest.json", 
    coin => coin
  );

modifySVG(callback: Function): CryptoIcons

Process SVG image whit sharp

Parameter	Description
callback	function whit an instance the sharp as parameter

example:

cryptoIcons()
  .sharp((sharpInstance, coin) => {
    sharpInstance.toFile(`${coin.id}.png`)
  });

filter(callback: Function): CryptoIcons

Filter the coins that meet the condition specified in a callback function.

Parameter	Description
callback	test function that Return true to keep the element, false otherwise.

example:

cryptoIcons()
  .filter((coin) => coin.name.startsWith("Bit"));

saveSVG(path: string, name?: Function): CryptoIcons

Write the svg file of each Coin object in specified path

Parameter	Description
path	directory to write output
name	callback that return the name of the output file (default is coin.id.svg)

example:

cryptoIcons()
  .saveSVG("./dir", (coin) => `${coin.id}.svg`);

reload(): CryptoIcons

Reload all of the Coin objects

example:

cryptoIcons()
 .reload();

operation(operation: Operation): CryptoIcons

this function accept an operation as arguments which can be used for styling the icons. Several operation have been written which accept the icon size as an argument.

Default operators:

• lightTheme
• darkTheme
• grayTheme

example:

cryptoIcons()
 .operation(lightTheme(1024))
 .saveSVG("./images");