design-react-kit 4.0.1 → 5.0.0-0

package/src/Icon/assets/ItMapMarkerPlus.tsx

@@ -1,12 +1,26 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
-      <path d='M15.1 2.8c-1-.5-2-.8-3.1-.8-3.6 0-6.5 2.9-6.5 6.5 0 1.1.3 2.2.8 3.1L12 22l5.7-10.4c1.7-3.2.5-7.1-2.6-8.8zm1.7 8.3L12 19.9l-4.8-8.8c-1.5-2.7-.5-6 2.1-7.5 2.7-1.5 6-.5 7.5 2.1.5.8.7 1.7.7 2.7 0 1-.2 1.9-.7 2.7z' />
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d='M15.1 2.8c-1-.5-2-.8-3.1-.8-3.6 0-6.5 2.9-6.5 6.5 0 1.1.3 2.2.8 3.1L12 22l5.7-10.4c1.7-3.2.5-7.1-2.6-8.8zm1.7 8.3L12 19.9l-4.8-8.8c-1.5-2.7-.5-6 2.1-7.5 2.7-1.5 6-.5 7.5 2.1.5.8.7 1.7.7 2.7s-.2 1.9-.7 2.7z' />
       <path d='M12.5 8h3v1h-3v3h-1V9h-3V8h3V5h1z' />
-      <g>
-        <path fill='none' d='M0 0h24v24H0z' />
-      </g>
     </svg>
   );
 };

package/src/Icon/assets/ItMastodon.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
+  return (
+    <svg
+      width={24}
+      height={24}
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path
+        d='M15.527 16.72c2.267-.27 4.24-1.66 4.489-2.93.39-2 .358-4.88.358-4.88 0-3.905-2.57-5.05-2.57-5.05-1.297-.592-3.523-.841-5.836-.86h-.057c-2.313.019-4.538.268-5.834.86 0 0-2.572 1.145-2.572 5.05 0 .236 0 .485-.002.745a77.26 77.26 0 0 0 .013 2.352c.094 3.818.704 7.582 4.252 8.516 1.636.431 3.041.521 4.173.46 2.051-.114 3.203-.729 3.203-.729l-.068-1.481s-1.466.46-3.113.404c-1.63-.056-3.353-.175-3.617-2.168a4.067 4.067 0 0 1-.036-.559s1.601.39 3.63.482c1.242.057 2.405-.072 3.587-.212Zm1.814-2.78H15.46V9.353c0-.968-.41-1.459-1.228-1.459-.904 0-1.358.583-1.358 1.734v2.512h-1.871V9.627c0-1.151-.454-1.734-1.358-1.734-.819 0-1.228.491-1.228 1.459v4.589H6.534V9.213c0-.967.247-1.735.744-2.303.512-.568 1.183-.859 2.015-.859.964 0 1.693.368 2.176 1.105l.469.783.468-.783c.483-.737 1.212-1.105 2.176-1.105.832 0 1.503.291 2.015.86.497.567.744 1.335.744 2.302v4.728Z'
+        fill='#000'
+      />
+    </svg>
+  );
+};

package/src/Icon/assets/ItMastodonSquare.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
+  return (
+    <svg
+      width={24}
+      height={24}
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path
+        fillRule='evenodd'
+        clipRule='evenodd'
+        d='M3.567 1.333h16.762a2.286 2.286 0 0 1 2.286 2.286v16.762a2.286 2.286 0 0 1-2.286 2.286H3.567a2.286 2.286 0 0 1-2.286-2.286V3.619a2.286 2.286 0 0 1 2.286-2.286Zm15.614 12.259c-.22 1.128-1.975 2.364-3.99 2.603-1.05.125-2.085.24-3.188.19a18.815 18.815 0 0 1-3.228-.43c0 .175.011.342.033.497.234 1.772 1.765 1.878 3.215 1.927a9.33 9.33 0 0 0 2.767-.359l.06 1.317s-1.024.547-2.847.647c-1.006.055-2.255-.025-3.709-.408-3.154-.83-3.697-4.176-3.78-7.57a68.707 68.707 0 0 1-.011-2.09l.002-.663c0-3.47 2.285-4.488 2.285-4.488 1.153-.527 3.13-.748 5.186-.765h.05c2.057.017 4.035.238 5.188.765 0 0 2.285 1.017 2.285 4.488 0 0 .03 2.56-.318 4.339Zm-4.051.133h1.673V9.522c0-.859-.22-1.541-.66-2.046-.456-.505-1.052-.764-1.793-.764-.856 0-1.504.328-1.933.983L12 8.39l-.417-.695c-.429-.655-1.077-.983-1.933-.983-.74 0-1.337.259-1.792.764-.442.505-.661 1.187-.661 2.046v4.203H8.87v-4.08c0-.859.364-1.295 1.09-1.295.805 0 1.208.517 1.208 1.541v2.233h1.664V9.89c0-1.024.403-1.541 1.207-1.541.727 0 1.091.436 1.091 1.296v4.079Z'
+        fill='#000'
+      />
+    </svg>
+  );
+};

