chore: icon imported

Author: shivani170

src/Assets/IconV2/ic-help-filled.svg

@@ -27,7 +27,7 @@
         max-height: 200px;
         width: auto;
     }
-    .button, .override-generic-empty svg {
+    .button, .override-empty-svg-dim svg {
         height: 100%;
         max-height: none;
         width: 100%;

src/Common/EmptyState/emptyState.scss

@@ -59,6 +59,7 @@ import { ReactComponent as ICHeartGreen } from '@IconsV2/ic-heart-green.svg'
 import { ReactComponent as ICHeartRed } from '@IconsV2/ic-heart-red.svg'
 import { ReactComponent as ICHeartRedAnimated } from '@IconsV2/ic-heart-red-animated.svg'
 import { ReactComponent as ICHelm } from '@IconsV2/ic-helm.svg'
+import { ReactComponent as ICHelpFilled } from '@IconsV2/ic-help-filled.svg'
 import { ReactComponent as ICHelpOutline } from '@IconsV2/ic-help-outline.svg'
 import { ReactComponent as ICHibernate } from '@IconsV2/ic-hibernate.svg'
 import { ReactComponent as ICInProgress } from '@IconsV2/ic-in-progress.svg'
@@ -172,6 +173,7 @@ export const iconMap = {
     'ic-heart-red-animated': ICHeartRedAnimated,
     'ic-heart-red': ICHeartRed,
     'ic-helm': ICHelm,
+    'ic-help-filled': ICHelpFilled,
     'ic-help-outline': ICHelpOutline,
     'ic-hibernate': ICHibernate,
     'ic-in-progress': ICInProgress,

src/Shared/Components/Icon/Icon.tsx

@@ -38,7 +38,7 @@ const InfoBlock = ({
     borderRadiusConfig,
     borderConfig,
 }: InfoBlockProps) => {
-    const baseContainerClass = `${CONTAINER_SIZE_TO_CLASS_MAP[size]} ${VARIANT_TO_BG_MAP[variant]} ${deriveBorderRadiusAndBorderClassFromConfig({ borderConfig, borderRadiusConfig })} w-100 py-8 br-4 bw-1`
+    const baseContainerClass = `override-empty-svg-dim ${CONTAINER_SIZE_TO_CLASS_MAP[size]} ${VARIANT_TO_BG_MAP[variant]} ${deriveBorderRadiusAndBorderClassFromConfig({ borderConfig, borderRadiusConfig })} w-100 py-8 br-4 bw-1`
     const iconClass = `dc__no-shrink flex dc__fill-available-space ${SIZE_TO_ICON_CLASS_MAP[size]}`
     const icon = customIcon ?? VARIANT_TO_ICON_MAP[variant]
 
@@ -94,7 +94,7 @@ const InfoBlock = ({
 
     if (layout === 'row') {
         return (
-            <div className={`${baseContainerClass} override-generic-empty flexbox dc__gap-16`}>
+            <div className={`${baseContainerClass} flexbox dc__gap-16`}>
                 <div className="flexbox dc__gap-8 flex-grow-1">
                     {renderIcon()}
                     {renderContent()}
@@ -107,7 +107,7 @@ const InfoBlock = ({
 
     if (layout === 'column') {
         return (
-            <div className={`${baseContainerClass} override-generic-empty flexbox-col dc__gap-8`}>
+            <div className={`${baseContainerClass} flexbox-col dc__gap-8`}>
                 <div className="flexbox dc__gap-8">
                     {renderContent()}
                     {renderIcon()}

src/Shared/Components/InfoBlock/InfoBlock.component.tsx

@@ -14,10 +14,6 @@
  * limitations under the License.
  */
 
-import { ReactComponent as ICError } from '@Icons/ic-error.svg'
-import { ReactComponent as ICHelp } from '@Icons/ic-help.svg'
-import { ReactComponent as ICSuccess } from '@Icons/ic-success.svg'
-import { ReactComponent as ICWarningY5 } from '@Icons/ic-warning-y5.svg'
 import { ComponentSizeType } from '@Shared/constants'
 
 import { ButtonProps } from '../Button'
@@ -34,11 +30,11 @@ export const VARIANT_TO_BG_MAP: Record<InfoBlockProps['variant'], string> = {
 }
 
 export const VARIANT_TO_ICON_MAP: Record<InfoBlockProps['variant'], InfoBlockProps['customIcon']> = {
-    error: <ICError />,
-    help: <ICHelp className="fcv-5" />,
+    error: <Icon name="ic-error" color="R500" />,
+    help: <Icon name="ic-help-outline" color="V500" />,
     information: <Icon name="ic-info-filled" color="B500" />,
-    success: <ICSuccess />,
-    warning: <ICWarningY5 />,
+    success: <Icon name="ic-success" color="G500" />,
+    warning: <Icon name="ic-warning" color="Y500" />,
     neutral: <Icon name="ic-info-filled" color={null} />,
 }