@leafygreen-ui/icon 11.18.0 → 12.0.0-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @leafygreen-ui/icon
 
+## 12.0.0-alpha.0
+
+### Major Changes
+
+- d40674fe1: Updates build tooling. No functional changes
+
+### Patch Changes
+
+- Updated dependencies [d40674fe1]
+  - @leafygreen-ui/emotion@5.0.0-alpha.0
+
+## 11.19.0
+
+### Minor Changes
+
+- 5dcea09d: Adds `CodeBlock`, `MultiDirectionArrow`, and `MultiLayers` icons.
+
 ## 11.18.0
 
 ### Minor Changes

package/README.md

@@ -47,13 +47,13 @@ const SomeComponent = () => <Icon glyph="Plus" fill="#FF0000" />;
 
 ## Properties
 
-| Prop               | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Description                                                                                                                                                                                                                                                                  | Default     |
-| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `glyph` (Required) | `'ActivityFeed'`, `'AddFile'`, `'Apps'`, `'Array'`, `'ArrowDown'`, `'ArrowLeft'`, `'ArrowRight'`, `'ArrowUp'`, `'Beaker'`, `'Bell'`, `'Biometric'`, `'Building'`, `'Bulb'`, `'Calendar'`, `'CaretDown'`, `'CaretLeft'`, `'CaretRight'`, `'CaretUp'`, `'ChartFilled'`, `'Charts'`, `'Checkmark'`, `'CheckmarkWithCircle'`, `'ChevronDown'`,, `'ChevronLeft'` `'ChevronRight'`,`'ChevronUp'`, `'Clock'`,`'ClockWithArrow'`, `'Clone'`, `'Cloud'`, `'Code'`, `'Connect'`,`'Copy'`,`'CreditCard'`, `'CurlyBraces'`, `'Dashboard'`, `'Database'`, `'Diagram'`, `'Diagram2'`, `'Diagram3'`, `'Disconnect'`, `'Download'`, `'Drag'`, `'Edit'`, `'Ellipsis'`, `'Email'`, `'Export'`, `'Favorite'`, `'Federation'`, `'File'`, `'Filter'`,`'Folder'`, `'FullScreenEnter'`, `'FullScreenExit'`, `'Guage'`, `'GlobeAmericas'`, `'GovernmentBuilding'`, `'Highlight'`, `'Home'`, `'Import'`, `'ImportantWithCircle'`, `'InfoWithCircle'`, `'InviteUser'`, `'Key'`, `'Laptop'`, `'Lock'`, `'LogIn'`, `'LogOut'`, `'MagnifyingGlass'`, `'Megaphone'`, `'Menu'`, `'Minus'`, `'NoFilter'`, `'NotAllowed'`, `'Note'`, `'OpenNewTab'`, `'Pause'`, `'Person'`, `'PersonGroup'`, `'PersonWithLock'`, `'Play'`, `'Plus'`, `'PlusWithCircle'`, `'QuestionMarkWithCircle'`, `'Read'`, `'Redo'`, `'Refresh'`,`'Relationship'`, `'ReplicaSet'`,`'Resize'`, `'Save'`, `'Serverless'`, `'Settings'`, `'ShardedCluster'`, `'Shell'`, `'SMS'`,`'SortAscending'`, `'SortDescending'`, `'SortHorizontal'`, `'SortVertical'`, `'Stitch'`, `'Support'`, `'Sweep'`, `'Table'`, `'Tag'`, `'ThumbsDown'`, `'ThumbsUp'`, `'TimeSeries'`, `'Trash'`, `'Undo'`, `'University'`, `'Unlock'`, `'Unsorted'`, `'UpDownCarets'`, `'Upload'`, `'VerticalEllipsis'`, `'Visibility'`, `'VisibilityOff'`, `'Warning'`, `'Wizard'`, `'Wrench'`, `'Write'`,`'X'`, `'XWithCircle'` | Specifies the glyph to use.                                                                                                                                                                                                                                                  |             |
-| `size`             | `'small'`, `'default'`, `'large'`, `'xlarge'`, `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | The height and width of the glyph's viewBox. This can be any `number` or one of the following `'small'`, `'default'`, `'large'`, `'xlarge'`                                                                                                                                  | `'default'` |
-| `fill`             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | The fill color that is passed to the glyph. By default, the glyph will inherit its fill from the CSS color property of its nearest ancestor.                                                                                                                                 |             |
-| `title`            | `string`, `boolean`, `null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Renders a title tag with the passed string within the SVG element for screen reader accessibility. Setting this value to `false` will entirely unset the title. <br />If title is `undefined` or `null`, a human-readable title will be generated based on the glyph's name. |             |
-| ...                | `SVGR.ComponentProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | All other props will be spread on the `svg` element                                                                                                                                                                                                                          |             |
+| Prop               | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Description                                                                                                                                                                                                                                                                  | Default     |
+| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `glyph` (Required) | `'ActivityFeed'`, `'AddFile'`, `'Apps'`, `'Array'`, `'ArrowDown'`, `'ArrowLeft'`, `'ArrowRight'`, `'ArrowUp'`, `'Beaker'`, `'Bell'`, `'Biometric'`, `'Building'`, `'Bulb'`, `'Calendar'`, `'CaretDown'`, `'CaretLeft'`, `'CaretRight'`, `'CaretUp'`, `'ChartFilled'`, `'Charts'`, `'Checkmark'`, `'CheckmarkWithCircle'`, `'ChevronDown'`,, `'ChevronLeft'` `'ChevronRight'`,`'ChevronUp'`, `'Clock'`,`'ClockWithArrow'`, `'Clone'`, `'Cloud'`, `'Code'`, `'CodeBlock'`, `'Connect'`,`'Copy'`,`'CreditCard'`, `'CurlyBraces'`, `'Dashboard'`, `'Database'`, `'Diagram'`, `'Diagram2'`, `'Diagram3'`, `'Disconnect'`, `'Download'`, `'Drag'`, `'Edit'`, `'Ellipsis'`, `'Email'`, `'Export'`, `'Favorite'`, `'Federation'`, `'File'`, `'Filter'`,`'Folder'`, `'FullScreenEnter'`, `'FullScreenExit'`, `'Guage'`, `'GlobeAmericas'`, `'GovernmentBuilding'`, `'Highlight'`, `'Home'`, `'Import'`, `'ImportantWithCircle'`, `'InfoWithCircle'`, `'InviteUser'`, `'Key'`, `'Laptop'`, `'Lock'`, `'LogIn'`, `'LogOut'`, `'MagnifyingGlass'`, `'Megaphone'`, `'Menu'`, `'Minus'`, `'MultiDirectionArrow'`, `'MultiLayers'`, `'NoFilter'`, `'NotAllowed'`, `'Note'`, `'OpenNewTab'`, `'Pause'`, `'Person'`, `'PersonGroup'`, `'PersonWithLock'`, `'Play'`, `'Plus'`, `'PlusWithCircle'`, `'QuestionMarkWithCircle'`, `'Read'`, `'Redo'`, `'Refresh'`,`'Relationship'`, `'ReplicaSet'`,`'Resize'`, `'Save'`, `'Serverless'`, `'Settings'`, `'ShardedCluster'`, `'Shell'`, `'SMS'`,`'SortAscending'`, `'SortDescending'`, `'SortHorizontal'`, `'SortVertical'`, `'Stitch'`, `'Support'`, `'Sweep'`, `'Table'`, `'Tag'`, `'ThumbsDown'`, `'ThumbsUp'`, `'TimeSeries'`, `'Trash'`, `'Undo'`, `'University'`, `'Unlock'`, `'Unsorted'`, `'UpDownCarets'`, `'Upload'`, `'VerticalEllipsis'`, `'Visibility'`, `'VisibilityOff'`, `'Warning'`, `'Wizard'`, `'Wrench'`, `'Write'`,`'X'`, `'XWithCircle'` | Specifies the glyph to use.                                                                                                                                                                                                                                                  |             |
+| `size`             | `'small'`, `'default'`, `'large'`, `'xlarge'`, `number`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | The height and width of the glyph's viewBox. This can be any `number` or one of the following `'small'`, `'default'`, `'large'`, `'xlarge'`                                                                                                                                  | `'default'` |
+| `fill`             | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | The fill color that is passed to the glyph. By default, the glyph will inherit its fill from the CSS color property of its nearest ancestor.                                                                                                                                 |             |
+| `title`            | `string`, `boolean`, `null`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Renders a title tag with the passed string within the SVG element for screen reader accessibility. Setting this value to `false` will entirely unset the title. <br />If title is `undefined` or `null`, a human-readable title will be generated based on the glyph's name. |             |
+| ...                | `SVGR.ComponentProps`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | All other props will be spread on the `svg` element                                                                                                                                                                                                                          |             |
 
 # createIconComponent
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafygreen-ui/icon",
-  "version": "11.18.0",
+  "version": "12.0.0-alpha.0",
   "description": "LeafyGreen UI Kit Icons",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",
@@ -13,8 +13,8 @@
     }
   },
   "scripts": {
-    "prebuild": "ts-node ./scripts/build.ts --files",
-    "build": "../../node_modules/.bin/rollup --config ../../rollup.config.js",
+    "prebuild": "npx ts-node ./scripts/prebuild.ts --files",
+    "build": "rollup --config rollup.config.mjs",
     "tsc": "tsc --build tsconfig.json"
   },
   "license": "Apache-2.0",
@@ -22,12 +22,17 @@
     "access": "public"
   },
   "devDependencies": {
-    "@leafygreen-ui/palette": "^4.0.3",
-    "xml2json": "^0.12.0"
+    "@leafygreen-ui/palette": "^5.0.0-alpha.0",
+    "@types/xml2json": "^0.11.0",
+    "xml2json": "^0.12.0",
+    "@leafygreen-ui/lib": "^11.0.0-alpha.0"
   },
   "dependencies": {
-    "@leafygreen-ui/emotion": "^4.0.4",
-    "lodash": "^4.17.21"
+    "@leafygreen-ui/emotion": "^5.0.0-alpha.0",
+    "@svgr/core": "^5.3.1",
+    "@types/meow": "^6.0.0",
+    "lodash": "^4.17.21",
+    "meow": "^6.1.0"
   },
   "gitHead": "dd71a2d404218ccec2e657df9c0263dc1c15b9e0",
   "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/icon",
@@ -38,4 +43,4 @@
   "bugs": {
     "url": "https://jira.mongodb.org/projects/PD/summary"
   }
-}
+}

package/rollup.config.mjs

@@ -0,0 +1,38 @@
+import {
+  esmConfig,
+  storiesConfig,
+  umdConfig,
+} from '@lg-tools/build/config/rollup.config.mjs';
+import fs from 'fs';
+import path from 'path';
+
+/**
+ *
+ * @returns An array of all generated glyphs
+ */
+function getGeneratedFiles() {
+  const directory = path.resolve(process.cwd(), 'src/generated');
+
+  if (!fs.existsSync(directory)) {
+    return [];
+  }
+
+  return fs
+    .readdirSync(directory)
+    .filter(file => /\.tsx?$/.test(file))
+    .map(file => path.resolve(directory, file));
+}
+
+// Create both ESM and UMD builds for each icon
+const iconConfigs = [esmConfig, umdConfig].flatMap(config =>
+  getGeneratedFiles().map(file => ({
+    ...config,
+    input: `src/generated/${path.basename(file)}`,
+    output: {
+      ...config.output,
+      name: `${path.basename(file, path.extname(file))}.js`,
+    },
+  })),
+);
+
+export default [esmConfig, umdConfig, storiesConfig, ...iconConfigs];

package/scripts/prebuild.ts

@@ -0,0 +1,133 @@
+const { createHash } = require('crypto');
+const fs = require('fs');
+const path = require('path');
+const { promisify } = require('util');
+const { default: svgr } = require('@svgr/core');
+const meow = require('meow');
+const template = require('./template');
+const svgrrc = require('../.svgrrc');
+
+interface Flags {
+  outDir?: string;
+}
+
+interface FileObject {
+  name: string;
+  path: string;
+}
+
+const usageString = `
+Usage
+  $ ts-node ./build.ts <filename(s)>
+
+Options
+  --outDir, -o  Output directory for built SVG components
+`;
+
+const cliConfig = {
+  flags: {
+    outDir: {
+      type: 'string',
+      alias: 'o',
+    },
+  },
+};
+
+const cli = meow(usageString, cliConfig);
+
+async function buildSvgFiles(
+  input: Array<string>,
+  flags: Flags,
+): Promise<void> {
+  const svgFiles: Array<FileObject> = await (async () => {
+    if (input?.length) {
+      const filteredSvgFiles = input.filter(filterSvgFiles);
+
+      return filteredSvgFiles.map(filePath => ({
+        name: path.basename(filePath, '.svg'),
+        path: path.resolve(process.cwd(), filePath),
+      }));
+    }
+
+    const glyphsDir: string = path.resolve(__dirname, '..', 'src', 'glyphs');
+    const svgFiles = await promisify(fs.readdir)(glyphsDir);
+    const filteredSvgFiles = svgFiles.filter(filterSvgFiles);
+
+    return filteredSvgFiles.map((fileName: string) => ({
+      name: fileName.replace('.svg', ''),
+      path: path.resolve(glyphsDir, fileName),
+    }));
+  })();
+
+  const outputDir = await createOutputDirectory(flags);
+
+  await Promise.all(svgFiles.map(processFile(outputDir)));
+}
+
+function filterSvgFiles(str: string): boolean {
+  return str.includes('.svg');
+}
+
+async function createOutputDirectory(flags: Flags) {
+  let outputDir = path.resolve(__dirname, '..', 'src/generated');
+
+  if (flags.outDir) {
+    outputDir = path.resolve(process.cwd(), flags.outDir);
+  }
+
+  const outputDirectoryExists = await promisify(fs.exists)(outputDir);
+
+  if (!outputDirectoryExists) {
+    await promisify(fs.mkdir)(outputDir, { recursive: true });
+  }
+
+  return outputDir;
+}
+
+function annotateFileContent(
+  script: string,
+  checksum: string,
+  moduleCode: string,
+) {
+  return `/**
+* This is a generated file. Do not modify it manually.
+*
+* @script ${script}
+* @checksum ${checksum}
+*/
+${moduleCode}`;
+}
+
+function processFile(outputDir: string) {
+  return async (file: FileObject) => {
+    const fileContent = await promisify(fs.readFile)(file.path, {
+      encoding: 'utf8',
+    });
+
+    const moduleCode = await svgr(
+      fileContent,
+      {
+        ...svgrrc,
+        template,
+      },
+      {
+        componentName: file.name,
+      },
+    );
+
+    const script = './node_modules/.bin/ts-node packages/icon/scripts/build.ts';
+
+    const checksum = createHash('md5')
+      .update(script)
+      .update(fileContent)
+      .update(moduleCode)
+      .digest('hex');
+
+    await promisify(fs.writeFile)(
+      path.resolve(outputDir, `${file.name}.tsx`),
+      annotateFileContent(script, checksum, moduleCode),
+    );
+  };
+}
+
+buildSvgFiles(cli.input, cli.flags);

package/src/Icon.story.tsx

@@ -29,6 +29,9 @@ const meta: StoryMetaType<typeof Icon> = {
       defaultValue: Size.Default,
     },
     glyph: { control: 'none' },
+    fill: {
+      control: 'color',
+    },
   },
 };
 

package/src/generated/ActivityFeed.tsx

@@ -1,13 +1,12 @@
 /**
- * This is a generated file. Do not modify it manually.
- *
- * @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
- * @checksum 1283b3426ccc71fb1c4a0d1cb1328eb7
- */
-import { css, cx } from '@leafygreen-ui/emotion';
+* This is a generated file. Do not modify it manually.
+*
+* @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
+* @checksum a8c64262fe3d9e416b659896d37ac3db
+*/
+import * as React from "react";
 import PropTypes from 'prop-types';
-import * as React from 'react';
-
+import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface ActivityFeedProps extends LGGlyph.ComponentProps {}
@@ -22,52 +21,25 @@ const ActivityFeed = ({
   ...props
 }: ActivityFeedProps) => {
   const fillStyle = css`