package/src/Icon/assets/ItMaximize.tsx

@@ -1,11 +1,25 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
-      <path d='M4.7 4l6.7 6.6-.7.7L4 4.7v3.8H3V3h5.5v1zM20 19.3l-6.6-6.7-.7.7 6.6 6.7h-3.8v1H21v-5.5h-1zM15.5 3v1h3.8l-6.6 6.6.7.7L20 4.7v3.8h1V3zM10.6 12.6L4 19.3v-3.8H3V21h5.5v-1H4.7l6.7-6.7z' />
-      <g>
-        <path fill='none' d='M0 0h24v24H0z' />
-      </g>
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d='m4.7 4 6.7 6.6-.7.7L4 4.7v3.8H3V3h5.5v1zM20 19.3l-6.6-6.7-.7.7 6.6 6.7h-3.8v1H21v-5.5h-1zM15.5 3v1h3.8l-6.6 6.6.7.7L20 4.7v3.8h1V3zM10.6 12.6 4 19.3v-3.8H3V21h5.5v-1H4.7l6.7-6.7z' />
     </svg>
   );
 };

package/src/Icon/assets/ItMaximizeAlt.tsx

@@ -1,11 +1,25 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
-      <path d='M15.1 18.1l.7.7-3.8 3.9-3.9-3.9.7-.7 2.7 2.7v-7.3h1v7.3zM18.9 8.1l-.8.7 2.7 2.7h-7.3v1h7.3l-2.6 2.6.7.7 3.8-3.8zM11.5 3.2v7.3h1V3.2l2.6 2.6.7-.7L12 1.3 8.1 5.1l.7.7zM10.5 12.5v-1H3.2l2.6-2.7-.6-.7L1.3 12l3.8 3.8.7-.7-2.6-2.6z' />
-      <g>
-        <path fill='none' d='M0 0h24v24H0z' />
-      </g>
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d='m15.1 18.1.7.7-3.8 3.9-3.9-3.9.7-.7 2.7 2.7v-7.3h1v7.3zM18.9 8.1l-.8.7 2.7 2.7h-7.3v1h7.3l-2.6 2.6.7.7 3.8-3.8zM11.5 3.2v7.3h1V3.2l2.6 2.6.7-.7L12 1.3 8.1 5.1l.7.7zM10.5 12.5v-1H3.2l2.6-2.7-.6-.7L1.3 12l3.8 3.8.7-.7-2.6-2.6z' />
     </svg>
   );
 };

package/src/Icon/assets/ItMedium.tsx

@@ -1,9 +1,26 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' {...props}>
-      <path fill='none' d='M0 0h24v24H0z' />
-      <path d='M5 7.63A.72.72 0 004.82 7L3.13 5v-.3h5.22l4 8.84 3.54-8.84h5V5l-1.42 1.4a.43.43 0 00-.16.4v10.12a.45.45 0 00.16.41l1.4 1.37v.3h-7v-.3l1.45-1.41c.14-.14.14-.18.14-.4V8.71L11.37 19h-.55L6.12 8.71v6.88a.93.93 0 00.26.79l1.89 2.29V19H2.91v-.3l1.89-2.32a.92.92 0 00.2-.79V7.63z' />
+    <svg
+      width={24}
+      height={24}
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d='M13.281 12.625c0 3.107-2.525 5.625-5.64 5.625C4.524 18.25 2 15.732 2 12.625S4.525 7 7.64 7c3.116 0 5.641 2.518 5.641 5.625Zm6.188 0c0 2.924-1.263 5.295-2.82 5.295-1.558 0-2.82-2.371-2.82-5.295s1.262-5.295 2.82-5.295c1.557 0 2.82 2.371 2.82 5.295Zm2.531 0c0 2.62-.444 4.744-.992 4.744s-.992-2.125-.992-4.744c0-2.62.444-4.744.992-4.744S22 10.005 22 12.625Z' />
     </svg>
   );
 };

