@leafygreen-ui/icon 11.8.0 → 11.10.1

package/{src → scripts}/template.ts

@@ -43,9 +43,10 @@ module.exports = function template(
     />`;
 
   // Augment the `<svg attributes />` so we can customize it with the values above.
-  jsx.openingElement.attributes = jsxAttributes.expression.openingElement.attributes.concat(
-    jsx.openingElement.attributes[2],
-  );
+  jsx.openingElement.attributes =
+    jsxAttributes.expression.openingElement.attributes.concat(
+      jsx.openingElement.attributes[2],
+    );
 
   return typeScriptTpl(`
     %%imports%%

package/src/Icon.spec.tsx

@@ -11,6 +11,7 @@ import { createIconComponent, glyphs } from '.';
 import createGlyphComponent from './createGlyphComponent';
 import EditIcon from '@leafygreen-ui/icon/dist/Edit';
 import { Size } from './glyphCommon';
+import { isComponentGlyph } from './isComponentGlyph';
 
 function getBaseName(filePath: string): string {
   return path.basename(filePath, path.extname(filePath));
@@ -32,6 +33,50 @@ fs.readdirSync(generatedFilesDirectory).forEach(filePath => {
   baseNameToGeneratedFilePath[getBaseName(filePath)] = filePath;
 });
 
+const MyTestSVGRGlyph: SVGR.Component = props => (
+  <svg data-testid="my-glyph" {...props}></svg>
+);
+
+const customTestGlyphs = {
+  MyTestSVGRGlyph: createGlyphComponent('MyTestSVGRGlyph', MyTestSVGRGlyph),
+};
+
+describe('packages/Icon/isComponentGlyph', () => {
+  test('returns `true` for a rendered component', () => {
+    const TestNode: React.ComponentType<any> & { isGlyph?: boolean } = () => (
+      <div />
+    );
+    TestNode.isGlyph = true;
+    const renderedTestNode = <TestNode />;
+    expect(isComponentGlyph(renderedTestNode)).toBeTruthy();
+  });
+
+  test('returns `true` for a component function', () => {
+    const TestNode: React.ComponentType<any> & { isGlyph?: boolean } = () => (
+      <div />
+    );
+    TestNode.isGlyph = true;
+    expect(isComponentGlyph(TestNode)).toBeTruthy();
+  });
+
+  test('returns `false` if isGlyph is false', () => {
+    const TestNode: React.ComponentType<any> & { isGlyph?: boolean } = () => (
+      <div />
+    );
+    TestNode.isGlyph = false;
+    const renderedTestNode = <TestNode />;
+    expect(isComponentGlyph(TestNode)).toBeFalsy();
+    expect(isComponentGlyph(renderedTestNode)).toBeFalsy();
+  });
+
+  test('returns `false` if isGlyph is not set', () => {
+    const TestNode: React.ComponentType<any> = () => <div />;
+    const renderedTestNode = <TestNode />;
+    expect(isComponentGlyph(TestNode)).toBeFalsy();
+    expect(isComponentGlyph(renderedTestNode)).toBeFalsy();
+  });
+});
+
 describe('packages/Icon/glyphs/', () => {
   describe('a11y', () => {
     test('does not have basic accessibility issues', async () => {
@@ -86,19 +131,28 @@ describe('packages/Icon/glyphs/', () => {
   });
 });
 
-const MyGlyph: SVGR.Component = props => (
-  <svg data-testid="my-glyph" {...props}></svg>
-);
-
 describe('packages/Icon/createGlyphComponent', () => {
-  const GlyphComponent = createGlyphComponent('MyGlyph', MyGlyph);
+  const GlyphComponent = createGlyphComponent(
+    'MyTestSVGRGlyph',
+    MyTestSVGRGlyph,
+  );
 
-  test('returns a function', () => {
+  test('returns a LGGlyph component', () => {
     expect(typeof GlyphComponent).toBe('function');
+    expect(isComponentGlyph(GlyphComponent)).toBeTruthy();
+  });
+
+  test('returned component has correct display name', () => {
+    expect(GlyphComponent.displayName).toBe('MyTestSVGRGlyph');
+  });
+
+  test('returned component has the property `isGlyph`', () => {
+    expect(GlyphComponent).toHaveProperty('isGlyph');
+    expect(GlyphComponent.isGlyph).toBeTruthy();
   });
 
-  test('returned function has correct display name', () => {
-    expect(GlyphComponent.displayName).toBe('MyGlyph');
+  test('returned function passes `isComponentGlyph`', () => {
+    expect(isComponentGlyph(GlyphComponent)).toBeTruthy();
   });
 
   test('returned function renders the glyph specified', () => {
@@ -134,12 +188,8 @@ describe('packages/Icon/createGlyphComponent', () => {
   });
 });
 
-const customGlyphs = {
-  MyGlyph: createGlyphComponent('MyGlyph', MyGlyph),
-};
-
 describe('packages/Icon/createIconComponent', () => {
-  const IconComponent = createIconComponent(customGlyphs);
+  const IconComponent = createIconComponent(customTestGlyphs);
 
   test('returns a function', () => {
     expect(typeof IconComponent).toBe('function');
@@ -149,8 +199,17 @@ describe('packages/Icon/createIconComponent', () => {
     expect(IconComponent.displayName).toBe('Icon');
   });
 
+  test('returned function has the property: `isGlyph`', () => {
+    expect(IconComponent).toHaveProperty('isGlyph');
+    expect(IconComponent.isGlyph).toBeTruthy();
+  });
+
+  test('returned function passes `isComponentGlyph`', () => {
+    expect(isComponentGlyph(IconComponent)).toBeTruthy();
+  });
+
   test('returned funciton renders the glyph specified', () => {
-    const { getByTestId } = render(<IconComponent glyph="MyGlyph" />);
+    const { getByTestId } = render(<IconComponent glyph="MyTestSVGRGlyph" />);
     const glyph = getByTestId('my-glyph');
 
     if (!typeIs.element(glyph)) {
@@ -162,7 +221,7 @@ describe('packages/Icon/createIconComponent', () => {
   describe('returned funcion passes through props', () => {
     test('`size` prop as number', () => {
       const { getByTestId } = render(
-        <IconComponent glyph="MyGlyph" size={20} />,
+        <IconComponent glyph="MyTestSVGRGlyph" size={20} />,
       );
       const glyph = getByTestId('my-glyph');
       expect(glyph).toHaveAttribute('height', '20');
@@ -171,7 +230,7 @@ describe('packages/Icon/createIconComponent', () => {
 
     test('`size` prop as Size', () => {
       const { getByTestId } = render(
-        <IconComponent glyph="MyGlyph" size={Size.Large} />,
+        <IconComponent glyph="MyTestSVGRGlyph" size={Size.Large} />,
       );
       const glyph = getByTestId('my-glyph');
       expect(glyph).toHaveAttribute('height', '20');
@@ -180,7 +239,7 @@ describe('packages/Icon/createIconComponent', () => {
 
     test('`role`', () => {
       const { getByTestId } = render(
-        <IconComponent glyph="MyGlyph" role="presentation" />,
+        <IconComponent glyph="MyTestSVGRGlyph" role="presentation" />,
       );
       const glyph = getByTestId('my-glyph');
       expect(glyph).toHaveAttribute('role', 'presentation');
@@ -228,14 +287,10 @@ describe('Generated glyphs', () => {
           },
         );
 
-        const [
-          ,
-          script,
-          checksum,
-          checkedContents,
-        ] = /^\/\*.*@script ([^\n]*).*@checksum ([^\n]*).*\*\/\n(.*)$/s.exec(
-          generatedFileContents,
-        )!;
+        const [, script, checksum, checkedContents] =
+          /^\/\*.*@script ([^\n]*).*@checksum ([^\n]*).*\*\/\n(.*)$/s.exec(
+            generatedFileContents,
+          )!;
 
         const expectedChecksum = createHash('md5')
           .update(script)

package/src/Icon.story.tsx

@@ -1,16 +1,21 @@
+// TODO: Generate Icon props with controls
 import React from 'react';
-import Icon, { glyphs, Size } from '.';
+import Icon, { glyphs } from '.';
 import { css } from '@leafygreen-ui/emotion';
-import { storiesOf } from '@storybook/react';
-import { color, select } from '@storybook/addon-knobs';
-import { uiColors } from '@leafygreen-ui/palette';
+import { ComponentStory, Meta } from '@storybook/react';
+import { palette } from '@leafygreen-ui/palette';
+
+export default {
+  title: 'Components/Icons',
+  component: Icon,
+} as Meta<typeof Icon>;
 
 const containerStyle = css`
   width: 150px;
   height: 70px;
   flex-shrink: 0;
   text-align: center;
-  border: 1px solid #babdbe;
+  border: 1px solid ${palette.gray.light1};
   border-radius: 5px;
   display: flex;
   align-items: center;
@@ -21,20 +26,17 @@ const containerStyle = css`
 
 const textStyle = css`
   font-size: 12px;
-  color: ${uiColors.gray.base};
+  color: ${palette.gray.base};
   margin-top: 0.5rem;
 `;
 
-storiesOf('Icons', module).add('Icon', () => {
-  const fill = color('Fill', '#000000');
-  const size = select('size', Object.values(Size), Size.Default);
-
-  const renderGlyph = (glyph: string) => (
-    <div key={glyph} className={containerStyle}>
-      <Icon glyph={glyph} fill={fill} size={size} />
-      <div className={textStyle}>{glyph}</div>
-    </div>
-  );
-
-  return <>{Object.keys(glyphs).map(renderGlyph)}</>;
-});
+export const AllIcons: ComponentStory<typeof Icon> = args => (
+  <>
+    {Object.keys(glyphs).map(glyph => (
+      <div key={glyph} className={containerStyle}>
+        <Icon {...args} glyph={glyph} />
+        <div className={textStyle}>{glyph}</div>
+      </div>
+    ))}
+  </>
+);

package/src/createGlyphComponent.tsx

@@ -15,7 +15,7 @@ export default function createGlyphComponent(
   glyphName: string,
   Glyph: SVGR.Component,
 ): LGGlyph.Component {
-  function GlyphComponent({
+  const GlyphComponent: LGGlyph.Component = ({
     className,
     size = Size.Default,
     fill,
@@ -24,7 +24,7 @@ export default function createGlyphComponent(
     'aria-label': ariaLabel,
     role = 'img',
     ...rest
-  }: LGGlyph.ComponentProps) {
+  }: LGGlyph.ComponentProps) => {
     const fillStyle = css`
       color: ${fill};
     `;
@@ -56,7 +56,7 @@ export default function createGlyphComponent(
         {...rest}
       />
     );
-  }
+  };
 
   GlyphComponent.displayName = glyphName;
 

package/src/createIconComponent.tsx

@@ -17,16 +17,18 @@ type GlyphObject = Record<string, LGGlyph.Component>;
  * @returns Icon component
  */
 export default function createIconComponent<
-  G extends GlyphObject = GlyphObject
+  G extends GlyphObject = GlyphObject,
 >(glyphs: G) {
   const Icon = ({ glyph, ...rest }: IconProps) => {
     const SVGComponent = glyphs[glyph];
-
+    SVGComponent.isGlyph = true;
     return <SVGComponent {...rest} />;
   };
 
   Icon.displayName = 'Icon';
 
+  Icon.isGlyph = true;
+
   Icon.propTypes = {
     glyph: PropTypes.oneOf(Object.keys(glyphs)).isRequired,
     size: PropTypes.oneOfType([

package/src/generated/Cursor.tsx

@@ -0,0 +1,68 @@
+/**
+ * This is a generated file. Do not modify it manually.
+ *
+ * @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
+ * @checksum 1b8979dfc4d8c6e3992b7c104991dfb8
+ */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { generateAccessibleProps, sizeMap } from '../glyphCommon';
+import { LGGlyph } from '../types';
+export interface CursorProps extends LGGlyph.ComponentProps {}
+
+const Cursor = ({
+  className,
+  size = 16,
+  title,
+  ['aria-label']: ariaLabel,
+  ['aria-labelledby']: ariaLabelledby,
+  fill,
+  role = 'img',
+  ...props
+}: CursorProps) => {
+  const fillStyle = css`
+    color: ${fill};
+  `;
+  const noFlexShrink = css`
+    flex-shrink: 0;
+  `;
+  const accessibleProps = generateAccessibleProps(role, 'Cursor', {
+    title,
+    ['aria-label']: ariaLabel,
+    ['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="M8.53436 8.53438L9.00697 8.26403L11.3957 6.89757L4.64845 4.64847L6.89754 11.3958L8.26401 9.00699L8.53436 8.53438ZM10 10.0001L14.4801 7.4373C15.2139 7.10378 15.1582 6.04354 14.3936 5.78866L3.16879 2.04707C2.47551 1.81597 1.81595 2.47553 2.04704 3.16881L5.78864 14.3936C6.04352 15.1582 7.10375 15.2139 7.43728 14.4801L10 10.0001Z"
+        fill={'currentColor'}
+      />
+    </svg>
+  );
+};
+
+Cursor.displayName = 'Cursor';
+Cursor.isGlyph = true;
+Cursor.propTypes = {
+  fill: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  className: PropTypes.string,
+};
+export default Cursor;

package/src/generated/Diagram2.tsx

@@ -0,0 +1,66 @@
+/**
+ * This is a generated file. Do not modify it manually.
+ *
+ * @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
+ * @checksum 8e515220dd6e2c7b9ab03d7a94d3ec34
+ */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { generateAccessibleProps, sizeMap } from '../glyphCommon';
+import { LGGlyph } from '../types';
+export interface Diagram2Props extends LGGlyph.ComponentProps {}
+
+const Diagram2 = ({
+  className,
+  size = 16,
+  title,
+  ['aria-label']: ariaLabel,
+  ['aria-labelledby']: ariaLabelledby,
+  fill,
+  role = 'img',
+  ...props
+}: Diagram2Props) => {
+  const fillStyle = css`
+    color: ${fill};
+  `;
+  const noFlexShrink = css`
+    flex-shrink: 0;
+  `;
+  const accessibleProps = generateAccessibleProps(role, 'Diagram2', {
+    title,
+    ['aria-label']: ariaLabel,
+    ['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="M10.72 1C10.3224 1 10 1.33579 10 1.75V2H7.48C7.2149 2 7 2.22386 7 2.5V7H5V6.75C5 6.33579 4.67765 6 4.28 6H1.72C1.32235 6 1 6.33579 1 6.75V8.25C1 8.66421 1.32235 9 1.72 9H4.28C4.67765 9 5 8.66421 5 8.25V8H7V12.5C7 12.7761 7.2149 13 7.48 13H10V13.25C10 13.6642 10.3224 14 10.72 14H12.78C13.1776 14 13.5 13.6642 13.5 13.25V11.75C13.5 11.3358 13.1776 11 12.78 11H10.72C10.3224 11 10 11.3358 10 11.75V12H8V8H10V8.25C10 8.66421 10.3224 9 10.72 9H12.78C13.1776 9 13.5 8.66421 13.5 8.25V6.75C13.5 6.33579 13.1776 6 12.78 6H10.72C10.3224 6 10 6.33579 10 6.75V7H8V3H10V3.25C10 3.66421 10.3224 4 10.72 4H12.78C13.1776 4 13.5 3.66421 13.5 3.25V1.75C13.5 1.33579 13.1776 1 12.78 1L10.72 1Z"
+        fill={'currentColor'}
+      />
+    </svg>
+  );
+};
+
+Diagram2.displayName = 'Diagram2';
+Diagram2.isGlyph = true;
+Diagram2.propTypes = {
+  fill: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  className: PropTypes.string,
+};
+export default Diagram2;

package/src/generated/Diagram3.tsx

@@ -0,0 +1,68 @@
+/**
+ * This is a generated file. Do not modify it manually.
+ *
+ * @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
+ * @checksum a55f4f87ce97dfcb1d8337797e4ea72b
+ */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { generateAccessibleProps, sizeMap } from '../glyphCommon';
+import { LGGlyph } from '../types';
+export interface Diagram3Props extends LGGlyph.ComponentProps {}
+
+const Diagram3 = ({
+  className,
+  size = 16,
+  title,
+  ['aria-label']: ariaLabel,
+  ['aria-labelledby']: ariaLabelledby,
+  fill,
+  role = 'img',
+  ...props
+}: Diagram3Props) => {
+  const fillStyle = css`
+    color: ${fill};
+  `;
+  const noFlexShrink = css`
+    flex-shrink: 0;
+  `;
+  const accessibleProps = generateAccessibleProps(role, 'Diagram3', {
+    title,
+    ['aria-label']: ariaLabel,
+    ['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.75 1C1.33579 1 1 1.33579 1 1.75V3.25C1 3.66421 1.33579 4 1.75 4H4.25C4.66421 4 5 3.66421 5 3.25V1.75C5 1.33579 4.66421 1 4.25 1H1.75ZM11 1.75C11 1.33579 11.3358 1 11.75 1H14.25C14.6642 1 15 1.33579 15 1.75V3.25C15 3.66421 14.6642 4 14.25 4H11.75C11.3358 4 11 3.66421 11 3.25V1.75ZM11 10.75C11 10.3358 11.3358 10 11.75 10H14.25C14.6642 10 15 10.3358 15 10.75V12.25C15 12.6642 14.6642 13 14.25 13H11.75C11.3358 13 11 12.6642 11 12.25V10.75ZM1 10.75C1 10.3358 1.33579 10 1.75 10H4.25C4.66421 10 5 10.3358 5 10.75V12.25C5 12.6642 4.66421 13 4.25 13H1.75C1.33579 13 1 12.6642 1 12.25V10.75ZM6 5C5.44772 5 5 5.44772 5 6V8C5 8.55228 5.44772 9 6 9H10C10.5523 9 11 8.55228 11 8V6C11 5.44772 10.5523 5 10 5H6Z"
+        fill={'currentColor'}
+      />
+    </svg>
+  );
+};
+
+Diagram3.displayName = 'Diagram3';
+Diagram3.isGlyph = true;
+Diagram3.propTypes = {
+  fill: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  className: PropTypes.string,
+};
+export default Diagram3;

package/src/generated/Folder.tsx

@@ -2,7 +2,7 @@
  * This is a generated file. Do not modify it manually.
  *
  * @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
- * @checksum 252783398afac591317ac483bbfcf384
+ * @checksum 2a9ff3a6b8b82526ffa33853f432f626
  */
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -49,7 +49,7 @@ const Folder = ({
       viewBox="0 0 16 16"
     >
       <path
-        d="M2 1C1.44772 1 1 1.44772 1 2V12C1 12.5523 1.44772 13 2 13H14C14.5523 13 15 12.5523 15 12V4C15 3.44772 14.5523 3 14 3H8C7.44772 3 7 2.55228 7 2C7 1.44772 6.55228 1 6 1H2Z"
+        d="M2 2C1.44772 2 1 2.44772 1 3V13C1 13.5523 1.44772 14 2 14H14C14.5523 14 15 13.5523 15 13V5C15 4.44772 14.5523 4 14 4H8C7.44772 4 7 3.55228 7 3C7 2.44772 6.55228 2 6 2H2Z"
         fill={'currentColor'}
       />
     </svg>

package/src/generated/Link.tsx

@@ -0,0 +1,70 @@
+/**
+ * This is a generated file. Do not modify it manually.
+ *
+ * @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
+ * @checksum 8429e954355cc3ddfe12fb35674f8c40
+ */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { generateAccessibleProps, sizeMap } from '../glyphCommon';
+import { LGGlyph } from '../types';
+export interface LinkProps extends LGGlyph.ComponentProps {}
+
+const Link = ({
+  className,
+  size = 16,
+  title,
+  ['aria-label']: ariaLabel,
+  ['aria-labelledby']: ariaLabelledby,
+  fill,
+  role = 'img',
+  ...props
+}: LinkProps) => {
+  const fillStyle = css`
+    color: ${fill};
+  `;
+  const noFlexShrink = css`
+    flex-shrink: 0;
+  `;
+  const accessibleProps = generateAccessibleProps(role, 'Link', {
+    title,
+    ['aria-label']: ariaLabel,
+    ['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="M6.03867 9.95309C5.91948 9.8323 5.81065 9.70512 5.71217 9.57265L7.16282 8.12843C7.2355 8.27756 7.33323 8.41753 7.45605 8.54199C8.06167 9.15571 9.04795 9.1601 9.65896 8.55179L12.5432 5.68033C13.1542 5.07203 13.1586 4.08138 12.553 3.46767C11.9473 2.85395 10.9611 2.84956 10.3501 3.45786L9.97109 3.83515C9.5797 4.22481 8.94791 4.222 8.55996 3.82887C8.17202 3.43574 8.17482 2.80115 8.56622 2.41149L8.94518 2.03421C10.339 0.646579 12.5888 0.656589 13.9703 2.05657C15.3519 3.45655 15.3419 5.71635 13.9481 7.10399L11.0638 9.97545C9.67003 11.3631 7.42018 11.3531 6.03867 9.95309Z"
+        fill={'currentColor'}
+      />
+      <path
+        d="M9.96133 6.04691C10.0805 6.1677 10.1894 6.29488 10.2878 6.42735L8.83718 7.87157C8.7645 7.72244 8.66677 7.58247 8.54395 7.45801C7.93833 6.84429 6.95205 6.83991 6.34104 7.44821L3.45679 10.3197C2.84578 10.928 2.84141 11.9186 3.44703 12.5323C4.05265 13.1461 5.03893 13.1504 5.64994 12.5421L6.02891 12.1649C6.4203 11.7752 7.05209 11.778 7.44004 12.1711C7.82798 12.5643 7.82518 13.1988 7.43378 13.5885L7.05482 13.9658C5.66101 15.3534 3.41117 15.3434 2.02965 13.9434C0.648136 12.5435 0.658103 10.2836 2.05191 8.89601L4.93616 6.02455C6.32997 4.63692 8.57982 4.64693 9.96133 6.04691Z"
+        fill={'currentColor'}
+      />
+    </svg>
+  );
+};
+
+Link.displayName = 'Link';
+Link.isGlyph = true;
+Link.propTypes = {
+  fill: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  className: PropTypes.string,
+};
+export default Link;

package/src/generated/SplitHorizontal.tsx

@@ -0,0 +1,68 @@
+/**
+ * This is a generated file. Do not modify it manually.
+ *
+ * @script ./node_modules/.bin/ts-node packages/icon/scripts/build.ts
+ * @checksum 2c768ee9d240f606adf8b249a1df9bfd
+ */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { css, cx } from '@leafygreen-ui/emotion';
+import { generateAccessibleProps, sizeMap } from '../glyphCommon';
+import { LGGlyph } from '../types';
+export interface SplitHorizontalProps extends LGGlyph.ComponentProps {}
+
+const SplitHorizontal = ({
+  className,
+  size = 16,
+  title,
+  ['aria-label']: ariaLabel,
+  ['aria-labelledby']: ariaLabelledby,
+  fill,
+  role = 'img',
+  ...props
+}: SplitHorizontalProps) => {
+  const fillStyle = css`
+    color: ${fill};
+  `;
+  const noFlexShrink = css`
+    flex-shrink: 0;
+  `;
+  const accessibleProps = generateAccessibleProps(role, 'SplitHorizontal', {
+    title,
+    ['aria-label']: ariaLabel,
+    ['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="M15 11C15 12.1046 14.1046 13 13 13L3 13C1.89543 13 1 12.1046 1 11L1 3C1 1.89543 1.89543 1 3 1L13 1C14.1046 1 15 1.89543 15 3L15 11ZM13 6.5L13 3L3 3L3 6.5L13 6.5ZM3 7.5L3 11L13 11L13 7.5L3 7.5Z"
+        fill={'currentColor'}
+      />
+    </svg>
+  );
+};
+
+SplitHorizontal.displayName = 'SplitHorizontal';
+SplitHorizontal.isGlyph = true;
+SplitHorizontal.propTypes = {
+  fill: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  className: PropTypes.string,
+};
+export default SplitHorizontal;