-    color: ${fill};
-  `;
+        color: ${fill};
+      `;
   const noFlexShrink = css`
-    flex-shrink: 0;
-  `;
+        flex-shrink: 0;
+      `;
   const accessibleProps = generateAccessibleProps(role, 'ActivityFeed', {
     title,
     ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby,
+    ['aria-labelledby']: ariaLabelledby
   });
-  return (
-    <svg
-      className={cx(
-        {
-          [fillStyle]: fill != null,
-        },
-        noFlexShrink,
-        className,
-      )}
-      height={typeof size === 'number' ? size : sizeMap[size]}
-      width={typeof size === 'number' ? size : sizeMap[size]}
-      role={role}
-      {...accessibleProps}
-      {...props}
-      viewBox="0 0 16 16"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M1 13V7H5.5C6.32843 7 7 6.32843 7 5.5V1H9C10.1046 1 11 1.89543 11 3V7.51491C10.9701 7.51164 10.9401 7.50889 10.9099 7.50668C9.80561 7.42578 8.77964 8.08094 8.38847 9.11682L7.32818 11.9246C6.27375 12.2181 5.5 13.1854 5.5 14.3333C5.5 14.5642 5.53129 14.7878 5.58987 15H3C1.89543 15 1 14.1046 1 13ZM4.91421 1H5.83333V4.83333C5.83333 5.38562 5.38562 5.83333 4.83333 5.83333H1V4.91421C1 4.649 1.10536 4.39464 1.29289 4.20711L2.5 3L4.20711 1.29289C4.39464 1.10536 4.649 1 4.91421 1Z"
-        fill={'currentColor'}
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M10.8003 9.00268C11.2421 9.03504 11.6099 9.35411 11.7043 9.78684L12.3135 12.5789L12.8215 11.8647C13.0091 11.601 13.3128 11.4444 13.6364 11.4444H15C15.5523 11.4444 16 11.8922 16 12.4444C16 12.9967 15.5523 13.4444 15 13.4444H14.1522L12.633 15.5797C12.4036 15.9022 12.0055 16.059 11.6178 15.9797C11.23 15.9004 10.9255 15.5999 10.8412 15.2132L10.47 13.512L10.0264 14.6866C9.87947 15.0758 9.50691 15.3333 9.09091 15.3333H8C7.44772 15.3333 7 14.8856 7 14.3333C7 13.7811 7.44772 13.3333 8 13.3333H8.39961L9.79175 9.64673C9.94822 9.23238 10.3586 8.97032 10.8003 9.00268Z"
-        fill={'currentColor'}
-      />
-    </svg>
-  );
+  return <svg className={cx({
+    [fillStyle]: fill != null
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M1 13V7H5.5C6.32843 7 7 6.32843 7 5.5V1H9C10.1046 1 11 1.89543 11 3V7.51491C10.9701 7.51164 10.9401 7.50889 10.9099 7.50668C9.80561 7.42578 8.77964 8.08094 8.38847 9.11682L7.32818 11.9246C6.27375 12.2181 5.5 13.1854 5.5 14.3333C5.5 14.5642 5.53129 14.7878 5.58987 15H3C1.89543 15 1 14.1046 1 13ZM4.91421 1H5.83333V4.83333C5.83333 5.38562 5.38562 5.83333 4.83333 5.83333H1V4.91421C1 4.649 1.10536 4.39464 1.29289 4.20711L2.5 3L4.20711 1.29289C4.39464 1.10536 4.649 1 4.91421 1Z" fill={'currentColor'} /><path fillRule="evenodd" clipRule="evenodd" d="M10.8003 9.00268C11.2421 9.03504 11.6099 9.35411 11.7043 9.78684L12.3135 12.5789L12.8215 11.8647C13.0091 11.601 13.3128 11.4444 13.6364 11.4444H15C15.5523 11.4444 16 11.8922 16 12.4444C16 12.9967 15.5523 13.4444 15 13.4444H14.1522L12.633 15.5797C12.4036 15.9022 12.0055 16.059 11.6178 15.9797C11.23 15.9004 10.9255 15.5999 10.8412 15.2132L10.47 13.512L10.0264 14.6866C9.87947 15.0758 9.50691 15.3333 9.09091 15.3333H8C7.44772 15.3333 7 14.8856 7 14.3333C7 13.7811 7.44772 13.3333 8 13.3333H8.39961L9.79175 9.64673C9.94822 9.23238 10.3586 8.97032 10.8003 9.00268Z" fill={'currentColor'} /></svg>;
 };
 ActivityFeed.displayName = 'ActivityFeed';
 ActivityFeed.isGlyph = true;
 ActivityFeed.propTypes = {
   fill: PropTypes.string,
   size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  className: PropTypes.string,
+  className: PropTypes.string
 };
-export default ActivityFeed;
+export default ActivityFeed;

package/src/generated/AddFile.tsx

@@ -1,13 +1,12 @@
 /**
- * This is a generated file. Do not modify it manually.
- *
- * @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
- * @checksum 5ae932dadfe78822214b7ee083b44487
- */
-import { css, cx } from '@leafygreen-ui/emotion';
+* This is a generated file. Do not modify it manually.
+*
+* @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
+* @checksum 84f2c48e04fac3b3e9d033223d34fd5a
+*/
+import * as React from "react";
 import PropTypes from 'prop-types';
-import * as React from 'react';
-
+import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface AddFileProps extends LGGlyph.ComponentProps {}
@@ -22,46 +21,25 @@ const AddFile = ({
   ...props
 }: AddFileProps) => {
   const fillStyle = css`
