@leafygreen-ui/icon 11.6.1 → 11.9.0

package/src/Icon.spec.tsx

@@ -10,6 +10,7 @@ import { SVGR } from './types';
 import { createIconComponent, glyphs } from '.';
 import createGlyphComponent from './createGlyphComponent';
 import EditIcon from '@leafygreen-ui/icon/dist/Edit';
+import { Size } from './glyphCommon';
 
 function getBaseName(filePath: string): string {
   return path.basename(filePath, path.extname(filePath));
@@ -85,58 +86,105 @@ describe('packages/Icon/glyphs/', () => {
   });
 });
 
-const text = 'Hello world';
+const MyGlyph: SVGR.Component = props => (
+  <svg data-testid="my-glyph" {...props}></svg>
+);
 
-// eslint-disable-next-line react/display-name
-const MyGlyph: SVGR.Component = () => <div>{text}</div>;
-
-describe('packages/Icon/createGlyphComponent createGlyphComponent()', () => {
+describe('packages/Icon/createGlyphComponent', () => {
   const GlyphComponent = createGlyphComponent('MyGlyph', MyGlyph);
 
-  test('createGlyphComponent returns a function', () => {
+  test('returns a function', () => {
     expect(typeof GlyphComponent).toBe('function');
   });
 
-  test('The function returned by createGlyphComponent has the displayName: "MyGlyph"', () => {
+  test('returned function has correct display name', () => {
     expect(GlyphComponent.displayName).toBe('MyGlyph');
   });
 
-  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');
+    });
 
-    expect(glyph.nodeName.toLowerCase()).toBe('div');
-    expect(glyph.textContent).toBe(text);
+    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');
+    });
+
+    test('`role`', () => {
+      const { getByTestId } = render(<GlyphComponent role="presentation" />);
+      const glyph = getByTestId('my-glyph');
+      expect(glyph).toHaveAttribute('role', 'presentation');
+    });
   });
 });
 
-const customGlyphs = { MyGlyph };
+const customGlyphs = {
+  MyGlyph: createGlyphComponent('MyGlyph', MyGlyph),
+};
 
 describe('packages/Icon/createIconComponent', () => {
   const IconComponent = createIconComponent(customGlyphs);
 
-  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 funciton renders the glyph specified', () => {
+    const { getByTestId } = render(<IconComponent glyph="MyGlyph" />);
+    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="MyGlyph" 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="MyGlyph" 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="MyGlyph" role="presentation" />,
+      );
+      const glyph = getByTestId('my-glyph');
+      expect(glyph).toHaveAttribute('role', 'presentation');
+    });
   });
 });
 
@@ -180,14 +228,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

@@ -3,6 +3,7 @@ import Icon, { glyphs, Size } 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';
 
 const containerStyle = css`
   width: 150px;
@@ -20,20 +21,22 @@ const containerStyle = css`
 
 const textStyle = css`
   font-size: 12px;
-  color: #babdbe;
+  color: ${uiColors.gray.base};
   margin-top: 0.5rem;
 `;
 
-storiesOf('Icons', module).add('Icon', () => {
+storiesOf('Packages/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(glyph => (
+        <div key={glyph} className={containerStyle}>
+          <Icon glyph={glyph} fill={fill} size={size} />
+          <div className={textStyle}>{glyph}</div>
+        </div>
+      ))}
+    </>
   );
-
-  return <>{Object.keys(glyphs).map(renderGlyph)}</>;
 });

package/src/createGlyphComponent.tsx

@@ -4,6 +4,13 @@ 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,

package/src/createIconComponent.tsx

@@ -11,8 +11,13 @@ 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];