package/src/Icon/assets/ItMediumSquare.tsx

@@ -1,9 +1,29 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' {...props}>
-      <path fill='none' d='M0 0h24v24H0z' />
-      <path d='M3 3h18v18H3V3zm4.3 11.36a.64.64 0 01-.17.54l-1.27 1.54v.2h3.6v-.2L8.19 14.9a.67.67 0 01-.19-.54V9.74l3.16 6.9h.37l2.71-6.9v5.5c0 .15 0 .17-.09.27l-1 1v.2h4.74v-.2l-.89-.98a.27.27 0 01-.11-.27v-6.8a.28.28 0 01.11-.27l1-.93v-.2h-3.39L12.23 13 9.52 7.06H6v.2l1.14 1.36A.5.5 0 017.3 9v5.36z' />
+    <svg
+      width={24}
+      height={24}
+      viewBox='0 0 24 24'
+      fill='none'
+      xmlns='http://www.w3.org/2000/svg'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path
+        clipRule='evenodd'
+        d='M3.567 1.333h16.762a2.286 2.286 0 0 1 2.286 2.286v16.762a2.286 2.286 0 0 1-2.286 2.286H3.567a2.286 2.286 0 0 1-2.286-2.286V3.619a2.286 2.286 0 0 1 2.286-2.286ZM8.512 16.5a4.506 4.506 0 0 0 4.513-4.5c0-2.485-2.02-4.5-4.513-4.5A4.506 4.506 0 0 0 4 12c0 2.486 2.02 4.5 4.512 4.5Zm7.207-.264c1.246 0 2.256-1.897 2.256-4.236 0-2.34-1.01-4.236-2.256-4.236-1.246 0-2.256 1.897-2.256 4.236 0 2.339 1.01 4.236 2.256 4.236Zm3.487-.44c.439 0 .794-1.7.794-3.796s-.355-3.795-.793-3.795c-.439 0-.794 1.7-.794 3.795 0 2.095.355 3.795.793 3.795Z'
+      />
     </svg>
   );
 };

package/src/Icon/assets/ItMinimize.tsx

@@ -1,11 +1,25 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
       <path d='M3 15.5h5.5V21h-1v-4.5H3zM7.5 7.5H3v1h5.5V3h-1zM15.5 21h1v-4.5H21v-1h-5.5zM16.5 7.5V3h-1v5.5H21v-1z' />
-      <g>
-        <path fill='none' d='M0 0h24v24H0z' />
-      </g>
     </svg>
   );
 };

package/src/Icon/assets/ItMinus.tsx

@@ -1,9 +1,25 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
-      <path d='M20 12.5H4v-1h16z' />
-      <path fill='none' d='M0 0h24v24H0z' />
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d='M20 12.5H4v-1h16v1z' />
     </svg>
   );
 };

package/src/Icon/assets/ItMinusCircle.tsx

@@ -1,9 +1,25 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
-      <path d='M6.9 11.5h10v1h-10zM22 12A10 10 0 1112 2a10 10 0 0110 10zm-1 0a9 9 0 10-9 9 9 9 0 009-9z' />
-      <path fill='none' d='M0 0h24v24H0z' />
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d='M6.9 11.5h10v1h-10v-1zM22 12c0 5.5-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2s10 4.5 10 10zm-1 0c0-5-4-9-9-9s-9 4-9 9 4 9 9 9 9-4 9-9z' />
     </svg>
   );
 };

package/src/Icon/assets/ItMoreActions.tsx

@@ -1,9 +1,25 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
-      <path d='M6 10a2 2 0 102 2 2 2 0 00-2-2zm0 3a1 1 0 010-2 1 1 0 010 2zm6-3a2 2 0 102 2 2 2 0 00-2-2zm0 3a1 1 0 111-1 .9.9 0 01-1 1zm6-3a2 2 0 102 2 2 2 0 00-2-2zm0 3a1 1 0 111-1 .9.9 0 01-1 1z' />
-      <path fill='none' d='M0 0h24v24H0z' />
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d='M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 3c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zm6-3c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 3c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1c.1.5-.3.9-.8 1H12zm6-3c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 3c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1c.1.5-.3.9-.8 1H18z' />
     </svg>
   );
 };

package/src/Icon/assets/ItMoreItems.tsx

