feat: add new nofile icon

affects: @medly-components/icons

packages/icons/src/Icons.stories.mdx

@@ -541,6 +541,7 @@ import DownloadDoneIcon from './icons/File/DownloadDoneIcon';
 import FolderIcon from './icons/File/FolderIcon';
 import FolderOpenIcon from './icons/File/FolderOpenIcon';
 import FolderSharedIcon from './icons/File/FolderSharedIcon';
+import NoFileIcon from './icons/File/NoFileIcon';
 import PrintIcon from './icons/File/PrintIcon';
 import UploadIcon from './icons/File/UploadIcon';
 import Administratio338LineIcon from './icons/GSDD/Administratio338LineIcon';
@@ -1477,24 +1478,24 @@ import ToggleOnIcon from './icons/Toggle/ToggleOnIcon';
 
 # Icons
 
-The `Icon` component is a collection of SVG icons exported as React components.
+A collection of icons exported as React components (SVG icons).
 
-## How to use?
+### How to use
 
 ```tsx
 import { AddIcon } from '@medly-components/icons';
 
 <AddIcon />;
 ```
 
-## Variants
+### Variants
 
-Two variants are available for all the icons: `solid` | `flat`.
+There are two variants available for all the icons `solid` | `flat`.
 
--   The `solid` variant will reserve the space around the icon to show the background color. You must use the `withHoverEffect` prop to show the hover effect.
--   The `flat` (default variant) will show the icon without the hover effect and space around it.
+-   `solid` variant will reserve the space around the icon to show the background color. Also you can use the `withHoverEffect` prop to show the hover effect also.
+-   `flat` (default variant) will show the icon without the hover effect and space around it.
 
-The `pointer` cursor appears when you pass the `onClick` prop.
+`pointer` cursor will only appear when you pass the `onClick` prop.
 
 <Preview>
     <Wrapper>
@@ -1512,15 +1513,13 @@ The `pointer` cursor appears when you pass the `onClick` prop.
     </Wrapper>
 </Preview>
 
-## Props
+### Props
 
-While none of the props are necessary, you can still style all the icons according to your requirement using the following props mentioned in the table below:
+None of the props is required but still you can style all the icons according to your requirement using below props.
 
 <Props of={IconProps} />
 
-## Theme
-
-This component offers the following themes mentioned in the table below:
+### Theme
 
 <Props of={ThemeInterface} />
 
@@ -6952,6 +6951,16 @@ This component offers the following themes mentioned in the table below:
                     hoverIconColor={color('Hover icon color', defaultTheme.icon.colors.hovered.iconColor)}
                     hoverBgColor={color('Hover background color', defaultTheme.icon.colors.hovered.bgColor)}
             />
+            <NoFileIcon 
+                    size={select('Size', sizes, 'M')}
+                    variant={select('Variant', variants, 'flat')}
+                    disabled={boolean('Disabled', false)}
+                    withHoverEffect={boolean('With hover efect', false)}
+                    iconColor={color('Icon Color', defaultTheme.icon.colors.default.iconColor)}
+                    bgColor={color('Background Color', defaultTheme.icon.colors.default.bgColor)}
+                    hoverIconColor={color('Hover icon color', defaultTheme.icon.colors.hovered.iconColor)}
+                    hoverBgColor={color('Hover background color', defaultTheme.icon.colors.hovered.bgColor)}
+            />
             <PrintIcon 
                     size={select('Size', sizes, 'M')}
                     variant={select('Variant', variants, 'flat')}

packages/icons/src/icons/File/NoFileIcon.tsx

@@ -0,0 +1,21 @@
+import { WithStyle } from '@medly-components/utils';
+import type { FC } from 'react';
+import { memo } from 'react';
+import SvgIcon, { SvgIconProps } from '../../SvgIcon';
+import NoFileIconSvg from '../../assets/File/no_file_24px.svg';
+
+const Component: FC<SvgIconProps> = memo(props => {
+    const { size, variant, iconColor, bgColor, hoverBgColor, hoverIconColor, withHoverEffect, margin, fillOpacity, ...restProps } = props;
+    return (
+        <SvgIcon
+            {...{ size, variant, iconColor, bgColor, hoverBgColor, hoverIconColor, withHoverEffect, margin, fillOpacity, ...restProps }}
+        >
+            <NoFileIconSvg {...restProps} width="1em" height="1em" />
+        </SvgIcon>
+    );
+});
+Component.displayName = 'NoFileIcon';
+
+const NoFileIcon: FC<SvgIconProps> & WithStyle = Object.assign(Component, { Style: SvgIcon });
+
+export default NoFileIcon;

packages/icons/src/index.ts

@@ -534,6 +534,7 @@ export { default as DownloadDoneIcon } from './icons/File/DownloadDoneIcon';
 export { default as FolderIcon } from './icons/File/FolderIcon';
 export { default as FolderOpenIcon } from './icons/File/FolderOpenIcon';
 export { default as FolderSharedIcon } from './icons/File/FolderSharedIcon';
+export { default as NoFileIcon } from './icons/File/NoFileIcon';
 export { default as PrintIcon } from './icons/File/PrintIcon';
 export { default as UploadIcon } from './icons/File/UploadIcon';
 export { default as Administratio338LineIcon } from './icons/GSDD/Administratio338LineIcon';