diff --git a/README.md b/README.md
index 1c3b4bb8d..252cbf0c2 100644
--- a/README.md
+++ b/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).
(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.)
-
+[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
+```
-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.
\ No newline at end of file
+and include both in the commit.
diff --git a/generate.js b/generate.js
new file mode 100644
index 000000000..d52578d74
--- /dev/null
+++ b/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);
diff --git a/manifest.json b/manifest.json
index ff7b5270a..b747dccfd 100644
--- a/manifest.json
+++ b/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",
diff --git a/originals/1UP.svg b/originals/1UP.svg
new file mode 100644
index 000000000..e5c951bbc
--- /dev/null
+++ b/originals/1UP.svg
@@ -0,0 +1,121 @@
+
+
+
diff --git a/originals/ABT.svg b/originals/ABT.svg
new file mode 100644
index 000000000..22e0a7e01
--- /dev/null
+++ b/originals/ABT.svg
@@ -0,0 +1,178 @@
+
+
+
diff --git a/originals/ACE.svg b/originals/ACE.svg
new file mode 100644
index 000000000..cadc968fa
--- /dev/null
+++ b/originals/ACE.svg
@@ -0,0 +1,119 @@
+
+
+
diff --git a/originals/ALI.svg b/originals/ALI.svg
new file mode 100644
index 000000000..9437e51ff
--- /dev/null
+++ b/originals/ALI.svg
@@ -0,0 +1,28 @@
+
+
+
diff --git a/originals/ANT.svg b/originals/ANT.svg
new file mode 100644
index 000000000..8172eb803
--- /dev/null
+++ b/originals/ANT.svg
@@ -0,0 +1,26 @@
+
+
+
diff --git a/originals/ANTV2.svg b/originals/ANTV2.svg
new file mode 100644
index 000000000..8172eb803
--- /dev/null
+++ b/originals/ANTV2.svg
@@ -0,0 +1,26 @@
+
+
+
diff --git a/originals/AQUA.svg b/originals/AQUA.svg
new file mode 100644
index 000000000..fd967c8a9
--- /dev/null
+++ b/originals/AQUA.svg
@@ -0,0 +1,22 @@
+
+
+
diff --git a/originals/AXS.svg b/originals/AXS.svg
new file mode 100644
index 000000000..18de78b99
--- /dev/null
+++ b/originals/AXS.svg
@@ -0,0 +1,40 @@
+
+
+
diff --git a/originals/AXSV2.svg b/originals/AXSV2.svg
new file mode 100644
index 000000000..18de78b99
--- /dev/null
+++ b/originals/AXSV2.svg
@@ -0,0 +1,40 @@
+
+
+
diff --git a/originals/FXS.svg b/originals/FXS.svg
new file mode 100644
index 000000000..5c9b620f0
--- /dev/null
+++ b/originals/FXS.svg
@@ -0,0 +1,29 @@
+
+
+
diff --git a/originals/GAMMA.svg b/originals/GAMMA.svg
new file mode 100644
index 000000000..5853321a9
--- /dev/null
+++ b/originals/GAMMA.svg
@@ -0,0 +1,26 @@
+
+
+
diff --git a/originals/LOOKS.svg b/originals/LOOKS.svg
new file mode 100644
index 000000000..1c74a7178
--- /dev/null
+++ b/originals/LOOKS.svg
@@ -0,0 +1,25 @@
+
+
+
diff --git a/originals/THRESHOLD.svg b/originals/THRESHOLD.svg
new file mode 100644
index 000000000..bc8cff396
--- /dev/null
+++ b/originals/THRESHOLD.svg
@@ -0,0 +1,24 @@
+
+
+
diff --git a/originals/UNB.svg b/originals/UNB.svg
new file mode 100644
index 000000000..3b307226d
--- /dev/null
+++ b/originals/UNB.svg
@@ -0,0 +1,18 @@
+
+
diff --git a/originals/avax.svg b/originals/avax.svg
new file mode 100644
index 000000000..068b39dab
--- /dev/null
+++ b/originals/avax.svg
@@ -0,0 +1,13 @@
+
+
+
diff --git a/originals/joe.svg b/originals/joe.svg
new file mode 100644
index 000000000..877a8f4b7
--- /dev/null
+++ b/originals/joe.svg
@@ -0,0 +1,384 @@
+
+
+
diff --git a/originals/klo.svg b/originals/klo.svg
new file mode 100644
index 000000000..ca16accba
--- /dev/null
+++ b/originals/klo.svg
@@ -0,0 +1,22 @@
+
+
+
diff --git a/originals/link.svg b/originals/link.svg
index 569c3ba01..8379b1b48 100644
--- a/originals/link.svg
+++ b/originals/link.svg
@@ -1,9 +1 @@
-
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/originals/mnde.svg b/originals/mnde.svg
new file mode 100755
index 000000000..578b864b1
--- /dev/null
+++ b/originals/mnde.svg
@@ -0,0 +1,27 @@
+
+
+
diff --git a/originals/orca.svg b/originals/orca.svg
new file mode 100755
index 000000000..abd7f1b9f
--- /dev/null
+++ b/originals/orca.svg
@@ -0,0 +1,14 @@
+
+
diff --git a/originals/png.svg b/originals/png.svg
new file mode 100644
index 000000000..bdd69445e
--- /dev/null
+++ b/originals/png.svg
@@ -0,0 +1,72 @@
+
+
+
diff --git a/originals/qi.svg b/originals/qi.svg
new file mode 100644
index 000000000..04aeedde9
--- /dev/null
+++ b/originals/qi.svg
@@ -0,0 +1,21 @@
+
+
+
diff --git a/originals/ray.svg b/originals/ray.svg
new file mode 100755
index 000000000..d0acb2839
--- /dev/null
+++ b/originals/ray.svg
@@ -0,0 +1,47 @@
+
+
+
diff --git a/originals/slnd.svg b/originals/slnd.svg
new file mode 100755
index 000000000..f5873f5b2
--- /dev/null
+++ b/originals/slnd.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/originals/srm.svg b/originals/srm.svg
new file mode 100755
index 000000000..7169dc9bb
--- /dev/null
+++ b/originals/srm.svg
@@ -0,0 +1,37 @@
+
+
+
diff --git a/originals/usdc.svg b/originals/usdc.svg
index d802fb6d6..366ab52b6 100644
--- a/originals/usdc.svg
+++ b/originals/usdc.svg
@@ -1,16 +1,20 @@
-
-
\ No newline at end of file
+
+
+
diff --git a/originals/usdt.svg b/originals/usdt.svg
new file mode 100644
index 000000000..b54104951
--- /dev/null
+++ b/originals/usdt.svg
@@ -0,0 +1,17 @@
+
+
+
diff --git a/originals/xava.svg b/originals/xava.svg
new file mode 100644
index 000000000..8bb452197
--- /dev/null
+++ b/originals/xava.svg
@@ -0,0 +1,56 @@
+
+
+