@@ -1,9 +1,25 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
-      <path d='M12 18a1 1 0 11-1 1 .9.9 0 011-1m0-1a2 2 0 102 2 2 2 0 00-2-2zm0-6a1 1 0 11-1 1 .9.9 0 011-1m0-1a2 2 0 102 2 2 2 0 00-2-2zm0-6a.9.9 0 011 1 1 1 0 01-2 0 .9.9 0 011-1m0-1a2 2 0 102 2 2 2 0 00-2-2z' />
-      <path fill='none' d='M0 0h24v24H0z' />
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d='M12 18c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1c-.1-.5.3-.9.8-1h.2m0-1c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1c-.1-.5.3-.9.8-1h.2m0-1c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c.5-.1.9.3 1 .8V5c0 .6-.4 1-1 1s-1-.4-1-1c-.1-.5.3-.9.8-1h.2m0-1c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z' />
     </svg>
   );
 };

package/src/Icon/assets/ItNote.tsx

@@ -1,9 +1,25 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
-      <path d='M18.5 4h-13A1.5 1.5 0 004 5.5v13A1.5 1.5 0 005.5 20h10.2l4.3-4.3V5.5A1.5 1.5 0 0018.5 4zM5 18.5v-13a.5.5 0 01.5-.5h13a.5.5 0 01.5.5V15h-2.5a1.5 1.5 0 00-1.5 1.5V19H5.5a.5.5 0 01-.5-.5zM18.3 16L16 18.3v-1.8a.5.5 0 01.5-.5zM16 9H8V8h8zm0 2H8v-1h8zm-2 1v1H8v-1z' />
-      <path fill='none' d='M0 0h24v24H0z' />
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d='M18.5 4h-13C4.7 4 4 4.7 4 5.5v13c0 .8.7 1.5 1.5 1.5h10.2l4.3-4.3V5.5c0-.8-.7-1.5-1.5-1.5zM5 18.5v-13c0-.3.2-.5.5-.5h13c.3 0 .5.2.5.5V15h-2.5c-.8 0-1.5.7-1.5 1.5V19H5.5c-.3 0-.5-.2-.5-.5zM18.3 16 16 18.3v-1.8c0-.3.2-.5.5-.5h1.8zM16 9H8V8h8v1zm0 2H8v-1h8v1zm-2 1v1H8v-1h6z' />
     </svg>
   );
 };

package/src/Icon/assets/ItOpenSource.tsx

@@ -1,9 +1,25 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
-      <path fill='none' d='M0 0h24v24H0z' />
-      <path d='M12 2a10 10 0 00-3.18 19.48l1.75-5.75.29-1A3 3 0 019 12a3 3 0 016 0 3 3 0 01-1.87 2.76l.3 1 1.75 5.75A10 10 0 0012 2zm3.82 18.15l-1.49-4.91a2.15 2.15 0 00.23-.18 1.21 1.21 0 00.24-.21 1.8 1.8 0 00.19-.2 3.79 3.79 0 00.72-1.15l.11-.31a2.5 2.5 0 00.07-.26 2.67 2.67 0 00.08-.48A3.4 3.4 0 0016 12a4 4 0 00-8 0v.5a3.58 3.58 0 00.09.45 3 3 0 00.14.45 4.16 4.16 0 00.43.84c.09.13.19.25.29.37a2.57 2.57 0 00.33.33 3.94 3.94 0 00.36.3l-1.46 4.91a9 9 0 117.64 0z' />
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d='M12 2C6.5 2 2 6.5 2 12c0 4.3 2.7 8.1 6.8 9.5l1.7-5.8.3-1C9.7 14.3 9 13.2 9 12c0-1.7 1.3-3 3-3s3 1.3 3 3c0 1.2-.7 2.3-1.9 2.8l.3 1 1.8 5.8c5.3-1.7 8.1-7.3 6.4-12.6-1.3-4.2-5.2-7-9.6-7zm3.8 18.1-1.5-4.9c.1-.1.2-.1.2-.2.1-.1.2-.1.2-.2l.2-.2c.3-.3.6-.7.7-1.1l.1-.3c0-.1.1-.2.1-.3 0-.2.1-.3.1-.5V12c0-2.2-1.8-4-4-4s-4 1.8-4 4v.5c0 .2.1.3.1.4 0 .2.1.3.1.4.1.3.3.6.4.8.1.1.2.3.3.4l.3.3c.1.1.2.2.4.3L8 20c-4.5-2.1-6.4-7.5-4.3-12s7.5-6.4 12-4.3 6.4 7.5 4.3 12c-.7 2-2.3 3.6-4.2 4.4z' />
     </svg>
   );
 };

