Added SOL, GRT, STX, AAVE, CRV, SUSHI, NKN, SNX, ANKR, KSM

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-cryptoicon",
-  "version": "0.17.1",
+  "version": "0.17.2",
   "description": "Beautiful pixel perfect 400+ cryptocurrency and 10+ Fiat currency icon",
   "main": "lib/vue-cryptoicon.common.js",
   "author": "man15h",
@@ -46,7 +46,7 @@
     "prod": "cross-env NODE_ENV=production vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
     "test": "npm run test:unit",
-    "update": "node -r esm scripts/updateManifest.js && node scripts/fetchDetails.js",
+    "update": "node -r esm scripts/build.js  && node -r esm scripts/updateManifest.js && node scripts/fetchDetails.js",
     "new": "node -r esm scripts/newIcons.js",
     "update:manifest": "node -r esm scripts/updateManifest.js"
   },
@@ -68,7 +68,7 @@
     "babel-eslint": "^10.0.1",
     "babel-jest": "^23.6.0",
     "cross-env": "^5.2.0",
-    "cryptocurrency-icons": "^0.10.1",
+    "cryptocurrency-icons": "^0.17.2",
     "eslint": "^5.15.1",
     "eslint-config-prettier": "^3.1.0",
     "eslint-loader": "^2.1.2",

scripts/build.js

@@ -0,0 +1,56 @@
+const fs = require('fs');
+const glob = require('glob');
+const path = require('path');
+const { capitalize, removeSvg, fixName } = require('./helpers');
+
+const rootDir = path.join(__dirname, '..');
+
+const indexFile = path.join(rootDir, 'src', 'icons', 'index.js');
+const allIcons = [];
+glob(
+  `${rootDir}/node_modules/cryptocurrency-icons/svg/color/*.svg`,
+  (_, icons) => {
+    fs.writeFileSync(indexFile, '', 'utf-8');
+
+    icons.forEach(icon => {
+      const colorSvg = fs.readFileSync(icon, 'utf-8');
+      const blackSvg = fs.readFileSync(icon.replace('color', 'black'), 'utf-8');
+
+      const [name] = path.basename(icon).split('.');
+      const capitalizedName = capitalize(fixName(name));
+      const colorSvgContent = removeSvg(colorSvg);
+      const blackSvgContent = removeSvg(blackSvg);
+      const template =
+        `const ${capitalizedName} = {
+        symbol: '${fixName(name)}',
+        color: '#000', \ncolorIcon() { return ` +
+        '`' +
+        colorSvgContent +
+        '`' +
+        ` }, \nplainIcon: c => {
+            return` +
+        '`' +
+        blackSvgContent.replace(
+          '<path',
+          '<path fill-rule="evenodd" fill="${c ? c : this.color}"'
+        ) +
+        '`\n' +
+        `} }\n export default ${capitalizedName}; `;
+      //   console.log(prettier.format(template, { semi: false, parser: 'babel' }));
+      fs.writeFileSync(
+        `${rootDir}/src/icons/${fixName(name).toLowerCase()}.js`,
+        template,
+        'utf-8'
+      );
+      const importString = `import ${fixName(
+        capitalizedName
+      )} from './${fixName(name).toLowerCase()}';\r\n`;
+      fs.appendFileSync(indexFile, importString, 'utf-8');
+      allIcons.push(capitalizedName);
+    });
+    const exportString = `export {${fixName(
+      allIcons.join(', ')
+    )}} \r\nexport default [${allIcons.join(', ')}]`;
+    fs.appendFileSync(indexFile, exportString, 'utf-8');
+  }
+);

scripts/helpers.js

@@ -0,0 +1,48 @@
+exports.capitalize = string => string.charAt(0).toUpperCase() + string.slice(1);
+exports.fixName = name => {
+  switch (name) {
+    case '0xbtc':
+      return 'ZeroxBtc';
+    case '2give':
+      return 'TwoGive';
+    default:
+      return name;
+  }
+};
+
+exports.removeSvg = svg => {
+  return svg
+    .replace(
+      '<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">',
+      ''
+    )
+    .replace(
+      '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32">',
+      ''
+    )
+    .replace(
+      '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">',
+      ''
+    )
+    .replace(
+      '<svg height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">',
+      ''
+    )
+    .replace(
+      '<svg height="32" width="32" xmlns="http://www.w3.org/2000/svg">',
+      ''
+    )
+    .replace(
+      '<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">',
+      ''
+    )
+    .replace(
+      '<svg width="32" height="32" viewBox="0 0 96 96" fill="none" xmlns="http://www.w3.org/2000/svg">',
+      ''
+    )
+    .replace(
+      '<svg height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">',
+      ''
+    )
+    .replace(`</svg>`, '');
+};

scripts/newIcons.js

@@ -1,8 +1,14 @@
-const updatedCurrencies = require('./../src/cryptoicons/manifest.json');
+const path = require('path');
+const { fixName } = require('./helpers');
+
+const rootDir = path.join(__dirname, '..');
+const updatedCurrencies = require(`${rootDir}/node_modules/cryptocurrency-icons/manifest.json`);
 const currencies = require('./../src/icons').default;
 const newCurrencies = updatedCurrencies.filter(
   o =>
-    !currencies.find(o2 => o.symbol.toLowerCase() === o2.symbol.toLowerCase())
+    !currencies.find(
+      o2 => fixName(o.symbol.toLowerCase()) == o2.symbol.toLowerCase()
+    )
 );
 
 console.log(newCurrencies);