package/src/generated/Clock.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 867509eef46d330604af7224e7ceb53b
+ */
+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 ClockProps extends LGGlyph.ComponentProps {}
+
+const Clock = ({
+  className,
+  size = 16,
+  title,
+  ['aria-label']: ariaLabel,
+  ['aria-labelledby']: ariaLabelledby,
+  fill,
+  role = 'img',
+  ...props
+}: ClockProps) => {
+  const fillStyle = css`
+    color: ${fill};
+  `;
+  const noFlexShrink = css`
+    flex-shrink: 0;
+  `;
+  const accessibleProps = generateAccessibleProps(role, 'Clock', {
+    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 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14ZM7.25 4.75C7.25 4.33579 7.58579 4 8 4C8.41421 4 8.75 4.33579 8.75 4.75V7.90966L10.4939 9.43556C10.8056 9.70832 10.8372 10.1821 10.5644 10.4939C10.2917 10.8056 9.81786 10.8372 9.50613 10.5644L7.51059 8.81833C7.5014 8.8104 7.4924 8.80226 7.48361 8.79391C7.41388 8.7278 7.35953 8.65117 7.32087 8.56867C7.27541 8.47195 7.25 8.36394 7.25 8.25V4.75Z"
+        fill={'currentColor'}
+      />
+    </svg>
+  );
+};
+
+Clock.displayName = 'Clock';
+Clock.isGlyph = true;
+Clock.propTypes = {
+  fill: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  className: PropTypes.string,
+};
+export default Clock;

package/src/generated/ClockWithArrow.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 5cebdb544bb818697100aa36feb9bd15
+ */
+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 ClockWithArrowProps extends LGGlyph.ComponentProps {}
+
+const ClockWithArrow = ({
+  className,
+  size = 16,
+  title,
+  ['aria-label']: ariaLabel,
+  ['aria-labelledby']: ariaLabelledby,
+  fill,
+  role = 'img',
+  ...props
+}: ClockWithArrowProps) => {
+  const fillStyle = css`
+    color: ${fill};
+  `;
+  const noFlexShrink = css`
+    flex-shrink: 0;
+  `;
+  const accessibleProps = generateAccessibleProps(role, 'ClockWithArrow', {
+    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="M13 8C13 10.7614 10.7614 13 8 13C7.16895 13 6.38526 12.7973 5.69568 12.4385C5.34783 12.2576 4.90944 12.3087 4.65841 12.6099L4.32712 13.0075C4.05174 13.3379 4.1087 13.8355 4.48034 14.0521C5.51438 14.6548 6.71687 15 8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C6.05606 1 4.2972 1.7924 3.02879 3.07181L1.96954 2.14618C1.56206 1.7901 0.931193 2.13127 1.00611 2.66721L1.4606 5.9185C1.50083 6.20624 1.7463 6.4287 2.03684 6.43H5.31972C5.86086 6.43241 6.1144 5.76821 5.70691 5.41212L4.53896 4.3915C5.4373 3.52965 6.65679 3 8 3C10.7614 3 13 5.23858 13 8Z"
+        fill={'currentColor'}
+      />
+      <path
+        d="M7.25 5.25C7.25 4.83579 7.58579 4.5 8 4.5C8.41421 4.5 8.75 4.83579 8.75 5.25V7.91793L10.4294 9.44169C10.7412 9.71445 10.7728 10.1883 10.5 10.5C10.2272 10.8117 9.75342 10.8433 9.44169 10.5706L7.50697 8.81519C7.49904 8.80826 7.49125 8.80117 7.48361 8.79391C7.41388 8.72781 7.35954 8.65118 7.32088 8.56868C7.27541 8.47196 7.25 8.36395 7.25 8.25V5.25Z"
+        fill={'currentColor'}
+      />
+    </svg>
+  );
+};
+
+ClockWithArrow.displayName = 'ClockWithArrow';
+ClockWithArrow.isGlyph = true;
+ClockWithArrow.propTypes = {
+  fill: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  className: PropTypes.string,
+};
+export default ClockWithArrow;

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/Key.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 472b9840b2d10f0876a3c95cb82ae7c1
+ */
+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 KeyProps extends LGGlyph.ComponentProps {}
+
+const Key = ({
+  className,
+  size = 16,
+  title,
+  ['aria-label']: ariaLabel,
+  ['aria-labelledby']: ariaLabelledby,
+  fill,
+  role = 'img',
+  ...props
+}: KeyProps) => {
+  const fillStyle = css`
+    color: ${fill};
+  `;
+  const noFlexShrink = css`
+    flex-shrink: 0;
+  `;
+  const accessibleProps = generateAccessibleProps(role, 'Key', {
+    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="M6 10C6.55427 10 7.08222 9.88726 7.56215 9.68347L8.87868 11L8.43934 11.4393C7.85355 12.0251 7.85355 12.9749 8.43934 13.5607C9.02513 14.1464 9.97487 14.1464 10.5607 13.5607L11 13.1213L11.4393 13.5607C12.0251 14.1464 12.9749 14.1464 13.5607 13.5607C14.1464 12.9749 14.1464 12.0251 13.5607 11.4393L9.68347 7.56215C9.88726 7.08222 10 6.55427 10 6C10 3.79086 8.20914 2 6 2C3.79086 2 2 3.79086 2 6C2 8.20914 3.79086 10 6 10ZM5.25 6.5C5.94036 6.5 6.5 5.94036 6.5 5.25C6.5 4.55964 5.94036 4 5.25 4C4.55964 4 4 4.55964 4 5.25C4 5.94036 4.55964 6.5 5.25 6.5Z"
+        fill={'currentColor'}
+      />
+    </svg>
+  );
+};
+
+Key.displayName = 'Key';
+Key.isGlyph = true;
+Key.propTypes = {
+  fill: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  className: PropTypes.string,
+};
+export default Key;