feat(Alert): add new icon components

packages/react/src/documentation/components/IconsDemo.tsx

@@ -1,3 +1,5 @@
+import React, { useEffect, useState } from 'react';
+
 import { styled } from '@mui/material/styles';
 import Tooltip from '@mui/material/Tooltip';
 
@@ -20,6 +22,27 @@ const IconsDemoIcon = styled('div')(({ theme }) => ({
 }));
 
 export const IconsDemo = () => {
+  const [oversizedIcons, setOversizedIcons] = useState({});
+  const [wideIcons, setWideIcons] = useState({});
+
+  const containerSize = 48;
+
+  useEffect(() => {
+    Object.keys(icons).forEach((name) => {
+      const iconElement = document.getElementById(name);
+
+      if (iconElement) {
+        const { width, height } = iconElement.getBoundingClientRect();
+
+        if (height > containerSize) {
+          setOversizedIcons((prev) => ({ ...prev, [name]: true }));
+        } else if (width > containerSize) {
+          setWideIcons((prev) => ({ ...prev, [name]: true }));
+        }
+      }
+    });
+  }, []);
+
   return (
     <IconsDemoRoot>
       {Object.keys(icons).map((name) => {
@@ -28,7 +51,10 @@ export const IconsDemo = () => {
         return (
           <Tooltip key={name} arrow title={<code>{name}</code>}>
             <IconsDemoIcon>
-              <Icon />
+              <Icon
+                id={name}
+                {...(name in oversizedIcons ? { size: '40px' } : name in wideIcons ? { width: '40px' } : {})}
+              />
             </IconsDemoIcon>
           </Tooltip>
         );

packages/react/src/icons/IconAlertDuo.tsx

@@ -0,0 +1,24 @@
+import { SvgIcon, SvgIconProps } from '../components/SvgIcon';
+
+interface DuoColorIconProps extends SvgIconProps {
+  primaryColor?: string;
+  secondaryColor?: string;
+}
+
+export const IconAlertDuo = ({
+  primaryColor = 'currentColor',
+  secondaryColor = 'currentColor',
+  ...props
+}: DuoColorIconProps) => {
+  return (
+    <SvgIcon size="56px" viewBox="0 0 56 56" {...props}>
+      <path
+        d="M56 28C56 43.4639 43.464 56 28 56C12.536 56 0 43.4639 0 28C0 12.536 12.536 -4.95911e-05 28 -4.95911e-05C43.464 -4.95911e-05 56 12.536 56 28Z"
+        fill={primaryColor}
+        fillOpacity="0.12"
+      />
+      <path d="M28 17.5V31.5" stroke={secondaryColor} strokeLinecap="round" strokeWidth="4" />
+      <path d="M28 39.37V39.37" stroke={secondaryColor} strokeLinecap="round" strokeWidth="4" />
+    </SvgIcon>
+  );
+};

packages/react/src/icons/IconAlertFill.tsx

@@ -0,0 +1,18 @@
+import { useTheme } from '@mui/material';
+
+import { SvgIcon, SvgIconProps } from '../components/SvgIcon';
+
+export const IconAlertFill = (props: SvgIconProps) => {
+  const theme = useTheme();
+
+  return (
+    <SvgIcon size="56px" viewBox="0 0 56 56" {...props}>
+      <path
+        d="M56 28C56 43.4639 43.464 56 28 56C12.536 56 0 43.4639 0 28C0 12.536 12.536 -4.95911e-05 28 -4.95911e-05C43.464 -4.95911e-05 56 12.536 56 28Z"
+        fill="currentColor"
+      />
+      <path d="M28 17.5V31.5" stroke={theme.palette.monoB[500]} strokeLinecap="round" strokeWidth="4" />
+      <path d="M28 39.37V39.37" stroke={theme.palette.monoB[500]} strokeLinecap="round" strokeWidth="4" />
+    </SvgIcon>
+  );
+};

packages/react/src/icons/IconAlertLine.tsx

@@ -0,0 +1,15 @@
+import { SvgIcon, SvgIconProps } from '../components/SvgIcon';
+
+export const IconAlertLine = (props: SvgIconProps) => {
+  return (
+    <SvgIcon size="56px" viewBox="0 0 56 56" {...props}>
+      <path
+        d="M55 28C55 42.9116 42.9117 55 28 55C13.0883 55 1 42.9116 1 28C1 13.0883 13.0883 0.999954 28 0.999954C42.9117 0.999954 55 13.0883 55 28Z"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      <path d="M28 17.5V32.375" stroke="currentColor" strokeLinecap="round" strokeWidth="2" />
+      <path d="M28 37.625V39.375" stroke="currentColor" strokeLinecap="round" strokeWidth="2" />
+    </SvgIcon>
+  );
+};

packages/react/src/icons/IconError2Duo.tsx

@@ -0,0 +1,20 @@
+import { SvgIcon, SvgIconProps } from '../components/SvgIcon';
+
+interface DuoColorIconProps extends SvgIconProps {
+  primaryColor?: string;
+  secondaryColor?: string;
+}
+
+export const IconError2Duo = ({
+  primaryColor = 'currentColor',
+  secondaryColor = 'currentColor',
+  ...props
+}: DuoColorIconProps) => {
+  return (
+    <SvgIcon size="56px" viewBox="0 0 56 56" {...props}>
+      <circle cx="28" cy="28" fill={primaryColor} fillOpacity="0.12" r="28" />
+      <path d="M37.625 18.375L18.375 37.625" stroke={secondaryColor} strokeLinecap="round" strokeWidth="4" />
+      <path d="M18.375 18.375L37.625 37.625" stroke={secondaryColor} strokeLinecap="round" strokeWidth="4" />
+    </SvgIcon>
+  );
+};

packages/react/src/icons/IconError2Fill.tsx

@@ -0,0 +1,15 @@
+import { useTheme } from '@mui/material';
+
+import { SvgIcon, SvgIconProps } from '../components/SvgIcon';
+
+export const IconError2Fill = (props: SvgIconProps) => {
+  const theme = useTheme();
+
+  return (
+    <SvgIcon size="56px" viewBox="0 0 56 56" {...props}>
+      <circle cx="28" cy="28" fill="currentColor" r="28" />
+      <path d="M37.625 18.375L18.375 37.625" stroke={theme.palette.monoB[500]} strokeLinecap="round" strokeWidth="4" />
+      <path d="M18.375 18.375L37.625 37.625" stroke={theme.palette.monoB[500]} strokeLinecap="round" strokeWidth="4" />
+    </SvgIcon>
+  );
+};

packages/react/src/icons/IconError2Line.tsx

@@ -0,0 +1,15 @@
+import { SvgIcon, SvgIconProps } from '../components/SvgIcon';
+
+export const IconError2Line = (props: SvgIconProps) => {
+  return (
+    <SvgIcon size="56px" viewBox="0 0 56 56" {...props}>
+      <path
+        d="M55 28C55 42.9116 42.9117 55 28 55C13.0883 55 1 42.9116 1 28C1 13.0883 13.0883 0.999954 28 0.999954C42.9117 0.999954 55 13.0883 55 28Z"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      <path d="M37.5 18.5L18.5 37.5" stroke="currentColor" strokeLinecap="round" strokeWidth="2" />
+      <path d="M18.5 18.5L37.5 37.5" stroke="currentColor" strokeLinecap="round" strokeWidth="2" />
+    </SvgIcon>
+  );
+};

packages/react/src/icons/IconErrorDuo.tsx

@@ -0,0 +1,23 @@
+import { SvgIcon, SvgIconProps } from '../components/SvgIcon';
+
+interface DuoColorIconProps extends SvgIconProps {
+  primaryColor?: string;
+  secondaryColor?: string;
+}
+
+export const IconErrorDuo = ({
+  primaryColor = 'currentColor',
+  secondaryColor = 'currentColor',
+  ...props
+}: DuoColorIconProps) => {
+  return (
+    <SvgIcon size="56px" viewBox="0 0 56 56" {...props}>
+      <path
+        d="M56 28C56 43.4639 43.464 56 28 56C12.536 56 0 43.4639 0 28C0 12.536 12.536 -4.95911e-05 28 -4.95911e-05C43.464 -4.95911e-05 56 12.536 56 28Z"
+        fill={primaryColor}
+        fillOpacity="0.12"
+      />
+      <path d="M18.701 37.2989L37.299 18.701" stroke={secondaryColor} strokeLinecap="round" strokeWidth="4" />
+    </SvgIcon>
+  );
+};

packages/react/src/icons/IconErrorFill.tsx

@@ -0,0 +1,17 @@
+import { useTheme } from '@mui/material';
+
+import { SvgIcon, SvgIconProps } from '../components/SvgIcon';
+
+export const IconErrorFill = (props: SvgIconProps) => {
+  const theme = useTheme();
+
+  return (
+    <SvgIcon size="56px" viewBox="0 0 56 56" {...props}>
+      <path
+        d="M56 28C56 43.4639 43.464 56 28 56C12.536 56 0 43.4639 0 28C0 12.536 12.536 -4.95911e-05 28 -4.95911e-05C43.464 -4.95911e-05 56 12.536 56 28Z"
+        fill="currentColor"
+      />
+      <path d="M18.701 37.2989L37.299 18.701" stroke={theme.palette.monoB[500]} strokeLinecap="round" strokeWidth="4" />
+    </SvgIcon>
+  );
+};

packages/react/src/icons/IconErrorLine.tsx

@@ -0,0 +1,14 @@
+import { SvgIcon, SvgIconProps } from '../components/SvgIcon';
+
+export const IconErrorLine = (props: SvgIconProps) => {
+  return (
+    <SvgIcon size="56px" viewBox="0 0 56 56" {...props}>
+      <path
+        d="M55 27.9998C55 42.9115 42.9117 54.9998 28 54.9998C20.5439 54.9998 13.7953 51.9789 8.90812 47.0917C4.02099 42.2046 1.00001 35.456 1 27.9998C1 13.0882 13.0883 0.99984 28 0.99984C35.4561 0.99984 42.2048 4.02082 47.0919 8.90796C51.979 13.7951 55 20.5437 55 27.9998Z"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      <path d="M46.5 9.5L9 47" stroke="currentColor" strokeLinecap="round" strokeWidth="2" />
+    </SvgIcon>
+  );
+};

packages/react/src/icons/IconInfo2Duo.tsx

@@ -0,0 +1,27 @@
+import { SvgIcon, SvgIconProps } from '../components/SvgIcon';
+
+interface DuoColorIconProps extends SvgIconProps {
+  primaryColor?: string;
+  secondaryColor?: string;
+}
+
+export const IconInfo2Duo = ({
+  primaryColor = 'currentColor',
+  secondaryColor = 'currentColor',
+  ...props
+}: DuoColorIconProps) => {
+  return (
+    <SvgIcon size="56px" viewBox="0 0 56 56" {...props}>
+      <path
+        d="M56 28C56 43.464 43.464 56 28 56C12.536 56 0 43.464 0 28C0 12.536 12.536 0 28 0C43.464 0 56 12.536 56 28Z"
+        fill={primaryColor}
+        fillOpacity="0.12"
+      />
+      <path
+        d="M28 24L30 24C30 22.8954 29.1046 22 28 22L28 24ZM25 22C23.8954 22 23 22.8954 23 24C23 25.1046 23.8954 26 25 26L25 22ZM31 40C32.1046 40 33 39.1046 33 38C33 36.8954 32.1046 36 31 36L31 40ZM25 36C23.8954 36 23 36.8954 23 38C23 39.1046 23.8954 40 25 40L25 36ZM26 24L26 38L30 38L30 24L26 24ZM28 22L25 22L25 26L28 26L28 22ZM28 40L31 40L31 36L28 36L28 40ZM28 36L25 36L25 40L28 40L28 36Z"
+        fill={secondaryColor}
+      />
+      <path d="M28 16.5V16.5088" stroke={secondaryColor} strokeLinecap="round" strokeWidth="4" />
+    </SvgIcon>
+  );
+};

packages/react/src/icons/IconInfo2Fill.tsx

@@ -0,0 +1,21 @@
+import { useTheme } from '@mui/material';
+
+import { SvgIcon, SvgIconProps } from '../components/SvgIcon';
+
+export const IconInfo2Fill = (props: SvgIconProps) => {
+  const theme = useTheme();
+
+  return (
+    <SvgIcon size="56px" viewBox="0 0 56 56" {...props}>
+      <path
+        d="M56 28C56 43.464 43.464 56 28 56C12.536 56 0 43.464 0 28C0 12.536 12.536 0 28 0C43.464 0 56 12.536 56 28Z"
+        fill="currentColor"
+      />
+      <path
+        d="M28 24L30 24C30 22.8954 29.1046 22 28 22L28 24ZM25 22C23.8954 22 23 22.8954 23 24C23 25.1046 23.8954 26 25 26L25 22ZM31 40C32.1046 40 33 39.1046 33 38C33 36.8954 32.1046 36 31 36L31 40ZM25 36C23.8954 36 23 36.8954 23 38C23 39.1046 23.8954 40 25 40L25 36ZM26 24L26 38L30 38L30 24L26 24ZM28 22L25 22L25 26L28 26L28 22ZM28 40L31 40L31 36L28 36L28 40ZM28 36L25 36L25 40L28 40L28 36Z"
+        fill={theme.palette.monoB[500]}
+      />
+      <path d="M28 16.5V16.5088" stroke={theme.palette.monoB[500]} strokeLinecap="round" strokeWidth="4" />
+    </SvgIcon>
+  );
+};

packages/react/src/icons/IconInfo2Line.tsx

@@ -0,0 +1,18 @@
+import { SvgIcon, SvgIconProps } from '../components/SvgIcon';
+
+export const IconInfo2Line = (props: SvgIconProps) => {
+  return (
+    <SvgIcon size="56px" viewBox="0 0 56 56" {...props}>
+      <path
+        d="M55 28C55 42.9116 42.9117 55 28 55C13.0883 55 1 42.9116 1 28C1 13.0883 13.0883 0.999954 28 0.999954C42.9117 0.999954 55 13.0883 55 28Z"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      <path
+        d="M28 24L29 24C29 23.4477 28.5523 23 28 23L28 24ZM25 23C24.4477 23 24 23.4477 24 24C24 24.5523 24.4477 25 25 25L25 23ZM31 39C31.5523 39 32 38.5523 32 38C32 37.4477 31.5523 37 31 37L31 39ZM25 37C24.4477 37 24 37.4477 24 38C24 38.5523 24.4477 39 25 39L25 37ZM27 24L27 38L29 38L29 24L27 24ZM28 23L25 23L25 25L28 25L28 23ZM28 39L31 39L31 37L28 37L28 39ZM28 37L25 37L25 39L28 39L28 37Z"
+        fill="currentColor"
+      />
+      <path d="M28 16.62V18.37" stroke="currentColor" strokeLinecap="round" strokeWidth="2" />
+    </SvgIcon>
+  );
+};

packages/react/src/icons/IconInfoDuo.tsx

@@ -0,0 +1,24 @@
+import { SvgIcon, SvgIconProps } from '../components/SvgIcon';
+
+interface DuoColorIconProps extends SvgIconProps {
+  primaryColor?: string;
+  secondaryColor?: string;
+}
+
+export const IconInfoDuo = ({
+  primaryColor = 'currentColor',
+  secondaryColor = 'currentColor',
+  ...props
+}: DuoColorIconProps) => {
+  return (
+    <SvgIcon size="56px" viewBox="0 0 56 56" {...props}>
+      <path
+        d="M56 28C56 43.4639 43.464 56 28 56C12.536 56 0 43.4639 0 28C0 12.536 12.536 -4.95911e-05 28 -4.95911e-05C43.464 -4.95911e-05 56 12.536 56 28Z"
+        fill={primaryColor}
+        fillOpacity="0.12"
+      />
+      <path d="M28 24.5V38.5" stroke={secondaryColor} strokeLinecap="round" strokeWidth="4" />
+      <path d="M28 16.625V16.6338" stroke={secondaryColor} strokeLinecap="round" strokeWidth="4" />
+    </SvgIcon>
+  );
+};

packages/react/src/icons/IconInfoFill.tsx

@@ -0,0 +1,18 @@
+import { useTheme } from '@mui/material';
+
+import { SvgIcon, SvgIconProps } from '../components/SvgIcon';
+
+export const IconInfoFill = (props: SvgIconProps) => {
+  const theme = useTheme();
+
+  return (
+    <SvgIcon size="56px" viewBox="0 0 56 56" {...props}>
+      <path
+        d="M56 28C56 43.4639 43.464 56 28 56C12.536 56 0 43.4639 0 28C0 12.536 12.536 -4.95911e-05 28 -4.95911e-05C43.464 -4.95911e-05 56 12.536 56 28Z"
+        fill="currentColor"
+      />
+      <path d="M28 24.5V38.5" stroke={theme.palette.monoB[500]} strokeLinecap="round" strokeWidth="4" />
+      <path d="M28 16.625V16.6338" stroke={theme.palette.monoB[500]} strokeLinecap="round" strokeWidth="4" />
+    </SvgIcon>
+  );
+};

packages/react/src/icons/IconInfoLine.tsx

@@ -0,0 +1,15 @@
+import { SvgIcon, SvgIconProps } from '../components/SvgIcon';
+
+export const IconInfoLine = (props: SvgIconProps) => {
+  return (
+    <SvgIcon size="56px" viewBox="0 0 56 56" {...props}>
+      <path
+        d="M55 28C55 42.9116 42.9117 55 28 55C13.0883 55 1 42.9116 1 28C1 13.0883 13.0883 0.999954 28 0.999954C42.9117 0.999954 55 13.0883 55 28Z"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      <path d="M28 23.625V38.5" stroke="currentColor" strokeLinecap="round" strokeWidth="2" />
+      <path d="M28 16.625V18.375" stroke="currentColor" strokeLinecap="round" strokeWidth="2" />
+    </SvgIcon>
+  );
+};

packages/react/src/icons/IconSuccessDuo.tsx

@@ -0,0 +1,19 @@
+import { SvgIcon, SvgIconProps } from '../components/SvgIcon';
+
+interface DuoColorIconProps extends SvgIconProps {
+  primaryColor?: string;
+  secondaryColor?: string;
+}
+
+export const IconSuccessDuo = ({
+  primaryColor = 'currentColor',
+  secondaryColor = 'currentColor',
+  ...props
+}: DuoColorIconProps) => {
+  return (
+    <SvgIcon size="56px" viewBox="0 0 56 56" {...props}>
+      <circle cx="28" cy="28" fill={primaryColor} fillOpacity="0.12" r="28" />
+      <path d="M16.625 27.125L25.375 35.875L40.25 21" stroke={secondaryColor} strokeLinecap="round" strokeWidth="4" />
+    </SvgIcon>
+  );
+};

packages/react/src/icons/IconSuccessFill.tsx

@@ -0,0 +1,19 @@
+import { useTheme } from '@mui/material';
+
+import { SvgIcon, SvgIconProps } from '../components/SvgIcon';
+
+export const IconSuccessFill = (props: SvgIconProps) => {
+  const theme = useTheme();
+
+  return (
+    <SvgIcon size="56px" viewBox="0 0 56 56" {...props}>
+      <circle cx="28" cy="28" fill="currentColor" r="28" />
+      <path
+        d="M16.625 27.125L25.375 35.875L40.25 21"
+        stroke={theme.palette.monoB[500]}
+        strokeLinecap="round"
+        strokeWidth="4"
+      />
+    </SvgIcon>
+  );
+};

packages/react/src/icons/IconSuccessLine.tsx

@@ -0,0 +1,10 @@
+import { SvgIcon, SvgIconProps } from '../components/SvgIcon';
+
+export const IconSuccessLine = (props: SvgIconProps) => {
+  return (
+    <SvgIcon size="56px" viewBox="0 0 56 56" {...props}>
+      <circle cx="28" cy="28" r="27" stroke="currentColor" strokeWidth="2" />
+      <path d="M16.625 27.125L25.375 35.875L40.25 21" stroke="currentColor" strokeLinecap="round" strokeWidth="2" />
+    </SvgIcon>
+  );
+};