@leafygreen-ui/icon 11.7.0 → 11.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leafygreen-ui/icon",
-  "version": "11.7.0",
+  "version": "11.10.0",
   "description": "LeafyGreen UI Kit Icons",
   "main": "./dist/index.js",
   "module": "./dist/esm/index.js",
@@ -24,7 +24,15 @@
     "xml2json": "^0.11.2"
   },
   "dependencies": {
-    "@leafygreen-ui/lib": "^9.0.1"
+    "@leafygreen-ui/lib": "^9.2.0"
   },
-  "gitHead": "dd71a2d404218ccec2e657df9c0263dc1c15b9e0"
-}
+  "gitHead": "dd71a2d404218ccec2e657df9c0263dc1c15b9e0",
+  "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/packages/icon",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mongodb/leafygreen-ui"
+  },
+  "bugs": {
+    "url": "https://jira.mongodb.org/projects/PD/summary"
+  }
+}

package/scripts/build.ts

@@ -8,7 +8,7 @@ const { CLIEngine } = require('eslint');
 const meow = require('meow');
 const prettier = require('prettier');
 
-const template = require('../src/template');
+const template = require('./template');
 
 const cli = meow(
   `

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

@@ -10,6 +10,8 @@ import { SVGR } from './types';
 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));
@@ -31,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 () => {
@@ -85,58 +131,119 @@ describe('packages/Icon/glyphs/', () => {
   });
 });
 
-const text = 'Hello world';
+describe('packages/Icon/createGlyphComponent', () => {
+  const GlyphComponent = createGlyphComponent(
+    'MyTestSVGRGlyph',
+    MyTestSVGRGlyph,
+  );
 
-// eslint-disable-next-line react/display-name
-const MyGlyph: SVGR.Component = () => <div>{text}</div>;
+  test('returns a LGGlyph component', () => {
+    expect(typeof GlyphComponent).toBe('function');
+    expect(isComponentGlyph(GlyphComponent)).toBeTruthy();
+  });
 
-describe('packages/Icon/createGlyphComponent createGlyphComponent()', () => {
-  const GlyphComponent = createGlyphComponent('MyGlyph', MyGlyph);
+  test('returned component has correct display name', () => {
+    expect(GlyphComponent.displayName).toBe('MyTestSVGRGlyph');
+  });
 
-  test('createGlyphComponent returns a function', () => {
-    expect(typeof GlyphComponent).toBe('function');
+  test('returned component has the property `isGlyph`', () => {
+    expect(GlyphComponent).toHaveProperty('isGlyph');
+    expect(GlyphComponent.isGlyph).toBeTruthy();
   });
 
-  test('The function returned by createGlyphComponent has the displayName: "MyGlyph"', () => {
-    expect(GlyphComponent.displayName).toBe('MyGlyph');
+  test('returned function passes `isComponentGlyph`', () => {
+    expect(isComponentGlyph(GlyphComponent)).toBeTruthy();
   });
 
-  const { container } = render(<GlyphComponent />);
-  const glyph = container.firstChild;
+  test('returned function renders the glyph specified', () => {
+    const { getByTestId } = render(<GlyphComponent />);
+    const glyph = getByTestId('my-glyph');
 
-  test('The function returned by createGlyphComponent renders the glyph specified', () => {
     if (!typeIs.element(glyph)) {
       throw new Error('Glyph was not rendered');
     }
+    expect(glyph.nodeName.toLowerCase()).toBe('svg');
+  });
+
+  describe('returned funcion passes through props', () => {
+    test('`size` prop as number', () => {
+      const { getByTestId } = render(<GlyphComponent size={20} />);
+      const glyph = getByTestId('my-glyph');
+      expect(glyph).toHaveAttribute('height', '20');
+      expect(glyph).toHaveAttribute('width', '20');
+    });
+
+    test('`size` prop as Size', () => {
+      const { getByTestId } = render(<GlyphComponent size={Size.Large} />);
+      const glyph = getByTestId('my-glyph');
+      expect(glyph).toHaveAttribute('height', '20');
+      expect(glyph).toHaveAttribute('width', '20');
+    });
 
-    expect(glyph.nodeName.toLowerCase()).toBe('div');
-    expect(glyph.textContent).toBe(text);
+    test('`role`', () => {
+      const { getByTestId } = render(<GlyphComponent role="presentation" />);
+      const glyph = getByTestId('my-glyph');
+      expect(glyph).toHaveAttribute('role', 'presentation');
+    });
   });
 });
 
-const customGlyphs = { MyGlyph };
-
 describe('packages/Icon/createIconComponent', () => {
-  const IconComponent = createIconComponent(customGlyphs);
+  const IconComponent = createIconComponent(customTestGlyphs);
 
-  test('createIconComponent returns a function', () => {
+  test('returns a function', () => {
     expect(typeof IconComponent).toBe('function');
   });
 
-  test('The function returned by createIconComponent has the displayName: "Icon"', () => {
+  test('returned function has the displayName: "Icon"', () => {
     expect(IconComponent.displayName).toBe('Icon');
   });
 
-  const renderedIcon = render(<IconComponent glyph="MyGlyph" />);
-  const glyph = renderedIcon.container.firstChild;
+  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="MyTestSVGRGlyph" />);
+    const glyph = getByTestId('my-glyph');
 
-  test('The function returned by createIconComponent renders the glyph specified', () => {
     if (!typeIs.element(glyph)) {
       throw new Error('Glyph was not rendered');
     }
+    expect(glyph.nodeName.toLowerCase()).toBe('svg');
+  });
+
+  describe('returned funcion passes through props', () => {
+    test('`size` prop as number', () => {
+      const { getByTestId } = render(
+        <IconComponent glyph="MyTestSVGRGlyph" size={20} />,
+      );
+      const glyph = getByTestId('my-glyph');
+      expect(glyph).toHaveAttribute('height', '20');
+      expect(glyph).toHaveAttribute('width', '20');
+    });
 
-    expect(glyph.nodeName.toLowerCase()).toBe('div');
-    expect(glyph.textContent).toBe(text);
+    test('`size` prop as Size', () => {
+      const { getByTestId } = render(
+        <IconComponent glyph="MyTestSVGRGlyph" size={Size.Large} />,
+      );
+      const glyph = getByTestId('my-glyph');
+      expect(glyph).toHaveAttribute('height', '20');
+      expect(glyph).toHaveAttribute('width', '20');
+    });
+
+    test('`role`', () => {
+      const { getByTestId } = render(
+        <IconComponent glyph="MyTestSVGRGlyph" role="presentation" />,
+      );
+      const glyph = getByTestId('my-glyph');
+      expect(glyph).toHaveAttribute('role', 'presentation');
+    });
   });
 });
 
@@ -180,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: 'Packages/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

@@ -4,11 +4,18 @@ import { SVGR, LGGlyph } from './types';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { generateAccessibleProps, sizeMap, Size } from './glyphCommon';
 
+/**
+ * Returns a single glyph component.
+ * Process custom glyphs to ensure consistent behavior between custom and built-in icons
+ * @param glyphName: string - the display name of the icon
+ * @param Glyph: SVGR.Component - the SVG icon component
+ * @returns LGGlyph.Component
+ */
 export default function createGlyphComponent(
   glyphName: string,
   Glyph: SVGR.Component,
 ): LGGlyph.Component {
-  function GlyphComponent({
+  const GlyphComponent: LGGlyph.Component = ({
     className,
     size = Size.Default,
     fill,
@@ -17,7 +24,7 @@ export default function createGlyphComponent(
     'aria-label': ariaLabel,
     role = 'img',
     ...rest
-  }: LGGlyph.ComponentProps) {
+  }: LGGlyph.ComponentProps) => {
     const fillStyle = css`
       color: ${fill};
     `;
@@ -49,7 +56,7 @@ export default function createGlyphComponent(
         {...rest}
       />
     );
-  }
+  };
 
   GlyphComponent.displayName = glyphName;
 

package/src/createIconComponent.tsx

@@ -11,17 +11,24 @@ export interface IconProps extends Omit<LGGlyph.ComponentProps, 'size'> {
 
 type GlyphObject = Record<string, LGGlyph.Component>;
 
+/**
+ * Returns a single component with a `glyph` prop to select the glyph
+ * @param glyphs The set of glyphs
+ * @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/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;