package/src/Icon/assets/ItPa.tsx

@@ -1,9 +1,25 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
-      <path d='M3 21h18v1H3zm0-1h18v-1H3zM22 9H2l10-7zM5.2 8h13.6L12 3.2zM6 18v-8H5v8zm4 0v-8H9v8zm5 0v-8h-1v8zm4 0v-8h-1v8z' />
-      <path fill='none' d='M0 0h24v24H0z' />
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d='M3 21h18v1H3v-1zm0-1h18v-1H3v1zM22 9H2l10-7 10 7zM5.2 8h13.6L12 3.2 5.2 8zM6 18v-8H5v8h1zm4 0v-8H9v8h1zm5 0v-8h-1v8h1zm4 0v-8h-1v8h1z' />
     </svg>
   );
 };

package/src/Icon/assets/ItPasswordInvisible.tsx

@@ -1,9 +1,25 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
-      <path d='M15 12a3.2 3.2 0 00-.7-1.9l.4-1.1a4.2 4.2 0 011.3 3 4 4 0 01-3.9 4l.4-1.1A2.9 2.9 0 0015 12zM3.1 12A9.8 9.8 0 0112 6.5h.4l.4-.9H12a10.9 10.9 0 00-9.8 6L2 12l.2.5a11 11 0 006.1 5.3l.3-.9A9.8 9.8 0 013.1 12zm18.7-.5a11 11 0 00-6.1-5.3l-.3.9a9.8 9.8 0 015.5 4.9 9.8 9.8 0 01-8.9 5.5h-.4l-.4.9h.8a10.9 10.9 0 009.8-6l.2-.4zM11.5 9.1l.4-1.1A4 4 0 008 12a4.2 4.2 0 001.3 3l.4-1.1A3.2 3.2 0 019 12a2.9 2.9 0 012.5-2.9zm3.1-5.7L8.5 20.3l.9.3 6.1-16.9z' />
-      <path fill='none' d='M0 0h24v24H0z' />
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d='M15 12c0-.7-.3-1.4-.7-1.9l.4-1.1c.8.8 1.3 1.9 1.3 3 0 2.2-1.7 3.9-3.9 4l.4-1.1c1.4-.2 2.5-1.4 2.5-2.9zM3.1 12C4.8 8.6 8.2 6.5 12 6.5h.4l.4-.9H12c-4.1 0-7.9 2.3-9.8 6L2 12l.2.5c1.3 2.5 3.5 4.4 6.1 5.3l.3-.9C6.2 16 4.2 14.3 3.1 12zm18.7-.5c-1.3-2.5-3.5-4.4-6.1-5.3l-.3.9c2.4.9 4.4 2.6 5.5 4.9a9.88 9.88 0 0 1-8.9 5.5h-.4l-.4.9h.8c4.1 0 7.9-2.3 9.8-6l.2-.4-.2-.5zM11.5 9.1l.4-1.1C9.7 8.1 8 9.8 8 12c0 1.1.5 2.2 1.3 3l.4-1.1c-.4-.5-.7-1.2-.7-1.9 0-1.5 1.1-2.7 2.5-2.9zm3.1-5.7L8.5 20.3l.9.3 6.1-16.9-.9-.3z' />
     </svg>
   );
 };

package/src/Icon/assets/ItPasswordVisible.tsx

@@ -1,9 +1,25 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
-      <path d='M21.8 11.5a11 11 0 00-19.6 0L2 12l.2.5a11 11 0 0019.6 0l.2-.5zm-9.8 6A9.8 9.8 0 013.1 12 9.8 9.8 0 0112 6.5a9.8 9.8 0 018.9 5.5 9.8 9.8 0 01-8.9 5.5zM12 8a4 4 0 104 4 4 4 0 00-4-4zm0 7a3 3 0 113-3 2.9 2.9 0 01-3 3z' />
-      <path fill='none' d='M0 0h24v24H0z' />
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d='M21.8 11.5C19 6.1 12.4 3.9 7 6.7c-2.1 1.1-3.7 2.7-4.8 4.8L2 12l.2.5c2.8 5.4 9.4 7.6 14.8 4.8 2.1-1.1 3.7-2.7 4.8-4.8l.2-.5-.2-.5zm-9.8 6c-3.8 0-7.2-2.1-8.9-5.5C4.8 8.6 8.2 6.5 12 6.5c3.8 0 7.2 2.1 8.9 5.5a9.88 9.88 0 0 1-8.9 5.5zM12 8c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zm0 7c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3c.1 1.6-1.2 2.9-2.8 3H12z' />
     </svg>
   );
 };

