@digigov/react-icons 1.2.0-dcbd7ded → 2.0.0-0138f8bd

package/src/IconBase/index.tsx

@@ -0,0 +1,258 @@
+import React from 'react';
+import clsx from 'clsx';
+
+interface AsProp<C extends React.ElementType> {
+  as?: C;
+}
+
+type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
+
+// This is the first reusable type utility we built
+type PolymorphicComponentProp<
+  C extends React.ElementType,
+  Props = Record<string, unknown>,
+> = React.PropsWithChildren<Props & AsProp<C>> &
+  Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
+
+// This is a new type utility with ref!
+type PolymorphicComponentPropWithRef<
+  C extends React.ElementType,
+  Props = Record<string, unknown>,
+> = PolymorphicComponentProp<C, Props> & { ref?: any };
+
+// This is the type for the "ref" only
+type PolymorphicRef<C extends React.ElementType> =
+  React.ComponentPropsWithRef<C>['ref'];
+
+/**
+ * This is the updated component props using PolymorphicComponentPropWithRef
+ */
+export type IconBaseProps<C extends React.ElementType> =
+  PolymorphicComponentPropWithRef<
+    C,
+    {
+      /** margin is optional. It has not a default value. */
+      margin?: spacingValues;
+      /** marginTop is optional. It has not a default value. */
+      marginTop?: spacingValues;
+      /** marginBottom is optional. It has not a default value. */
+      marginBottom?: spacingValues;
+      /** marginLeft is optional. It has not a default value. */
+      marginLeft?: spacingValues;
+      /** marginRight is optional. It has not a default value. */
+      marginRight?: spacingValues;
+      /** Alternative for margin. Margin is optional. It has not a default value. */
+      m?: spacingValues;
+      /** Alternative for marginTop. MarginTop is optional. It has not a default value. */
+      mt?: spacingValues;
+      /** Alternative for marginBottom. MarginBottom is optional. It has not a default value. */
+      mb?: spacingValues;
+      /** Alternative for marginLeft. MarginLeft is optional. It has not a default value. */
+      ml?: spacingValues;
+      /** Alternative for marginRight. MarginRight is optional. It has not a default value. */
+      mr?: spacingValues;
+      /** Alternative for marginX. MarginX is optional. It has not a default value. */
+      mx?: spacingValues;
+      /** Alternative for marginY. MarginY is optional. It has not a default value. */
+      my?: spacingValues;
+      /** padding is optional. It has not a default value. */
+      padding?: spacingValues;
+      /** paddingTop is optional. It has not a default value. */
+      paddingTop?: spacingValues;
+      /** paddingBottom is optional. It has not a default value. */
+      paddingBottom?: spacingValues;
+      /** paddingLeft is optional. It has not a default value. */
+      paddingLeft?: spacingValues;
+      /** paddingRight is optional. It has not a default value. */
+      paddingRight?: spacingValues;
+      /** Alternative for padding. Padding is optional. It has not a default value. */
+      p?: spacingValues;
+      /** Alternative for paddingTop. PaddingTop is optional. It has not a default value. */
+      pt?: spacingValues;
+      /** Alternative for paddingBottom. PaddingBottom is optional. It has not a default value. */
+      pb?: spacingValues;
+      /** Alternative for paddingLeft. PaddingLeft is optional. It has not a default value. */
+      pl?: spacingValues;
+      /** Alternative for paddingRight. PaddingRight is optional. It has not a default value. */
+      pr?: spacingValues;
+      /** Alternative for paddingX. PaddingX is optional. It has not a default value. */
+      px?: spacingValues;
+      /** Alternative for paddingY. PaddingY is optional. It has not a default value. */
+      py?: spacingValues;
+      /**  printHidden is optional. Default value is false. When true, the component is hidden at print. */
+      printHidden?: boolean;
+      /**  printVisible is optional. When block, the component is displayed as block. When inline, the component is displayed as inline.*/
+      printVisible?: 'block' | 'inline';
+      /** Components will be hidden at all screen sizes. */
+      hidden?: boolean;
+      /** Components will be hidden from 'xs' screen size and up. */
+      xsUpHidden?: boolean;
+      /** Components will be hidden from 'sm' screen size and up. */
+      smUpHidden?: boolean;
+      /** Components will be hidden from 'md' screen size and up. */
+      mdUpHidden?: boolean;
+      /** Components will be hidden from 'lg' screen size and up. */
+      lgUpHidden?: boolean;
+      /** Components will be hidden from 'xl' screen size and up. */
+      xlUpHidden?: boolean;
+      /** Components will be hidden between xs and sm screen size. */
+      xsHidden?: boolean;
+      /** Components will be hidden between sm and md screen size. */
+      smHidden?: boolean;
+      /** Components will be hidden between md and lg screen size. */
+      mdHidden?: boolean;
+      /** Components will be hidden between lg and xl screen size. */
+      lgHidden?: boolean;
+      /** Components will be hidden between xl and 2xl screen size. */
+      xlHidden?: boolean;
+    }
+  >;
+
+type spacingValues =
+  | 0
+  | 0.5
+  | 1
+  | 1.5
+  | 2
+  | 2.5
+  | 3
+  | 3.5
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
+  | 14
+  | 16
+  | 20
+  | 24
+  | 28
+  | 32
+  | 36
+  | 40
+  | 44
+  | 48
+  | 52
+  | 56
+  | 60
+  | 64
+  | 72
+  | 80
+  | 96;
+
+/**
+ * This is the type used in the type annotation for the component
+ */
+type IconBaseComponent = <C extends React.ElementType = 'span'>(
+  props: IconBaseProps<C>
+) => React.ReactNode | null;
+
+export const IconBase: IconBaseComponent = React.forwardRef(function Base<
+  C extends React.ElementType,
+>(
+  {
+    as,
+    margin,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    m,
+    mt,
+    mb,
+    ml,
+    mr,
+    mx,
+    my,
+    padding,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    p,
+    pt,
+    pb,
+    pr,
+    pl,
+    px,
+    py,
+    printHidden,
+    printVisible,
+    hidden,
+    xsUpHidden,
+    smUpHidden,
+    mdUpHidden,
+    lgUpHidden,
+    xlUpHidden,
+    xsHidden,
+    smHidden,
+    mdHidden,
+    lgHidden,
+    xlHidden,
+    children,
+    className,
+    ...props
+  }: IconBaseProps<C>,
+  ref?: PolymorphicRef<C>
+) {
+  const Component = as || 'span';
+
+  return (
+    <Component
+      as={as}
+      className={clsx(className, {
+        [`ds-m-${margin}`]: margin !== undefined ? true : undefined,
+        [`ds-mt-${marginTop}`]: marginTop !== undefined ? true : undefined,
+        [`ds-mb-${marginBottom}`]:
+          marginBottom !== undefined ? true : undefined,
+        [`ds-mr-${marginRight}`]: marginRight !== undefined ? true : undefined,
+        [`ds-ml-${marginLeft}`]: marginLeft !== undefined ? true : undefined,
+        [`ds-m-${m}`]: m !== undefined ? true : undefined,
+        [`ds-mt-${mt}`]: mt !== undefined ? true : undefined,
+        [`ds-mb-${mb}`]: mb !== undefined ? true : undefined,
+        [`ds-mr-${mr}`]: mr !== undefined ? true : undefined,
+        [`ds-ml-${ml}`]: ml !== undefined ? true : undefined,
+        [`ds-mx-${mx}`]: mx !== undefined ? true : undefined,
+        [`ds-my-${my}`]: my !== undefined ? true : undefined,
+        [`ds-p-${padding}`]: padding !== undefined ? true : undefined,
+        [`ds-pt-${paddingTop}`]: paddingTop !== undefined ? true : undefined,
+        [`ds-pb-${paddingBottom}`]:
+          paddingBottom !== undefined ? true : undefined,
+        [`ds-pr-${paddingRight}`]:
+          paddingRight !== undefined ? true : undefined,
+        [`ds-pl-${paddingLeft}`]: paddingLeft !== undefined ? true : undefined,
+        [`ds-p-${p}`]: p !== undefined ? true : undefined,
+        [`ds-pt-${pt}`]: pt !== undefined ? true : undefined,
+        [`ds-pb-${pb}`]: pb !== undefined ? true : undefined,
+        [`ds-pr-${pr}`]: pr !== undefined ? true : undefined,
+        [`ds-pl-${pl}`]: pl !== undefined ? true : undefined,
+        [`ds-px-${px}`]: px !== undefined ? true : undefined,
+        [`ds-py-${py}`]: py !== undefined ? true : undefined,
+        'ds-print-hidden': !!printHidden,
+        'ds-print-visible-block': printVisible === 'block',
+        'ds-print-visible-inline': printVisible === 'inline',
+        'ds-hidden': !!hidden,
+        'ds-hidden-xs-up': !!xsUpHidden,
+        'ds-hidden-sm-up': !!smUpHidden,
+        'ds-hidden-md-up': !!mdUpHidden,
+        'ds-hidden-lg-up': !!lgUpHidden,
+        'ds-hidden-xl-up': !!xlUpHidden,
+        'ds-hidden-xs': !!xsHidden,
+        'ds-hidden-sm': !!smHidden,
+        'ds-hidden-md': !!mdHidden,
+        'ds-hidden-lg': !!lgHidden,
+        'ds-hidden-xl': !!xlHidden,
+      })}
+      ref={ref}
+      {...props}
+    >
+      {children}
+    </Component>
+  );
+});
+
+export default IconBase;