scripts/updateManifest.js

@@ -1,5 +1,8 @@
 const fs = require('fs');
-const updatedCurrencies = require('./../src/cryptoicons/manifest.json');
+const path = require('path');
+
+const rootDir = path.join(__dirname, '..');
+const updatedCurrencies = require(`${rootDir}/node_modules/cryptocurrency-icons/manifest.json`);
 const currencies = require('./../src/icons').default;
 const newCurrencies = updatedCurrencies.filter(o =>
   currencies.find(o2 => o.symbol.toLowerCase() === o2.symbol.toLowerCase())

src/icons/aave.js

@@ -0,0 +1,13 @@
+const Aave = {
+  symbol: 'aave',
+  color: '#000',
+  colorIcon() {
+    return `<g fill="none"><circle fill="#2EBAC6" cx="16" cy="16" r="16"/><path d="M22.934 21.574l-5.35-13.532C17.28 7.342 16.834 7 16.243 7h-.473c-.592 0-1.039.343-1.341 1.042l-2.327 5.896h-1.761c-.528.002-.956.448-.96 1v.014c.004.553.432.999.96 1.001h.946l-2.221 5.621a1.235 1.235 0 00-.066.384c0 .315.092.562.263.754.17.192.407.288.71.288a.933.933 0 00.552-.192c.17-.123.289-.302.38-.507l2.446-6.348h1.696c.527-.002.955-.449.96-1.001v-.027c-.005-.553-.433-1-.96-1.001h-.907l1.866-4.867L21.093 22.3c.092.205.21.384.381.507.161.122.354.19.553.192.302 0 .539-.096.71-.288.17-.192.262-.439.262-.754a.944.944 0 00-.065-.384z" fill="#FFF"/></g>`;
+  },
+  plainIcon: c => {
+    return `<path fill-rule="evenodd" fill="${
+      c ? c : this.color
+    }" d="M16 0c8.837 0 16 7.163 16 16s-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0zm.243 7h-.473c-.592 0-1.039.343-1.341 1.042l-2.327 5.896h-1.761c-.528.002-.956.448-.96 1v.014c.004.553.432.999.96 1.001h.946l-2.221 5.621a1.235 1.235 0 00-.066.384c0 .315.092.562.263.754.17.192.407.288.71.288a.933.933 0 00.552-.192c.17-.123.289-.302.38-.507l2.446-6.348h1.696c.527-.002.955-.449.96-1.001v-.027c-.005-.553-.433-1-.96-1.001h-.907l1.866-4.867L21.093 22.3c.092.205.21.384.381.507.161.122.354.19.553.192.302 0 .539-.096.71-.288.17-.192.262-.439.262-.754a.944.944 0 00-.065-.384l-5.35-13.532C17.28 7.342 16.834 7 16.243 7z"/>`;
+  }
+};
+export default Aave;

src/icons/act.js

@@ -1,13 +1,13 @@
 const Act = {
   symbol: 'act',
   color: '#000',
+  colorIcon() {
+    return `<g fill="none" fill-rule="evenodd"><circle cx="16" cy="16" r="16" fill="#767DFF" fill-rule="nonzero"/><path fill="#FFF" d="M13.77 6.5h4.46a.87.87 0 01.759.444l6.906 12.319a.87.87 0 010 .85l-2.21 3.942a.87.87 0 01-.758.445H9.073a.87.87 0 01-.759-.445l-2.209-3.942a.87.87 0 010-.85l6.906-12.319a.87.87 0 01.759-.444zM16 11.401l-4.653 8.287h9.306L16 11.401z"/></g>`;
+  },
   plainIcon: c => {
     return `<path fill-rule="evenodd" fill="${
       c ? c : this.color
-    }" d="M16 32C7.163 32 0 24.837 0 16S7.163 0 16 0s16 7.163 16 16-7.163 16-16 16zM13.77 6.5a.87.87 0 0 0-.759.444L6.105 19.263a.87.87 0 0 0 0 .85l2.21 3.942a.87.87 0 0 0 .758.445h13.854a.87.87 0 0 0 .759-.445l2.209-3.942a.87.87 0 0 0 0-.85L18.989 6.944a.87.87 0 0 0-.759-.444h-4.46zM16 11.401l4.653 8.287h-9.306L16 11.401z"/>`;
-  },
-  colorIcon() {
-    return `<g fill="none" fill-rule="evenodd"><circle cx="16" cy="16" r="16" fill="#767DFF" fill-rule="nonzero"/><path fill="#FFF" d="M13.77 6.5h4.46a.87.87 0 0 1 .759.444l6.906 12.319a.87.87 0 0 1 0 .85l-2.21 3.942a.87.87 0 0 1-.758.445H9.073a.87.87 0 0 1-.759-.445l-2.209-3.942a.87.87 0 0 1 0-.85l6.906-12.319a.87.87 0 0 1 .759-.444zM16 11.401l-4.653 8.287h9.306L16 11.401z"/></g>`;
+    }" d="M16 32C7.163 32 0 24.837 0 16S7.163 0 16 0s16 7.163 16 16-7.163 16-16 16zM13.77 6.5a.87.87 0 00-.759.444L6.105 19.263a.87.87 0 000 .85l2.21 3.942a.87.87 0 00.758.445h13.854a.87.87 0 00.759-.445l2.209-3.942a.87.87 0 000-.85L18.989 6.944a.87.87 0 00-.759-.444h-4.46zM16 11.401l4.653 8.287h-9.306L16 11.401z"/>`;
   }
 };
 export default Act;