@esri/calcite-ui-icons 3.29.1-next.0 → 3.29.2

package/.github/workflows/npm-release.yml

@@ -0,0 +1,20 @@
+name: NPM Release
+on:
+  release:
+    types: [published]
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          ref: master
+      - uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+          registry-url: "https://registry.npmjs.org"
+      - run: npm i
+      - run: npm start
+      - run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/CONTRIBUTE.md

@@ -0,0 +1,29 @@
+# Contributing to calcite-ui-icons
+
+The creative lab is the main contributor as they provide the various icons used by the different apps.
+
+#### Bugs
+
+Create an issue that describes clearly the issue and the reproducible steps.
+
+#### Pull Requests
+
+If you feel the urge to contribute, submit your updates with pull request.
+
+## Running the Doc Site
+
+First install all dependencies:
+
+```
+npm install
+```
+
+Next, run the server:
+
+```
+npm run server
+```
+
+This will optimize the icons, create a JSON file with all the icon path data, and start up a development server with live reload capabilities.
+
+This task also watches for changes and rebuilds the JSON file whenever icons are added or edited, automatically reloading your browser to display changes as they come in.

package/LICENSE.md

@@ -1,13 +1,14 @@
-# Licensing
+# License
 
-COPYRIGHT © 2024 Esri
+COPYRIGHT © 2021 Esri
 
 All rights reserved under the copyright laws of the United States and applicable international laws, treaties, and conventions.
 
 This material is licensed for use under the Esri Master License Agreement (MLA), and is bound by the terms of that agreement. You may redistribute and use this code without modification, provided you adhere to the terms of the MLA and include this copyright notice.
 
-See use restrictions at <http://www.esri.com/legal/pdfs/mla_e204_e300/english>
+See use restrictions at http://www.esri.com/legal/pdfs/mla_e204_e300/english
 
 For additional information, contact: Environmental Systems Research Institute, Inc. Attn: Contracts and Legal Services Department 380 New York Street Redlands, California, USA 92373 USA
 
-email: <contracts@esri.com>
+email: contracts@esri.com
+

package/README.md

@@ -1,7 +1,7 @@
 # calcite-ui-icons
 
 A collection of UI SVG icons created by Esri for mapping applications.
-<https://developers.arcgis.com/calcite-design-system/icons/>
+https://esri.github.io/calcite-ui-icons/
 
 ## Installation
 
@@ -13,16 +13,15 @@ Icons use an outlined style. Some icons include an additional filled version.
 
 Every concept has 3 sizes:
 
