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

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafygreen-ui/icon",
-  "version": "11.19.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;

package/src/generated/Array.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 9a75a502b4295e0623c6b1093cfa927e
- */
-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 302cbbf56d0c7b179f5273015cb6bdf0
+*/
+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 ArrayProps extends LGGlyph.ComponentProps {}
@@ -22,48 +21,25 @@ const Array = ({
   ...props
 }: ArrayProps) => {
   const fillStyle = css`
-    color: ${fill};
-  `;
+        color: ${fill};
+      `;
   const noFlexShrink = css`
-    flex-shrink: 0;
-  `;
+        flex-shrink: 0;
+      `;
   const accessibleProps = generateAccessibleProps(role, 'Array', {
     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
-        d="M2.5 1C2.22386 1 2 1.22386 2 1.5V14.5C2 14.7761 2.22386 15 2.5 15H6.5C6.77614 15 7 14.7761 7 14.5V13.5C7 13.2239 6.77614 13 6.5 13H4V3H6.5C6.77614 3 7 2.77614 7 2.5V1.5C7 1.22386 6.77614 1 6.5 1H2.5Z"
-        fill={'currentColor'}
-      />
-      <path
-        d="M13.5 1C13.7761 1 14 1.22386 14 1.5V14.5C14 14.7761 13.7761 15 13.5 15H9.5C9.22386 15 9 14.7761 9 14.5V13.5C9 13.2239 9.22386 13 9.5 13H12V3H9.5C9.22386 3 9 2.77614 9 2.5V1.5C9 1.22386 9.22386 1 9.5 1H13.5Z"
-        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 d="M2.5 1C2.22386 1 2 1.22386 2 1.5V14.5C2 14.7761 2.22386 15 2.5 15H6.5C6.77614 15 7 14.7761 7 14.5V13.5C7 13.2239 6.77614 13 6.5 13H4V3H6.5C6.77614 3 7 2.77614 7 2.5V1.5C7 1.22386 6.77614 1 6.5 1H2.5Z" fill={'currentColor'} /><path d="M13.5 1C13.7761 1 14 1.22386 14 1.5V14.5C14 14.7761 13.7761 15 13.5 15H9.5C9.22386 15 9 14.7761 9 14.5V13.5C9 13.2239 9.22386 13 9.5 13H12V3H9.5C9.22386 3 9 2.77614 9 2.5V1.5C9 1.22386 9.22386 1 9.5 1H13.5Z" fill={'currentColor'} /></svg>;
 };
 Array.displayName = 'Array';
 Array.isGlyph = true;
 Array.propTypes = {
   fill: PropTypes.string,
   size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  className: PropTypes.string,
+  className: PropTypes.string
 };
-export default Array;
+export default Array;

package/src/generated/ArrowDown.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 888632c3ba6580eaf948506dcfde1a91
- */
-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 8d62846f332524d14eb34fa5a2531124
+*/
+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 ArrowDownProps extends LGGlyph.ComponentProps {}
@@ -22,44 +21,25 @@ const ArrowDown = ({
   ...props
 }: ArrowDownProps) => {
   const fillStyle = css`
-    color: ${fill};
-  `;
+        color: ${fill};
+      `;
   const noFlexShrink = css`
-    flex-shrink: 0;
-  `;
+        flex-shrink: 0;
+      `;
   const accessibleProps = generateAccessibleProps(role, 'ArrowDown', {
     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
-        d="M9.16788 3L9.16788 9.94442L10.7029 8.40941C11.0934 8.01888 11.7266 8.01889 12.1171 8.40941L12.356 8.64833C12.7465 9.03885 12.7465 9.67201 12.356 10.0625L8.97339 13.4452C8.96483 13.4544 8.95605 13.4635 8.94708 13.4725L8.70816 13.7114C8.31763 14.1019 7.68447 14.1019 7.29395 13.7114L3.64279 10.0602C3.25227 9.66972 3.25227 9.03656 3.64279 8.64603L3.88171 8.40712C4.27223 8.01659 4.9054 8.01659 5.29592 8.40712L6.83 9.9412L6.83 3C6.83 2.44771 7.27772 2 7.83001 2L8.16788 2C8.72017 2 9.16788 2.44772 9.16788 3Z"
-        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 d="M9.16788 3L9.16788 9.94442L10.7029 8.40941C11.0934 8.01888 11.7266 8.01889 12.1171 8.40941L12.356 8.64833C12.7465 9.03885 12.7465 9.67201 12.356 10.0625L8.97339 13.4452C8.96483 13.4544 8.95605 13.4635 8.94708 13.4725L8.70816 13.7114C8.31763 14.1019 7.68447 14.1019 7.29395 13.7114L3.64279 10.0602C3.25227 9.66972 3.25227 9.03656 3.64279 8.64603L3.88171 8.40712C4.27223 8.01659 4.9054 8.01659 5.29592 8.40712L6.83 9.9412L6.83 3C6.83 2.44771 7.27772 2 7.83001 2L8.16788 2C8.72017 2 9.16788 2.44772 9.16788 3Z" fill={'currentColor'} /></svg>;
 };
 ArrowDown.displayName = 'ArrowDown';
 ArrowDown.isGlyph = true;
 ArrowDown.propTypes = {
   fill: PropTypes.string,
   size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  className: PropTypes.string,
+  className: PropTypes.string
 };
-export default ArrowDown;
+export default ArrowDown;