Coin 1825

README.md

@@ -1,15 +1,6 @@
 # Cryptocurrency Icons
 
-[This project](http://cryptoicons.co) contains over 7,500 icons – almost 500 crypto currencies, in 4 styles and a range of sizes. Completely free. All we ask is that you don’t claim them as your own, and share this resource with others.
-
-We also have some fiat currencies: `USD`, `GBP`, `EUR`, `JPY`, `CNY`, `RUB`. *(We don't intend to add more)*
-
-Images are in the PNG format (transparent) in `32×32`, `32×32 (@2x)`, and `128×128` variants, along with SVG versions.
-
-There's also a [`generic` icon](https://github.com/spothq/cryptocurrency-icons/blob/master/svg/color/generic.svg) that can be used for cryptocurrencies missing an icon here.
-
-If there is an altcoin you’re looking for that hasn’t been included, please [create a new issue](https://github.com/spothq/cryptocurrency-icons/issues/new?assignees=&labels=coin+request&template=add-currency.md&title=Add+Currency+%28Symbol%29).<br><sub>(We don't accept pull request contributions for new or updated icons at this time. Open an issue and we'll do the icon for you.)</sub>
-
+[This project](http://cryptoicons.co) was forked from https://github.com/spothq/cryptocurrency-icons & is now used to generate icons & react components for BitGo apps.
 
 ## Install 🚀
 
@@ -21,18 +12,12 @@ You can then import the icons from `./node_modules/cryptocurrency-icons`, for ex
 
 There's also a `manifest.json` file included in the package with a list of the currency symbol, the name of the icons and the associated colors.
 
+## Adding a new coin
 
-## Special Thanks 👏
+After adding the new icon to the `/svg/color` directory, generate the corresponding React component for it:
 
-Thanks to [Christopher Downer](https://github.com/cjdowner) for starting this project and all our wonderful [contributors](https://github.com/spothq/cryptocurrency-icons/graphs/contributors).
-
-
-## Used By
-
-- [vue-cryptoicon](https://github.com/man15h/vue-cryptoicon) - Cryptocurrency icons for Vue apps
-- [svelte-cryptoicon](https://github.com/alepop/svelte-cryptoicon) - Cryptocurrency icons for Svelte apps
-- [Crypto Tools](http://bunchoftext.com/apps/crypto-calculator) - Cryptocurrency icons for Crypto Tools macOS app
-- [Cryptocurrency Ticker](http://cryptocurrencyticker.info) - Cryptocurrency ticker for Windows and Linux Mint - Cinnamon
-- [Spot](http://spot-bitcoin.com) - Cryptocurrency wallet
+```
+$ npm run generate
+```
 
-<sub>We're always happy to see where, and how these icons are used. Feel free to share your creations with us, and we will put you in this list.</sub>
+and include both in the commit.

generate.js

@@ -0,0 +1,77 @@
+const { readdirSync, readFileSync } = require("fs");
+const { transform } = require("@svgr/core");
+const { join } = require("path");
+const esbuild = require("esbuild");
+
+const ICON_DIR = "./svg/icon";
+const ICON_COLOR_DIR = "./svg/color";
+
+function findSVGIds(svgString) {
+	const idRegex = /id="([^"]+)"/g;
+	const ids = [];
+	let match;
+
+	while ((match = idRegex.exec(svgString)) !== null) {
+		ids.push(match[1]);
+	}
+
+	return ids;
+}
+
+/**
+ * give all ids in an svg a globally unique value to prevent styling collisions
+ * @param {string} svgCode
+ * @param {string} iconName
+ * @returns
+ */
+const replaceIds = (svgCode, iconName) => {
+	const ids = findSVGIds(svgCode);
+	if (!ids.length) {
+		return svgCode;
+	}
+	let result = svgCode;
+	ids.forEach((id) => {
+		result = result
+			.replaceAll(`id="${id}"`, `id="${iconName}-${id}"`)
+			.replaceAll(`#${id}`, `#${iconName}-${id}`);
+	});
+	return result;
+};
+
+const generateComponents = (iconDir) => {
+	const icons = readdirSync(iconDir);
+	icons.forEach((file) => {
+		const [fileName] = file.split(".");
+		let iconName = fileName;
+		if (iconName === "index") {
+			iconName = "indexIcon";
+		}
+		const svgPath = join(iconDir, file);
+		const svgCode = readFileSync(svgPath, "utf8");
+
+		const jsCode = transform.sync(
+			replaceIds(svgCode, iconName),
+			{
+				expandProps: "end",
+				typescript: false,
+				jsx: false,
+			},
+			{ filePath: svgPath }
+		);
+
+		esbuild.buildSync({
+			outfile: `react/${iconName}.js`,
+			allowOverwrite: true,
+			loader: {
+				".js": "jsx",
+			},
+			stdin: {
+				contents: jsCode,
+				loader: "jsx",
+			},
+		});
+	});
+};
+
+generateComponents(ICON_DIR);
+generateComponents(ICON_COLOR_DIR);

manifest.json

@@ -304,6 +304,11 @@
 		"name": "BOScoin",
 		"color": "#00a8d6"
 	},
+	{
+		"symbol": "BOX",
+		"name": "BOX Token",
+		"color": "#efcaa8"
+	},
 	{
 		"symbol": "BPT",
 		"name": "Blockport",
@@ -319,6 +324,11 @@
 		"name": "Bread",
 		"color": "#fe5d86"
 	},
+	{
+		"symbol": "BSC",
+	  	"name": "BNB Smart Chain",
+		"color": "#f3ba2f"
+	},
 	{
 		"symbol": "BSD",
 		"name": "BitSend",
@@ -424,6 +434,11 @@
 		"name": "ChatCoin",
 		"color": "#1c98f7"
 	},
+	{
+		"symbol": "CHEX",
+		"name": "CHEX",
+		"color": "#0e79cb"
+	},
 	{
 		"symbol": "CHIPS",
 		"name": "CHIPS",
@@ -904,6 +919,11 @@
 		"name": "Gimmer",
 		"color": "#372d2c"
 	},
+	{
+		"symbol": "GMT",
+		"name": "Mercury Protocol",
+		"color": "#e6bc7b"
+	},
 	{
 		"symbol": "GNO",
 		"name": "Gnosis",
@@ -984,6 +1004,11 @@
 		"name": "Handshake",
 		"color": "#000000"
 	},
+	{
+		"symbol": "HNT",
+		"name": "HNT",
+		"color": "#38a2ff"
+	},
 	{
 		"symbol": "HODL",
 		"name": "HOdlcoin",
@@ -1087,7 +1112,7 @@
 	{
 		"symbol": "IQ",
 		"name": "Everipedia",
-		"color": "#55ddff"
+		"color": "#ee5ca1"
 	},
 	{
 		"symbol": "ITC",
@@ -1349,6 +1374,11 @@
 		"name": "NDZ",
 		"color": "#622fba"
 	},
+	{
+		"symbol": "NEAR",
+		"name": "NEAR",
+		"color": "#ffffff"
+	},
 	{
 		"symbol": "NEBL",
 		"name": "Neblio",
@@ -1929,11 +1959,21 @@
 		"name": "Sumokoin",
 		"color": "#2d9cdb"
 	},
+	{
+		"symbol": "SUN",
+		"name": "SUN",
+		"color": "#f8ba3a"
+	},
 	{
 		"symbol": "SUSHI",
 		"name": "SushiSwap",
 		"color": "#d65892"
 	},
+	{
+		"symbol": "SWISE",
+		"name": "SWISE",
+		"color": "#ffffff"
+	},
 	{
 		"symbol": "SYS",
 		"name": "Syscoin",
@@ -2084,6 +2124,11 @@
 		"name": "UTRUST",
 		"color": "#30367a"
 	},
+	{
+		"symbol": "VCNT",
+		"name": "VCNT",
+		"color": "#6fa340"
+	},
 	{
 		"symbol": "VERI",
 		"name": "Veritaseum",