-- **16x16**
-- **24x24**
-- **32x32**
+* **16x16**
+* **24x24**
+* **32x32**
 
 ### Why 3 Sizes?
 
 More info on what happens when you scale vector based icons [here](https://github.com/Esri/calcite-ui-icons/wiki/What-Happens-When-You-Scale-Vector-Based-Icons)
 
 ### Outline icons are the standard
-
 Outline icons have the default name. For example, `trash-16.svg` will render the default outline icon.
 
 Some icons have alternative states for toggling or greater flexibility. For those icons, appending `-f` (`information-16-f.svg`) will render the filled version.
@@ -31,17 +30,16 @@ Some icons have alternative states for toggling or greater flexibility. For thos
 
 For web apps, the easiest way to use calcite-ui-icons is with [calcite-components](https://github.com/Esri/calcite-components). The [calcite-icon](https://github.com/Esri/calcite-components/tree/master/src/components/calcite-icon) component will handle fetching and rendering any icon from this set with the following api:
 
-```html
+```
 <calcite-icon icon="arrowLeft" scale="m"></calcite-icon>
 ```
 
 ### Sprite packages
-
 Furthermore, sprites are available in 3 packages and live outside the `icons/` directory:
 
-- sprite-16.svg
-- sprite-24.svg
-- sprite-32.svg
+* sprite-16.svg
+* sprite-24.svg
+* sprite-32.svg
 
 Alternative filled versions of the outlined icons have `-f` appended to their name, and are included in the sprites above.
 
@@ -70,7 +68,7 @@ Some icons use multiple paths and opacity in their construction, for these the d
 ```js
 import { imageLayer16 } from "@esri/calcite-ui-icons/js/imageLayer16.js";
 
-console.log(imageLayer16); // => [{ path: "M16 6v3H5.035l5 5H6.5L0 7.5 6.5 1h3.536l-5 5z", opacity: .4 }, ...]
+console.log(imageLayer16) // => [{ path: "M16 6v3H5.035l5 5H6.5L0 7.5 6.5 1h3.536l-5 5z", opacity: .4 }, ...]
 ```
 
 **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.
@@ -84,7 +82,7 @@ Types are also available for projects leveraging TypeScript. `CalciteIconPath` d
 All icons are also provided as part of a JSON file. If you installed via npm, you can import the full icon data set using the following:
 
 ```js
-var calciteIcons = require("@esri/calcite-ui-icons/docs/icons.json");
+var calciteIcons = require('@esri/calcite-ui-icons/docs/icons.json');
 ```
 
 This will give you an object containing all the icons in the library at all sizes:
@@ -112,20 +110,18 @@ This will give you an object containing all the icons in the library at all size
   }
 }
 ```
+_Note: path data omitted for brevity_.
 
-*Note: path data omitted for brevity.*
-
-Most icons will have simple strings as path data, but some will be more complex as they need to store not only path, but opacity as well for multiple shapes. Icons of this structure will be annotated with the `multiPath` flag.
+Most icons will have simple strings as path data, but some will be more complex as they need to store not only path, but opacity as well for multiple shapes. Icons of this structure will be anotated with the `multiPath` flag.
 
 ### Individual icons structure
-
 All the individual SVG icons have a common file structure.
 
 This is what the `close-16.svg` looks like:
 
 ```html
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-  <path d="M0 10V7h10.965l-5-5H9.5L16 8.5 9.5 15H5.964l5-5H0z" />
+  <path d="M0 10V7h10.965l-5-5H9.5L16 8.5 9.5 15H5.964l5-5H0z"/>
 </svg>
 ```
 
@@ -157,34 +153,43 @@ npm install
 
 Then:
 
-- To create Xcode image sets (for use with iOS, macOS, iPadOS) with a default size:
+* To create Xcode image sets (for use with iOS, macOS, iPadOS) with a default size:
 
-  ```sh
-  npm run convert-all-ios
-  ```
+    ```sh
+    npm run convert-all-ios
+    ```
 
-- To create Xcode image sets with a specified size (e.g. 44x44):
+* To create Xcode image sets with a specified size (e.g. 44x44):
 
-  ```sh
-  npm run convert-all-ios:size 44
-  ```
+    ```sh
+    npm run convert-all-ios:size 44
+    ```
 
-- To create versions for use on desktop in one size:
+* To create versions for use on desktop in one size:
 
-  ```sh
-  npm run convert-all-desktop:size 64
-  ```
+    ```sh
+    npm run convert-all-desktop:size 64
+    ```
 
-- To create versions for use on desktop in sizes ranging from 16 to 64, run:
+* To create versions for use on desktop in sizes ranging from 16 to 64, run:
 
-  ```sh
-  npm run convert-all-desktop-multi
-  ```
+    ```sh
+    npm run convert-all-desktop-multi
+    ```
 
 ## Licensing
 
-Please read [LICENSE.md](./LICENSE.md)
+COPYRIGHT © 2020 Esri
 
-## Contributing
+All rights reserved under the copyright laws of the United States and applicable international laws, treaties, and conventions.
+
+This material is licensed for use under the Esri Master License Agreement (MLA), and is bound by the terms of that agreement. You may redistribute and use this code without modification, provided you adhere to the terms of the MLA and include this copyright notice.
+
+See use restrictions at http://www.esri.com/legal/pdfs/mla_e204_e300/english
 
-Please read [CONTRIBUTING.md](./CONTRIBUTING.md)
+For additional information, contact: Environmental Systems Research Institute, Inc. Attn: Contracts and Legal Services Department 380 New York Street Redlands, California, USA 92373 USA
+
+email: contracts@esri.com
+
+## Contributing
+Please read the [contribute document](CONTRIBUTE.md).

package/bin/build.js

@@ -0,0 +1,24 @@
+const optimize = require('./optimize');
+const generatePathFile = require('./path-data');
+
+module.exports = function () {
+  return optimize('*.svg')
+    .then(() => optimize('icons/*.svg', true))
+    .catch((error) => {
+      console.error('🚨  Error while optimizing icons');
+      throw error;
+    })
+    .then(() => {
+      console.log('✨ icons optimized successfully');
+      return generatePathFile();
+    })
+    .catch((error) => {
+      console.error('🚨  Error while generating icons.json');
+      console.error(error);
+      throw error;
+    })
+    .then((files) => {
+      console.log('✨ path file generated at ./docs/icons.json');
+      return files;
+    });
+}

package/bin/cli.js

@@ -0,0 +1,6 @@
+#!/usr/bin/env node
+const build = require('./build');
+console.log('🗜  optimizing icons... \n');
+build(true)
+  .then(() => process.exit(0))
+  .catch(() => process.exit(1));

package/bin/convert-mobile.js

@@ -0,0 +1,218 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const svg2img = require('svg2img');
+const path = require('path');
+const yargs = require('yargs');
+
+const options = yargs
+  .usage('Usage: -n <name of icon, omit if doing bulk>, \n-s <output size, defaults to 24>, \n-o <output path (defaults to ./output)>, \n-p <target platform (e.g. ios) \n-i <16, 24, 32, omit for 16>')
+  .option('n', { alias: 'name', describe: 'name of icon, without -32.svg; omit to convert all icons', type: 'string', demandOption: false })
+  .option('o', { alias: 'outputDir', describe: 'output path, relative to this script', type: 'string', demandOption: false })
+  .option('p', { alias: 'outputPlatform', describe: 'target platform, valid options are: ios', type: 'string', demandOption: false })
+  .option('i', { alias: 'inSize', describe: 'source svg variant, defaults to 16', type: 'string', demandOption: false })
+  .option('s', { alias: 'outSize', describe: 'size of output image', type: 'string', demandOption: false})
+  .argv;
+
+/**
+ * Converts a single svg to png, with given width & height values. The function will automatically append '.png'
+ * @param {string} svgFilePath - filepath to icon .svg
+ * @param {int} width - width of output file
+ * @param {int} height - height of output file
+ * @param {string} outputBasePath - base directory in which to store output
+ * @param {string} outputName - name of output png image, excluding '.png'
+ * @param {string} outputSuffix - suffix appended to output file name (ex, '@2x')
+ */
+function convertSingleIconToPng(svgFilePath, width, height, outputBasePath, outputName, outputSuffix=null) {
+  // make sure output base path exists
+  if (!fs.existsSync(outputBasePath)) {
+    fs.mkdirSync(outputBasePath, {
+      recursive: true
+    });
+  }
+  // concatenate real output path
+  let real_output_path = path.join(outputBasePath, outputName);
+  if (outputSuffix) {
+    real_output_path += outputSuffix
+  }
+  real_output_path += '.png'
+  // convert and save the image
+  svg2img(svgFilePath, { 'width': width, 'height': height }, function (error, buffer) {
+    if (error){
+      console.log(error);
+      process.exit(1);
+    }
+    fs.writeFileSync(real_output_path, buffer);
+  });
+}
+
+/**
+ * Creates an ImageSet (including Contents.json file) for an icon
+ * @param {string} svgFilePath - filepath to icon .svg
+ * @param {int} width - width of output file @1x
+ * @param {int} height - height of output file @1x
+ * @param {string} outputBasePath - base directory in which to store output
+ * @param {string} outputName - name of output png image, excluding '.png'
+ */
+function convertIconToXcodeImageSet(svgFilePath, width, height, outputBasePath, outputName) {
+  const outputImagesetPath = path.join(outputBasePath, outputName + '.imageset');
+
+  // Create images at 3 sizes
+  convertSingleIconToPng(svgFilePath, width, height, outputImagesetPath, outputName, '@1x');
+  convertSingleIconToPng(svgFilePath, width * 2, height * 2, outputImagesetPath, outputName, '@2x');
+  convertSingleIconToPng(svgFilePath, width * 3, height * 3, outputImagesetPath, outputName, '@3x');
+
+  // read template
+  const imagesetTemplatePath = path.join(__dirname, 'templates', 'imageset.json');
+  // create Contents.json for asset catalog asset
+  fs.readFile(imagesetTemplatePath, 'utf8', function (error, buffer) {
+    if (error) {
+      console.log(error);
+      process.exit(1);
+    }
+    const contentsJsonBuffer = buffer.replace(/\$\{NAME\}/g, outputName);
+    const contentsJsonOutputPath = path.join(outputImagesetPath, 'Contents.json');
+    fs.writeFileSync(contentsJsonOutputPath, contentsJsonBuffer)
+  });
+}
+
+/**
+ * Indexes all calcite icons contained in directory at path
+ * @param {string} baseIconPath - path to calcite .svg icons directory
+ */
+async function indexCalciteIcons(baseIconPath) {
+  return new Promise(resolve => {
+    var iconIndex = {};
+    fs.readdir(baseIconPath, function (error, files) {
+      if (error) {
+        console.log(error);
+        process.exit(1);
+      }
+      files.forEach(function (file) {
+        // strip all files of file size information, catalog in an index
+        var base_name = path.basename(file);
+        base_name = base_name.replace('.svg', '');
+        var size = undefined;
+        if (base_name.includes('-16')) {
+          base_name = base_name.replace('-16', '');
+          size = 16;
+        }
+        else if (base_name.includes('-24')) {
+          base_name = base_name.replace('-24', '');
+          size = 24;
+        }
+        else if (base_name.includes('-32')) {
+          base_name = base_name.replace('-32', '');
+          size = 32;
+        }
+        if (!iconIndex[base_name]) {
+          iconIndex[base_name] = {}
+        }
+        iconIndex[base_name][size] = path.join(baseIconPath, file);
+      });
+      resolve(iconIndex);
+    });
+  });
+}
+
+/**
+ * Indexes all calcite icons contained in directory at path
+ * @param {string} xcAssetsBaseDirectory - path where to derive calcite.xcassets
+ */
+async function createCalciteXCAssets(xcAssetsBaseDirectory) {
+  return new Promise(resolve => {
+    // Put in .xcassets folder
+    var directory = path.join(xcAssetsBaseDirectory, 'calcite.xcassets');
+    // Make sure dir exists
+    if (!fs.existsSync(directory)) {
+      fs.mkdirSync(directory, {
+        recursive: true
+      });
+    }
+    // read contents.json template
+    let template_path = path.join(__dirname, 'templates', 'xcassets.json');
+    // write out file
+    fs.readFile(template_path, 'utf8', function (error, buffer) {
+      if (error) {
+        console.log(error);
+        process.exit(1);
+      }
+      const contents_output_path = path.join(directory, 'Contents.json');
+      fs.writeFile(contents_output_path, buffer, function (error) {
+        resolve(directory);
+      });
+    });
+  });
+}
+
+async function main() {
+  // index all calcite icons
+  let iconIndex = await indexCalciteIcons('./icons/');
+  // establish output root path
+  var outputRoot = path.join(__dirname, 'output')
+  if (options.outputDir) {
+    outputRoot = path.join(__dirname, options.outputDir);
+  }
+  // establish input size
+  var inputSize = 24;
+  if (options.inSize === '16'){
+    inputSize = 16;
+  } else if (options.inSize === '24'){
+    inputSize = 24;
+  } else if (options.inSize === '32'){
+    inputSize = 32;
+  } else if (options.outSize) {
+    let size = parseInt(options.outSize);
+    if (size < 24) {
+      inputSize = 16;
+    } else if (size < 32) {
+      inputSize = 24;
+    } else if (size >= 32) {
+      inputSize = 32;
+    }
+  }
+  // establish output size (in pixels)
+  var outputSize = 24;
+  if (options.outSize) {
+    let size = parseInt(options.outSize);
+    if (size) {
+      outputSize = size;
+    }
+  }
+  // ensure icon name is valid, checking index
+  if (options.name) {
+    if (!(options.name in iconIndex)) {
+      console.log("Invalid icon name " + options.name);
+      process.exit(1);
+    }
+  }
+  // build xcassets if output for iOS
+  if (options.outputPlatform === 'ios') {
+    let xcAssetsDirectory = await createCalciteXCAssets(outputRoot);
+    if (options.name) {
+      let name = options.name;
+      let file = iconIndex[name][inputSize];
+      convertIconToXcodeImageSet(file, outputSize, outputSize, xcAssetsDirectory, name);
+    }
+    else {
+      for (let key in iconIndex) {
+        let file = iconIndex[key][inputSize];
+        convertIconToXcodeImageSet(file, outputSize, outputSize, xcAssetsDirectory, key)
+      }
+    }
+  } else { // platform is not ios, render plain png
+    if (options.name) {
+      let name = options.name;
+      let file = iconIndex[name][inputSize];
+      convertSingleIconToPng(file, outputSize, outputSize, outputRoot, name, undefined);
+    }
+    else {
+      for (let key in iconIndex) {
+        let file = iconIndex[key][inputSize];
+        convertSingleIconToPng(file, outputSize, outputSize, outputRoot, key, undefined);
+      }
+    }
+  }
+}
+
+main();

package/bin/optimize.js

@@ -0,0 +1,68 @@
+const fs = require('fs-extra');
+const glob = require('glob-promise');
+const SVGO = require('svgo');
+const progress = require('cli-progress');
+
+let options = {
+  plugins: [
+    {cleanupIDs: {remove: false}},
+    {removeStyleElement: true},
+    {removeUselessDefs: true},
+    {removeUselessStrokeAndFill: false},
+    {removeHiddenElems: true},
+    {removeEmptyText: true},
+    {convertShapeToPath: { convertArcs: true }},
+    {convertPathData: { noSpaceAfterFlags: false }},
+    {removeEmptyAttrs: true},
+    {removeEmptyContainers: true},
+    {mergePaths: false},
+    {removeTitle: true},
+    {removeDesc: true},
+    {removeDimensions: true},
+    {removeAttrs: {attrs: ['class', '(stroke)']}}
+  ],
+  multipass: true
+};
+
+/**
+ * Reads an icon file off disk and optimizes it, saving to same location
+ * @param {string[]}           filePaths  array of relative file paths
+ * @param {SVGO}               svgo       SVGO instance with correct options
+ * @param {SingleBar}          bar        progress bar instance
+ * @return {Promise}
+ */
+function optimizeIcons (filePaths, svgo, bar) {
+  var num = 0;
+  return Promise.all(filePaths.map((path) => {
+    return fs.readFile(path, 'utf-8')
+      .then((svg) => svgo.optimize(svg, { path }))
+      .then((result) => {
+        num++;
+        bar.update(num);
+        return fs.writeFile(path, result.data, 'utf-8');
+      });
+  }));
+}
+
+/**
+ * Optimize a set of icons
+ * @param {string}   files       Glob pattern for icons source
+ * @param {boolean}  remove      Remove id attributes from output
+ * @return {Promise}             Formatted object with all icon metadata
+ */
+module.exports = function (files, remove) {
+  if (!files) {
+    return Promise.resolve(true);
+  }
+  options.plugins[0] = {cleanupIDs: { remove }};
+  svgo = new SVGO(options);
+  return glob(files).then((iconPaths) => {
+    const format = "  \x1b[32m {bar} {percentage}% | {value}/{total} \x1b[0m";
+    const bar = new progress.SingleBar({ format }, progress.Presets.shades_classic);
+    bar.start(iconPaths.length, 0);
+    return optimizeIcons(iconPaths, svgo, bar).then(() => {
+      bar.stop();
+      console.log("");
+    });
+  });
+}

package/bin/path-data.js

@@ -0,0 +1,136 @@
+const camelCase = require('camelcase');
+const fs = require('fs-extra');
+const glob = require('glob-promise');
+const path = require('path');
+const util = require('util');
+const svgson = util.promisify(require('svgson'));
+const version = require('../package.json').version;
+
+/**
+ * Gets all important information about an icon.
+ * @param {string} svg - Path to icon file.
+ * @return {object} - Formatted object with all icon metadata
+ */
+function formatSVG (svg) {
+  let file = path.basename(svg.file);
+  let filled = file.indexOf('-f.svg') > -1;
+  return {
+    file,
+    filled,
+    paths: getPaths(svg.contents),
+    size: getSize(file),
+    variant: getVariant(file, filled)
+  };
+}
+
+/**
+ * Find the path(s) from an icon's svgson data
+ * @param {object} svg - Object as returned from svgson.
+ * @return {array} - Array of paths
+ */
+function getPaths (svg) {
+  const bbPaths = ['M0 0h16v16H0z', 'M0 0h24v24H0z', 'M0 0h32v32H0z'];
+  return svg.childs
+    .filter(child => child.name === 'path' && bbPaths.indexOf(child.attrs.d) === -1) // filter out bounding box paths
+    .map(child => ({ opacity: child.attrs.opacity, d: child.attrs.d }));
+}
+
+/**
+ * Find the base icon name
+ * @param {string} name - Icon filename
+ * @param {boolean} filled - Icon filename
+ * @return {array} - Icon filename without size, fill, or file extension
+ */
+function getVariant (name, filled) {
+  var noF = name.replace('-f.svg', '.svg');
+  return noF.substring(0, noF.length - 7) + (filled ? "-f" : "");
+}
+
+/**
+ * Find an icon's size
+ * @param {string} name - Icon filename
+ * @return {integer} - 16, 24, 36
+ */
+function getSize(name) {
+  var noF = name.replace('-f.svg', '.svg');
+  return parseInt(noF.substring(noF.length - 4, noF.length - 6), 10);
+}
+
+/**
+ * Read an icon from disc and get data as json
+ * @param {string} fileName - Icon filename (full path)
+ * @return {Promise} - Promise resolving to object which includes name and svgson data
+ */
+function readSVG (fileName) {
+  return new Promise(function(resolve, reject) {
+    fs.readFile(fileName, 'utf-8').then(function (svg) {
+      svgson(svg, {}, function (contents) {
+        resolve({file: fileName, contents});
+      });
+    });
+  });
+}
+
+module.exports = function generatePathFile () {
+  let banner = '// File generated automatically by path-data.js, do not edit directly\n';
+  let jsFile = `${banner}`;
+  let tsFile = `
+${banner}
+interface CalciteMultiPathEntry {
+  d: string;
+  opacity?: string;
+}
+export type CalciteIconPath = string | CalciteMultiPathEntry[];
+`;
+  return glob('icons/*.svg')
+    .then(filePaths => Promise.all(filePaths.map(readSVG)))
+    .then(files => files.map(formatSVG))
+    .then(files => {
+      let icons = {};
+      let keywords = JSON.parse(fs.readFileSync('docs/keywords.json', 'utf-8'));
+      files.forEach(file => {
+        // add to json file
+        icons[file.variant] = icons[file.variant] || keywords[file.variant] || { alias: [], category: "", release: "" };
+        var icon = icons[file.variant];
+        const firstPath = file.paths[0] || { d: "" }; // back up for "blank" icon
+        const paths = file.paths.length > 1 ? file.paths : firstPath.d;
+        icon[file.size] = paths;
+        var base = file.variant.substring(0, file.variant.length - 2);
+        // make sure filled variants get the keywords from their standard counterpart
+        if (file.filled && !icon.release) {
+          const variantKeywords = keywords[base];
+          if (variantKeywords) {
+            icon.alias = variantKeywords.alias;
+            icon.category = variantKeywords.category;
+            icon.release = variantKeywords.release;
+          }
+        }
+        // add to ts and js files
+        const variant = file.variant.match(/^\d/) ? `i${file.variant}`: file.variant;
+        const camelCaseName = camelCase(`${file.filled ? base: variant }-${file.size}${ file.filled ? "-f" : ""}`);
+        jsFile += `export {${camelCaseName}} from "./js/${camelCaseName}.js";\n`;
+
+        let contents, tsContents;
+        if (typeof paths === "string") {
+          tsFile += `export const ${camelCaseName}: string;\n`;
+          contents = `export const ${camelCaseName} = "${paths}";\n`;
+          tsContents = `export const ${camelCaseName}: string;\n`;
+        } else {
+          icon.multiPath = true;
+          tsFile += `export const ${camelCaseName}: CalciteMultiPathEntry[];\n`;
+          contents = `export const ${camelCaseName} = ${JSON.stringify(paths)};\n`;
+          tsContents = `export const ${camelCaseName}: CalciteMultiPathEntry[];\n`;
+        }
+
+        fs.writeFile(`js/${camelCaseName}.js`, contents, 'utf8');
+        fs.writeFile(`js/${camelCaseName}.d.ts`, tsContents, 'utf8');
+        fs.writeFile(`js/${camelCaseName}.json`, JSON.stringify(paths), '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);
+    });
+};