package/src/Icon/assets/ItPencil.tsx

@@ -1,9 +1,25 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
-      <path d='M20.5 3.5a2.9 2.9 0 00-2.1-.9 3.1 3.1 0 00-2.2.9L4.6 15.2l-1 5.2 5.2-1L20.5 7.8a3 3 0 000-4.3zm-5.7 2.8l.7-.7 2.9 2.9-.7.7zm-.7.8l1.1 1-8.4 8.4-1.1-1.1zM5.7 18.3a.7.7 0 00-.6-.3l.3-1.5 2.1 2.1-1.5.3a.7.7 0 00-.3-.6zm2.9 0l-1.1-1.1 8.4-8.4 1 1.1zM19.8 7.1l-.7.7-2.9-2.9.7-.7a2.2 2.2 0 011.5-.6 2 2 0 011.4.6 2.1 2.1 0 010 2.9z' />
-      <path fill='none' d='M0 0h24v24H0z' />
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d='M20.5 3.5c-.5-.6-1.3-.9-2.1-.9s-1.6.3-2.2.9L4.6 15.2l-1 5.2 5.2-1L20.5 7.8c1.2-1.2 1.2-3.1 0-4.3zm-5.7 2.8.7-.7 2.9 2.9-.7.7-2.9-2.9zm-.7.8 1.1 1-8.4 8.4-1.1-1.1 8.4-8.3zM5.7 18.3c-.1-.2-.4-.3-.6-.3l.3-1.5 2.1 2.1-1.5.3c0-.2-.1-.5-.3-.6zm2.9 0-1.1-1.1 8.4-8.4 1 1.1-8.3 8.4zM19.8 7.1l-.7.7-2.9-2.9.7-.7c.4-.4.9-.6 1.5-.6.5 0 1 .2 1.4.6.8.8.8 2.1 0 2.9z' />
     </svg>
   );
 };

package/src/Icon/assets/ItPiattaforme.tsx

@@ -1,10 +1,26 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
-      <path fill='none' d='M0 0h24v24H0z' />
-      <path d='M12 4.14L18.94 8 12 11.86 5.06 8 12 4.14M12 3L3 8l9 5 9-5-9-5zM21 14.72l-9 5.01-9-5.01 1-.54 8 4.44 7.97-4.47 1.03.57z' />
-      <path d='M21 11.51l-9 5-9-5 1-.55 8 4.44 7.97-4.46 1.03.57z' />
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d='M12 4.1 18.9 8 12 11.9 5.1 8 12 4.1M12 3 3 8l9 5 9-5-9-5zM21 14.7l-9 5-9-5 1-.5 8 4.4 8-4.5z' />
+      <path d='m21 11.5-9 5-9-5 1-.5 8 4.4 8-4.5z' />
     </svg>
   );
 };

package/src/Icon/assets/ItPin.tsx

@@ -1,9 +1,25 @@
 import * as React from 'react';
-export const component = (props: React.SVGProps<SVGSVGElement>) => {
+import { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+export const component = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => {
   return (
-    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' {...props}>
-      <path d='M18.1 14L15 10.3V4.6L16.3 2H7.7L9 4.6v5.7L5.9 14h5.6v8h1v-8zM10 5h4v5h-4zm4.7-2l-.5 1H9.8l-.5-1zm-5 8h4.6l1.6 2H8.1z' />
-      <path fill='none' d='M0 0h24v24H0z' />
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      viewBox='0 0 24 24'
+      xmlSpace='preserve'
+      enableBackground='new 0 0 24 24'
+      aria-labelledby={titleId}
+      {...props}
+    >
+      {title ? <title id={titleId}>{title}</title> : null}
+      <path d='M18.1 14 15 10.3V4.6L16.3 2H7.7L9 4.6v5.7L5.9 14h5.6v8h1v-8h5.6zM10 5h4v5h-4V5zm4.7-2-.5 1H9.8l-.5-1h5.4zm-5 8h4.6l1.6 2H8.1l1.6-2z' />
     </svg>
   );
 };