-    color: ${fill};
-  `;
+        color: ${fill};
+      `;
   const noFlexShrink = css`
-    flex-shrink: 0;
-  `;
+        flex-shrink: 0;
+      `;
   const accessibleProps = generateAccessibleProps(role, 'AddFile', {
     title,
     ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby,
+    ['aria-labelledby']: ariaLabelledby
   });
-  return (
-    <svg
-      className={cx(
-        {
-          [fillStyle]: fill != null,
-        },
-        noFlexShrink,
-        className,
-      )}
-      height={typeof size === 'number' ? size : sizeMap[size]}
-      width={typeof size === 'number' ? size : sizeMap[size]}
-      role={role}
-      {...accessibleProps}
-      {...props}
-      viewBox="0 0 16 16"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M1 7V13C1 14.1046 1.89543 15 3 15H8.9682C8.24461 14.6259 7.75 13.8707 7.75 13C7.75 11.8376 8.63145 10.8811 9.7624 10.7624C9.84441 9.98094 10.3264 9.31861 11 8.98388V3C11 1.89543 10.1046 1 9 1H7V5.5C7 6.32843 6.32843 7 5.5 7H1ZM9 13C9 13.5523 9.44772 14 10 14H10.7324H11V15C11 15.5523 11.4477 16 12 16C12.5523 16 13 15.5523 13 15V14H14C14.5523 14 15 13.5523 15 13C15 12.4477 14.5523 12 14 12H13V11C13 10.4477 12.5523 10 12 10C11.4477 10 11 10.4477 11 11V12H10C9.44772 12 9 12.4477 9 13ZM5.83333 1H4.91421C4.649 1 4.39464 1.10536 4.20711 1.29289L2.5 3L1.29289 4.20711C1.10536 4.39464 1 4.649 1 4.91421V5.83333H4.83333C5.38562 5.83333 5.83333 5.38562 5.83333 4.83333V1Z"
-        fill={'currentColor'}
-      />
-    </svg>
-  );
+  return <svg className={cx({
+    [fillStyle]: fill != null
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M1 7V13C1 14.1046 1.89543 15 3 15H8.9682C8.24461 14.6259 7.75 13.8707 7.75 13C7.75 11.8376 8.63145 10.8811 9.7624 10.7624C9.84441 9.98094 10.3264 9.31861 11 8.98388V3C11 1.89543 10.1046 1 9 1H7V5.5C7 6.32843 6.32843 7 5.5 7H1ZM9 13C9 13.5523 9.44772 14 10 14H10.7324H11V15C11 15.5523 11.4477 16 12 16C12.5523 16 13 15.5523 13 15V14H14C14.5523 14 15 13.5523 15 13C15 12.4477 14.5523 12 14 12H13V11C13 10.4477 12.5523 10 12 10C11.4477 10 11 10.4477 11 11V12H10C9.44772 12 9 12.4477 9 13ZM5.83333 1H4.91421C4.649 1 4.39464 1.10536 4.20711 1.29289L2.5 3L1.29289 4.20711C1.10536 4.39464 1 4.649 1 4.91421V5.83333H4.83333C5.38562 5.83333 5.83333 5.38562 5.83333 4.83333V1Z" fill={'currentColor'} /></svg>;
 };
 AddFile.displayName = 'AddFile';
 AddFile.isGlyph = true;
 AddFile.propTypes = {
   fill: PropTypes.string,
   size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  className: PropTypes.string,
+  className: PropTypes.string
 };
-export default AddFile;
+export default AddFile;

package/src/generated/Apps.tsx

@@ -1,13 +1,12 @@
 /**
- * This is a generated file. Do not modify it manually.
- *
- * @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
- * @checksum c0ba25879d1b6894c59578bc7dfd8ec2
- */
-import { css, cx } from '@leafygreen-ui/emotion';
+* This is a generated file. Do not modify it manually.
+*
+* @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
+* @checksum 415154a55e4eefae1501b7a6319a4a68
+*/
+import * as React from "react";
 import PropTypes from 'prop-types';
-import * as React from 'react';
-
+import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap } from '../glyphCommon';
 import { LGGlyph } from '../types';
 export interface AppsProps extends LGGlyph.ComponentProps {}
@@ -22,46 +21,25 @@ const Apps = ({
   ...props
 }: AppsProps) => {
   const fillStyle = css`
