@digigov/react-icons 2.0.0-rc.8 → 2.0.2

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

@@ -1,262 +1,141 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the LockIcon with no props 1`] = `
-<LockIcon>
-  <ForwardRef(Icon)
-    icon="lock"
-  >
-    <ForwardRef(SvgIcon)
-      className="ds-svg-icon--lock"
+<body>
+  <div>
+    <svg
+      aria-hidden="true"
+      as="svg"
+      class="ds-svg-icon--lock ds-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
     >
-      <ForwardRef(Base)
-        aria-hidden="true"
-        as="svg"
-        className="ds-svg-icon--lock ds-svg-icon"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <svg
-          aria-hidden="true"
-          className="ds-svg-icon--lock ds-svg-icon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <lock>
-            <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>
-        </svg>
-      </ForwardRef(Base)>
-    </ForwardRef(SvgIcon)>
-  </ForwardRef(Icon)>
-</LockIcon>
+      <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`] = `
-<LockIcon
-  color="warning"
-  size="xl"
->
-  <ForwardRef(Icon)
-    color="warning"
-    icon="lock"
-    size="xl"
-  >
-    <ForwardRef(SvgIcon)
-      className="ds-svg-icon--lock"
-      color="warning"
-      size="xl"
+<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"
     >
-      <ForwardRef(Base)
-        aria-hidden="true"
-        as="svg"
-        className="ds-svg-icon--lock ds-svg-icon--warning ds-svg-icon--xl ds-svg-icon"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <svg
-          aria-hidden="true"
-          className="ds-svg-icon--lock ds-svg-icon--warning ds-svg-icon--xl ds-svg-icon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <lock>
-            <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>
-        </svg>
-      </ForwardRef(Base)>
-    </ForwardRef(SvgIcon)>
-  </ForwardRef(Icon)>
-</LockIcon>
+      <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`] = `
-<LockIcon
-  color="warning"
->
-  <ForwardRef(Icon)
-    color="warning"
-    icon="lock"
-  >
-    <ForwardRef(SvgIcon)
-      className="ds-svg-icon--lock"
-      color="warning"
+<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"
     >
-      <ForwardRef(Base)
-        aria-hidden="true"
-        as="svg"
-        className="ds-svg-icon--lock ds-svg-icon--warning ds-svg-icon"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <svg
-          aria-hidden="true"
-          className="ds-svg-icon--lock ds-svg-icon--warning ds-svg-icon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <lock>
-            <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>
-        </svg>
-      </ForwardRef(Base)>
-    </ForwardRef(SvgIcon)>
-  </ForwardRef(Icon)>
-</LockIcon>
+      <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`] = `
-<LockIcon
-  color="warning"
-  size="sm"
->
-  <ForwardRef(Icon)
-    color="warning"
-    icon="lock"
-    size="sm"
-  >
-    <ForwardRef(SvgIcon)
-      className="ds-svg-icon--lock"
-      color="warning"
-      size="sm"
+<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"
     >
-      <ForwardRef(Base)
-        aria-hidden="true"
-        as="svg"
-        className="ds-svg-icon--lock ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <svg
-          aria-hidden="true"
-          className="ds-svg-icon--lock ds-svg-icon--warning ds-svg-icon--sm ds-svg-icon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <lock>
-            <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>
-        </svg>
-      </ForwardRef(Base)>
-    </ForwardRef(SvgIcon)>
-  </ForwardRef(Icon)>
-</LockIcon>
+      <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`] = `
-<LockIcon
-  color="white"
->
-  <ForwardRef(Icon)
-    color="white"
-    icon="lock"
-  >
-    <ForwardRef(SvgIcon)
-      className="ds-svg-icon--lock"
-      color="white"
+<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"
     >
-      <ForwardRef(Base)
-        aria-hidden="true"
-        as="svg"
-        className="ds-svg-icon--lock ds-svg-icon--white ds-svg-icon"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <svg
-          aria-hidden="true"
-          className="ds-svg-icon--lock ds-svg-icon--white ds-svg-icon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <lock>
-            <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>
-        </svg>
-      </ForwardRef(Base)>
-    </ForwardRef(SvgIcon)>
-  </ForwardRef(Icon)>
-</LockIcon>
+      <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`] = `
-<LockIcon
-  size="md"
->
-  <ForwardRef(Icon)
-    icon="lock"
-    size="md"
-  >
-    <ForwardRef(SvgIcon)
-      className="ds-svg-icon--lock"
-      size="md"
+<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"
     >
-      <ForwardRef(Base)
-        aria-hidden="true"
-        as="svg"
-        className="ds-svg-icon--lock ds-svg-icon--md ds-svg-icon"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <svg
-          aria-hidden="true"
-          className="ds-svg-icon--lock ds-svg-icon--md ds-svg-icon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <lock>
-            <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>
-        </svg>
-      </ForwardRef(Base)>
-    </ForwardRef(SvgIcon)>
-  </ForwardRef(Icon)>
-</LockIcon>
+      <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`] = `
-<LockIcon
-  size="xl"
->
-  <ForwardRef(Icon)
-    icon="lock"
-    size="xl"
-  >
-    <ForwardRef(SvgIcon)
-      className="ds-svg-icon--lock"
-      size="xl"
+<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"
     >
-      <ForwardRef(Base)
-        aria-hidden="true"
-        as="svg"
-        className="ds-svg-icon--lock ds-svg-icon--xl ds-svg-icon"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <svg
-          aria-hidden="true"
-          className="ds-svg-icon--lock ds-svg-icon--xl ds-svg-icon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <lock>
-            <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>
-        </svg>
-      </ForwardRef(Base)>
-    </ForwardRef(SvgIcon)>
-  </ForwardRef(Icon)>
-</LockIcon>
+      <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

@@ -1,11 +1,15 @@
 import React from 'react';
+import IconBase from '@digigov/react-icons/IconBase';
 
 export interface LockType {}
 
-export function lock(): React.ReactElement {
+export function lock(): React.ReactElement<any> {
   return (
     <>
-      <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"/>
+      <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"
+      />
     </>
   );
 }