package/src/LockIcon/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,141 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renders the LockIcon with no props 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon--lock ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <path
+        as="path"
+        class=""
+        d="M17.872,9v-1.128c0-3.238-2.635-5.872-5.872-5.872s-5.872,2.634-5.872,5.872v1.128h-2.128v13h16v-13h-2.128ZM9.429,7.872c0-1.418,1.153-2.572,2.571-2.572s2.571,1.154,2.571,2.572v1.128h-5.143v-1.128ZM13.65,16c0,.911-.739,1.65-1.65,1.65s-1.65-.739-1.65-1.65v-2c0-.911.739-1.65,1.65-1.65s1.65.739,1.65,1.65v2Z"
+      />
+    </svg>
+  </div>
+</body>
+`;
+
+exports[`renders the LockIcon with prop color=error and size= xl 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon--lock ds-svg-icon ds-svg-icon--warning ds-svg-icon--xl"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <path
+        as="path"
+        class=""
+        d="M17.872,9v-1.128c0-3.238-2.635-5.872-5.872-5.872s-5.872,2.634-5.872,5.872v1.128h-2.128v13h16v-13h-2.128ZM9.429,7.872c0-1.418,1.153-2.572,2.571-2.572s2.571,1.154,2.571,2.572v1.128h-5.143v-1.128ZM13.65,16c0,.911-.739,1.65-1.65,1.65s-1.65-.739-1.65-1.65v-2c0-.911.739-1.65,1.65-1.65s1.65.739,1.65,1.65v2Z"
+      />
+    </svg>
+  </div>
+</body>
+`;
+
+exports[`renders the LockIcon with prop color=warning 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon--lock ds-svg-icon ds-svg-icon--warning"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <path
+        as="path"
+        class=""
+        d="M17.872,9v-1.128c0-3.238-2.635-5.872-5.872-5.872s-5.872,2.634-5.872,5.872v1.128h-2.128v13h16v-13h-2.128ZM9.429,7.872c0-1.418,1.153-2.572,2.571-2.572s2.571,1.154,2.571,2.572v1.128h-5.143v-1.128ZM13.65,16c0,.911-.739,1.65-1.65,1.65s-1.65-.739-1.65-1.65v-2c0-.911.739-1.65,1.65-1.65s1.65.739,1.65,1.65v2Z"
+      />
+    </svg>
+  </div>
+</body>
+`;
+
+exports[`renders the LockIcon with prop color=warning and size=sm 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon--lock ds-svg-icon ds-svg-icon--warning ds-svg-icon--sm"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <path
+        as="path"
+        class=""
+        d="M17.872,9v-1.128c0-3.238-2.635-5.872-5.872-5.872s-5.872,2.634-5.872,5.872v1.128h-2.128v13h16v-13h-2.128ZM9.429,7.872c0-1.418,1.153-2.572,2.571-2.572s2.571,1.154,2.571,2.572v1.128h-5.143v-1.128ZM13.65,16c0,.911-.739,1.65-1.65,1.65s-1.65-.739-1.65-1.65v-2c0-.911.739-1.65,1.65-1.65s1.65.739,1.65,1.65v2Z"
+      />
+    </svg>
+  </div>
+</body>
+`;
+
+exports[`renders the LockIcon with prop color=white 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon--lock ds-svg-icon ds-svg-icon--white"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <path
+        as="path"
+        class=""
+        d="M17.872,9v-1.128c0-3.238-2.635-5.872-5.872-5.872s-5.872,2.634-5.872,5.872v1.128h-2.128v13h16v-13h-2.128ZM9.429,7.872c0-1.418,1.153-2.572,2.571-2.572s2.571,1.154,2.571,2.572v1.128h-5.143v-1.128ZM13.65,16c0,.911-.739,1.65-1.65,1.65s-1.65-.739-1.65-1.65v-2c0-.911.739-1.65,1.65-1.65s1.65.739,1.65,1.65v2Z"
+      />
+    </svg>
+  </div>
+</body>
+`;
+
+exports[`renders the LockIcon with prop size=md 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon--lock ds-svg-icon ds-svg-icon--md"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <path
+        as="path"
+        class=""
+        d="M17.872,9v-1.128c0-3.238-2.635-5.872-5.872-5.872s-5.872,2.634-5.872,5.872v1.128h-2.128v13h16v-13h-2.128ZM9.429,7.872c0-1.418,1.153-2.572,2.571-2.572s2.571,1.154,2.571,2.572v1.128h-5.143v-1.128ZM13.65,16c0,.911-.739,1.65-1.65,1.65s-1.65-.739-1.65-1.65v-2c0-.911.739-1.65,1.65-1.65s1.65.739,1.65,1.65v2Z"
+      />
+    </svg>
+  </div>
+</body>
+`;
+
+exports[`renders the LockIcon with prop size=xl 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon--lock ds-svg-icon ds-svg-icon--xl"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <path
+        as="path"
+        class=""
+        d="M17.872,9v-1.128c0-3.238-2.635-5.872-5.872-5.872s-5.872,2.634-5.872,5.872v1.128h-2.128v13h16v-13h-2.128ZM9.429,7.872c0-1.418,1.153-2.572,2.571-2.572s2.571,1.154,2.571,2.572v1.128h-5.143v-1.128ZM13.65,16c0,.911-.739,1.65-1.65,1.65s-1.65-.739-1.65-1.65v-2c0-.911.739-1.65,1.65-1.65s1.65.739,1.65,1.65v2Z"
+      />
+    </svg>
+  </div>
+</body>
+`;

package/src/LockIcon/config.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import IconBase from '@digigov/react-icons/IconBase';
+
+export interface LockType {}
+
+export function lock(): React.ReactElement<any> {
+  return (
+    <>
+      <IconBase
+        as="path"
+        d="M17.872,9v-1.128c0-3.238-2.635-5.872-5.872-5.872s-5.872,2.634-5.872,5.872v1.128h-2.128v13h16v-13h-2.128ZM9.429,7.872c0-1.418,1.153-2.572,2.571-2.572s2.571,1.154,2.571,2.572v1.128h-5.143v-1.128ZM13.65,16c0,.911-.739,1.65-1.65,1.65s-1.65-.739-1.65-1.65v-2c0-.911.739-1.65,1.65-1.65s1.65.739,1.65,1.65v2Z"
+      />
+    </>
+  );
+}
+
+lock.props = [];
+
+export default lock;

package/src/LockIcon/index.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import LockIcon from '@digigov/react-icons/LockIcon';
+
+it('renders the LockIcon with no props', () => {
+  expect(render(<LockIcon />).baseElement).toMatchSnapshot();
+});
+it('renders the LockIcon with prop size=md', () => {
+  expect(render(<LockIcon size="md" />).baseElement).toMatchSnapshot();
+});
+it('renders the LockIcon with prop size=xl', () => {
+  expect(render(<LockIcon size="xl" />).baseElement).toMatchSnapshot();
+});
+it('renders the LockIcon with prop color=white', () => {
+  expect(render(<LockIcon color="white" />).baseElement).toMatchSnapshot();
+});
+it('renders the LockIcon with prop color=warning', () => {
+  expect(render(<LockIcon color="warning" />).baseElement).toMatchSnapshot();
+});
+it('renders the LockIcon with prop color=warning and size=sm', () => {
+  expect(
+    render(<LockIcon color="warning" size="sm" />).baseElement
+  ).toMatchSnapshot();
+});
+it('renders the LockIcon with prop color=error and size= xl', () => {
+  expect(
+    render(<LockIcon color="warning" size="xl" />).baseElement
+  ).toMatchSnapshot();
+});

package/src/LockIcon/index.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import Icon, { IconProps } from '@digigov/react-icons/Icon';
+
+export const LockIcon: React.FC<IconProps<'lock'>> = (props) => {
+  return <Icon {...props} icon="lock"></Icon>;
+};
+
+export default LockIcon;

package/src/LoginIcon/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,176 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renders the LoginIcon with no props 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon--login ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <polygon
+        as="polygon"
+        class=""
+        points="10.419 6.081 8.581 7.919 11.361 10.7 2 10.7 2 13.3 11.361 13.3 8.581 16.081 10.419 17.919 16.339 12 10.419 6.081"
+      />
+      <polygon
+        as="polygon"
+        class=""
+        points="19.4 2 15 2 15 4.6 19.4 4.6 19.4 19.4 15 19.4 15 22 19.4 22 22 22 22 19.4 22 4.6 22 2 19.4 2"
+      />
+    </svg>
+  </div>
+</body>
+`;
+
+exports[`renders the LoginIcon with prop color=error and size= xl 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon--login ds-svg-icon ds-svg-icon--warning ds-svg-icon--xl"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <polygon
+        as="polygon"
+        class=""
+        points="10.419 6.081 8.581 7.919 11.361 10.7 2 10.7 2 13.3 11.361 13.3 8.581 16.081 10.419 17.919 16.339 12 10.419 6.081"
+      />
+      <polygon
+        as="polygon"
+        class=""
+        points="19.4 2 15 2 15 4.6 19.4 4.6 19.4 19.4 15 19.4 15 22 19.4 22 22 22 22 19.4 22 4.6 22 2 19.4 2"
+      />
+    </svg>
+  </div>
+</body>
+`;
+
+exports[`renders the LoginIcon with prop color=warning 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon--login ds-svg-icon ds-svg-icon--warning"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <polygon
+        as="polygon"
+        class=""
+        points="10.419 6.081 8.581 7.919 11.361 10.7 2 10.7 2 13.3 11.361 13.3 8.581 16.081 10.419 17.919 16.339 12 10.419 6.081"
+      />
+      <polygon
+        as="polygon"
+        class=""
+        points="19.4 2 15 2 15 4.6 19.4 4.6 19.4 19.4 15 19.4 15 22 19.4 22 22 22 22 19.4 22 4.6 22 2 19.4 2"
+      />
+    </svg>
+  </div>
+</body>
+`;
+
+exports[`renders the LoginIcon with prop color=warning and size=s 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon--login ds-svg-icon ds-svg-icon--warning ds-svg-icon--sm"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <polygon
+        as="polygon"
+        class=""
+        points="10.419 6.081 8.581 7.919 11.361 10.7 2 10.7 2 13.3 11.361 13.3 8.581 16.081 10.419 17.919 16.339 12 10.419 6.081"
+      />
+      <polygon
+        as="polygon"
+        class=""
+        points="19.4 2 15 2 15 4.6 19.4 4.6 19.4 19.4 15 19.4 15 22 19.4 22 22 22 22 19.4 22 4.6 22 2 19.4 2"
+      />
+    </svg>
+  </div>
+</body>
+`;
+
+exports[`renders the LoginIcon with prop color=white 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon--login ds-svg-icon ds-svg-icon--white"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <polygon
+        as="polygon"
+        class=""
+        points="10.419 6.081 8.581 7.919 11.361 10.7 2 10.7 2 13.3 11.361 13.3 8.581 16.081 10.419 17.919 16.339 12 10.419 6.081"
+      />
+      <polygon
+        as="polygon"
+        class=""
+        points="19.4 2 15 2 15 4.6 19.4 4.6 19.4 19.4 15 19.4 15 22 19.4 22 22 22 22 19.4 22 4.6 22 2 19.4 2"
+      />
+    </svg>
+  </div>
+</body>
+`;
+
+exports[`renders the LoginIcon with prop size=md 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon--login ds-svg-icon ds-svg-icon--md"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <polygon
+        as="polygon"
+        class=""
+        points="10.419 6.081 8.581 7.919 11.361 10.7 2 10.7 2 13.3 11.361 13.3 8.581 16.081 10.419 17.919 16.339 12 10.419 6.081"
+      />
+      <polygon
+        as="polygon"
+        class=""
+        points="19.4 2 15 2 15 4.6 19.4 4.6 19.4 19.4 15 19.4 15 22 19.4 22 22 22 22 19.4 22 4.6 22 2 19.4 2"
+      />
+    </svg>
+  </div>
+</body>
+`;
+
+exports[`renders the LoginIcon with prop size=xl 1`] = `
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon--login ds-svg-icon ds-svg-icon--xl"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <polygon
+        as="polygon"
+        class=""
+        points="10.419 6.081 8.581 7.919 11.361 10.7 2 10.7 2 13.3 11.361 13.3 8.581 16.081 10.419 17.919 16.339 12 10.419 6.081"
+      />
+      <polygon
+        as="polygon"
+        class=""
+        points="19.4 2 15 2 15 4.6 19.4 4.6 19.4 19.4 15 19.4 15 22 19.4 22 22 22 22 19.4 22 4.6 22 2 19.4 2"
+      />
+    </svg>
+  </div>
+</body>
+`;

package/src/LoginIcon/config.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import IconBase from '@digigov/react-icons/IconBase';
+
+export interface LoginType {}
+
+export function login(): React.ReactElement<any> {
+  return (
+    <>
+      <IconBase
+        as="polygon"
+        points="10.419 6.081 8.581 7.919 11.361 10.7 2 10.7 2 13.3 11.361 13.3 8.581 16.081 10.419 17.919 16.339 12 10.419 6.081"
+      />
+      <IconBase
+        as="polygon"
+        points="19.4 2 15 2 15 4.6 19.4 4.6 19.4 19.4 15 19.4 15 22 19.4 22 22 22 22 19.4 22 4.6 22 2 19.4 2"
+      />
+    </>
+  );
+}
+
+login.props = [];
+
+export default login;

package/src/LoginIcon/index.test.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import LoginIcon from '@digigov/react-icons/LoginIcon';
+
+it('renders the LoginIcon with no props', () => {
+  expect(render(<LoginIcon />).baseElement).toMatchSnapshot();
+});
+it('renders the LoginIcon with prop size=md', () => {
+  expect(render(<LoginIcon size="md" />).baseElement).toMatchSnapshot();
+});
+it('renders the LoginIcon with prop size=xl', () => {
+  expect(render(<LoginIcon size="xl" />).baseElement).toMatchSnapshot();
+});
+it('renders the LoginIcon with prop color=white', () => {
+  expect(render(<LoginIcon color="white" />).baseElement).toMatchSnapshot();
+});
+it('renders the LoginIcon with prop color=warning', () => {
+  expect(render(<LoginIcon color="warning" />).baseElement).toMatchSnapshot();
+});
+it('renders the LoginIcon with prop color=warning and size=s', () => {
+  expect(
+    render(<LoginIcon color="warning" size="sm" />).baseElement
+  ).toMatchSnapshot();
+});
+it('renders the LoginIcon with prop color=error and size= xl', () => {
+  expect(
+    render(<LoginIcon color="warning" size="xl" />).baseElement
+  ).toMatchSnapshot();
+});