Add icons option to build script (#794)

options.icons is an array of icon names. If this option is used, only icon names that match options.icons will be included in Assembly. Closes #782

README.md

@@ -39,6 +39,7 @@ Assembly.buildUserAssets('path/to/my/outdir', myOptions)
 - **`mediaQueries`**: An object whose properties will override and add to `src/mediaQueries.json`. Use this option to change or add media queries.
   These media queries are accessible in any stylesheets you append via the CSS custom media query syntax, e.g. `@media --media-query-name`.
 - **`colorVariants`**: An object or array specifying the color variants you would like added to `assembly.css`. This is documented in detail below.
+- **`icons`**: An array of icons names to include in Assembly. Names correspond to file names in `src/svgs/`. Use this option to decrease the size of assembly.js by only including the icons you need.
 - **`quiet`**: Suppress logs.
 
 ### `colorVariants` option

package.json

@@ -72,7 +72,7 @@
     "execall": "^1.0.0",
     "gzip-size": "^3.0.0",
     "highlight.js": "^9.8.0",
-    "jest": "^19.0.0",
+    "jest": "^20.0.0",
     "lodash": "^4.17.2",
     "mime": "^1.3.4",
     "nodemon": "^1.11.0",

scripts/build-js.js

@@ -23,6 +23,8 @@ const jsFiles = [
  * @param {Object} [options]
  * @param {string} [options.outfile] - Path to which built JS should be written.
  * @param {Object} [options.quiet] - Suppress logs.
+ * @param {Array<string>} [options.icons] - Array of icon names to include in the
+ *   loader. icon names correspond to SVG file names excluding the `.svg` suffix.
  * @return {Promise<void>}
  */
 function buildJs(options) {
@@ -32,7 +34,7 @@ function buildJs(options) {
   const outfile = options.outfile || path.join(__dirname, '../dist/assembly.js');
 
   return Promise.all([
-    buildSvgLoader(),
+    buildSvgLoader(options.icons || []),
     concatJs()
   ])
     .then((data) => {

scripts/build-svg-loader.js

@@ -70,14 +70,33 @@ function processSvgFile(filename) {
   });
 }
 
-function buildSvgLoader() {
+/**
+ * Build Svg loader, which includes SVG data for all icons.
+ *
+ * @param {Array<string>} [icons] - Array of icon names to include in the
+ *   loader. Icon names correspond to SVG file names excluding the `.svg` suffix.
+ */
+function buildSvgLoader(icons) {
   const sprite = svgstore();
 
   return pify(fs.readdir)(svgDir)
     .then((filenames) => {
-      return Promise.all(filenames.map((filename) => {
+
+      // Error if user tries to include icons that don't exist
+      icons.forEach((svg) => {
+        if (!filenames.includes(svg + '.svg')) {
+          throw new Error(`an icon matching ${svg} does not exist`);
+        }
+      });
+
+      const files = (icons.length !== 0)
+        ? filenames.filter((f) => icons.includes(f.split('.svg')[0]))
+        : filenames;
+
+      return Promise.all(files.map((filename) => {
         return processSvgFile(path.join(svgDir, filename), sprite);
       }));
+
     })
     .then(() => {
       // This sorting is necessary to get a detemrinistic
@@ -94,3 +113,6 @@ function buildSvgLoader() {
 }
 
 module.exports = buildSvgLoader;
+if (require.main === module) {
+  buildSvgLoader().catch((err) => console.error(err.stack));
+}

scripts/build-user-assets.js

@@ -15,6 +15,7 @@ function buildUserAssets(outdir, options) {
 
   const buildJsOptions = {
     outfile: path.join(outdir, 'assembly.js'),
+    icons: options.icons || false,
     quiet: options.quiet || false
   };
 

test/build-js.jest.js

@@ -30,4 +30,25 @@ describe('buildJs', () => {
       })
       .then(() => cleanup(tmp));
   });
+
+  test('with valid svg option', () => {
+    const tmp = `${getTmp()}/test.js`;
+    return buildJs({
+      outfile: tmp,
+      icons: ['airplane', 'alert']
+    })
+      .then(() => pify(fs.readFile)(tmp, 'utf8'))
+      .then((js) => {
+        expect(js).toMatchSnapshot();
+      })
+      .then(() => cleanup(tmp));
+  });
+
+  test('fails with invalid icon option', () => {
+    const tmp = `${getTmp()}/test.js`;
+    return expect(buildJs({
+      outfile: tmp,
+      icons: ['airplane', 'pizza']
+    })).rejects.toEqual(Error('an icon matching pizza does not exist'));
+  });
 });

test/build-user-assets.jest.js

@@ -21,7 +21,8 @@ describe('buildUserAssets', () => {
         expect(buildJs).toHaveBeenCalledTimes(1);
         expect(buildJs).toHaveBeenCalledWith({
           outfile: '/path/to/outdir/assembly.js',
-          quiet: false
+          quiet: false,
+          icons: false
         });
         expect(copyFonts).toHaveBeenCalledTimes(1);
         expect(copyFonts).toHaveBeenCalledWith({
@@ -51,7 +52,8 @@ describe('buildUserAssets', () => {
       colorVariants: {
         'range': ['blue-faint']
       },
-      quiet: true
+      quiet: true,
+      icons: ['airplane']
     };
 
     return buildUserAssets('/path/to/another/outdir', options)
@@ -63,7 +65,8 @@ describe('buildUserAssets', () => {
         expect(buildJs).toHaveBeenCalledTimes(1);
         expect(buildJs).toHaveBeenCalledWith({
           outfile: '/path/to/another/outdir/assembly.js',
-          quiet: true
+          quiet: true,
+          icons: ['airplane']
         });
         expect(copyFonts).toHaveBeenCalledTimes(1);
         expect(copyFonts).toHaveBeenCalledWith({