@esri/calcite-ui-icons - npm Package Compare versions

Comparing version 1.8.0 to 2.0.0

bin/path-data.js

@@ -0,1 +1,2 @@
+const camelCase = require('camelcase'); 
 const fs = require('fs-extra');
@@ -71,2 +72,5 @@ const glob = require('glob-promise');
 module.exports = function generatePathFile () {
+  let banner = '// File generated automatically by path-data.js, do not edit directly\n';
+  let jsFile = `${banner}`;
+  let tsFile = `${banner}`;
   return glob('icons/*.svg')
@@ -79,2 +83,3 @@ .then(filePaths => Promise.all(filePaths.map(readSVG)))
       files.forEach(file => {
+        // add to json file
         icons[file.variant] = icons[file.variant] || keywords[file.variant] || {alias: [], category: "", release:""};
@@ -85,5 +90,17 @@ let icon = icons[file.variant];
         icon[file.filled ? 'filled' : 'outline'][file.size] = file.paths;
+        
+        // add to ts and js files
+        const variant = file.variant.match(/^\d/) ? `i${file.variant}`: file.variant;
+        const filled = file.filled ? "F" : "";
+        const camelCaseName = camelCase(`${variant}-${file.size}${filled}`);
+        tsFile += `export const ${camelCaseName}: string;\n`
+        jsFile += `export const ${camelCaseName} = "${file.paths[0]}";\n`
       });
-      return fs.writeFile('docs/icons.json', JSON.stringify({version, icons}), 'utf8');
+      let promises = [
+        fs.writeFile('docs/icons.json', JSON.stringify({ version, icons }), 'utf8'),
+        fs.writeFile('index.d.ts', tsFile, 'utf8'),
+        fs.writeFile('index.js', jsFile, 'utf8')
+      ];
+      return Promise.all(promises);
     });
 };

package.json

@@ -6,3 +6,3 @@ {
   "name": "@esri/calcite-ui-icons",
-  "version": "1.8.0",
+  "version": "2.0.0",
   "private": false,
@@ -14,3 +14,5 @@ "description": "A collection of UI SVG icons created by Esri for applications.",
   },
-  "main": "docs/icons.json",
+  "main": "index.js",
+  "js-next:main": "index.js",
+  "module": "index.js",
   "keywords": [
@@ -60,2 +62,3 @@ "esri",
     "browser-sync": "^2.24.7",
+    "camelcase": "^5.3.1",
     "debounce": "^1.2.0",
@@ -62,0 +65,0 @@ "fs-extra": "^7.0.0",

README.md

@@ -108,2 +108,16 @@ # calcite-ui-icons
 
+## JavaScript Format
+
+The icons are also made avaiable as ES6 exports. This way you can import just the icons you need into your JavaScript:
+
+```
+import {arrowLeft16, copyToClipboard32F} from "@esri/calcite-icons";
+
+console.log(arrowLeft16); // => "M16 6v3H5.035l5 5H6.5L0 7.5 6.5 1h3.536l-5 5z"
+```
+
+The icon names in JS imports will be lower camel case. If the icon name starts with a number (ex. 2d-explore, 3d-glasses) prefix the name with `i`. This is due to the fact that JavaScript variables cannot begin with a number.
+
+**Note**: It is not recommended to import the entire library of icons. This will have negative performance implications. Use the technique above to select only the icons your users actually need to download.
+
 ## Licensing
@@ -110,0 +124,0 @@

No alert changes

Improved metrics

Total package byte prevSize

4255076

increased by32.65%

Number of package files

2448

increased by0.08%

Lines of code

11904

increased by138.6%

Number of lines in readme file

138

increased by11.29%

Worsened metrics

Dev dependency count

10

increased by11.11%

No dependency changes