-    color: ${fill};
-  `;
+        color: ${fill};
+      `;
   const noFlexShrink = css`
-    flex-shrink: 0;
-  `;
+        flex-shrink: 0;
+      `;
   const accessibleProps = generateAccessibleProps(role, 'Apps', {
     title,
     ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledby,
+    ['aria-labelledby']: ariaLabelledby
   });
-  return (
-    <svg
-      className={cx(
-        {
-          [fillStyle]: fill != null,
-        },
-        noFlexShrink,
-        className,
-      )}
-      height={typeof size === 'number' ? size : sizeMap[size]}
-      width={typeof size === 'number' ? size : sizeMap[size]}
-      role={role}
-      {...accessibleProps}
-      {...props}
-      viewBox="0 0 16 16"
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M7 3H3V7H7V3ZM7 9H3V13H7V9ZM9 3H13V7H9V3ZM13 9H9V13H13V9Z"
-        fill={'currentColor'}
-      />
-    </svg>
-  );
+  return <svg className={cx({
+    [fillStyle]: fill != null
+  }, noFlexShrink, className)} height={typeof size === 'number' ? size : sizeMap[size]} width={typeof size === 'number' ? size : sizeMap[size]} role={role} {...accessibleProps} {...props} viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M7 3H3V7H7V3ZM7 9H3V13H7V9ZM9 3H13V7H9V3ZM13 9H9V13H13V9Z" fill={'currentColor'} /></svg>;
 };
 Apps.displayName = 'Apps';
 Apps.isGlyph = true;
 Apps.propTypes = {
   fill: PropTypes.string,
   size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  className: PropTypes.string,
+  className: PropTypes.string
 };
-export default Apps;
+export default Apps;