fix: info icons

Author: eshankvaish

src/Assets/IconV2/ic-info-filled-override.svg

@@ -14,39 +14,30 @@
  * limitations under the License.
  */
 
-import { ReactComponent as ICWarning } from '@Icons/ic-warning.svg'
-import { ReactComponent as ICError } from '@Icons/ic-error.svg'
-import { ReactComponent as ICInfoFilledOverride } from '@Icons/ic-info-filled-override.svg'
 import { FormFieldInfoProps, FormInfoItemProps } from './types'
 import { getFormErrorElementId } from './utils'
+import { Icon } from '../Icon'
 
 const FormInfoItem = ({ id, text, icon, textClass }: FormInfoItemProps) => (
     <div className="flexbox dc__gap-4 fs-11 lh-16 fw-4" id={id}>
-        <span className="dc__no-shrink icon-dim-16 flex top dc__fill-available-space">{icon}</span>
+        <Icon name={icon} size={16} color={null} />
         <span className={`dc__ellipsis-right__2nd-line ${textClass}`}>{text}</span>
     </div>
 )
 
 const FormFieldInfo = ({ error, helperText, warningText, inputId }: FormFieldInfoProps) => (
     <div className="flex left column dc__gap-4">
-        {!!error && (
-            <FormInfoItem text={error} icon={<ICError />} textClass="cr-5" id={getFormErrorElementId(inputId)} />
-        )}
+        {!!error && <FormInfoItem text={error} icon="ic-error" textClass="cr-5" id={getFormErrorElementId(inputId)} />}
         {!!helperText && (
             <FormInfoItem
                 text={helperText}
-                icon={<ICInfoFilledOverride className="info-icon-n6" />}
+                icon="ic-info-filled-override"
                 textClass="cn-7"
                 id={`${inputId}-helper-text`}
             />
         )}
         {!!warningText && (
-            <FormInfoItem
-                text={warningText}
-                icon={<ICWarning className="warning-icon-y7" />}
-                textClass="cy-7"
-                id={`${inputId}-warning-msg`}
-            />
+            <FormInfoItem text={warningText} icon="ic-warning" textClass="cy-7" id={`${inputId}-warning-msg`} />
         )}
     </div>
 )

src/Assets/IconV2/ic-warning.svg

@@ -18,6 +18,7 @@ import { ReactElement, ReactNode } from 'react'
 import { TooltipProps } from '@Common/Tooltip'
 import { InfoIconTippyProps } from '@Common/Types'
 import { BorderConfigType, ComponentLayoutType } from '@Shared/types'
+import { IconsProps } from '../Icon'
 
 export type LabelOrAriaLabelType =
     | {
@@ -78,7 +79,7 @@ export interface FormInfoItemProps {
     id: FormFieldLabelProps['inputId']
     text: FormFieldInfoProps['error']
     textClass: string
-    icon: ReactElement
+    icon: IconsProps['name']
 }
 
 export interface FormFieldWrapperProps

src/Shared/Components/FormFieldWrapper/FormFieldInfo.tsx

@@ -27,6 +27,7 @@ import { ReactComponent as ICHeartRedAnimated } from '@IconsV2/ic-heart-red-anim
 import { ReactComponent as ICHeartRed } from '@IconsV2/ic-heart-red.svg'
 import { ReactComponent as ICHibernate } from '@IconsV2/ic-hibernate.svg'
 import { ReactComponent as ICInProgress } from '@IconsV2/ic-in-progress.svg'
+import { ReactComponent as ICInfoFilledOverride } from '@IconsV2/ic-info-filled-override.svg'
 import { ReactComponent as ICInfoOutline } from '@IconsV2/ic-info-outline.svg'
 import { ReactComponent as ICJobColor } from '@IconsV2/ic-job-color.svg'
 import { ReactComponent as ICMissing } from '@IconsV2/ic-missing.svg'
@@ -39,6 +40,7 @@ import { ReactComponent as ICSuccess } from '@IconsV2/ic-success.svg'
 import { ReactComponent as ICSuspended } from '@IconsV2/ic-suspended.svg'
 import { ReactComponent as ICTimeoutTwoDash } from '@IconsV2/ic-timeout-two-dash.svg'
 import { ReactComponent as ICUnknown } from '@IconsV2/ic-unknown.svg'
+import { ReactComponent as ICWarning } from '@IconsV2/ic-warning.svg'
 
 // eslint-disable-next-line no-restricted-imports
 import { IconBase } from './IconBase'
@@ -72,6 +74,7 @@ export const iconMap = {
     'ic-heart-red': ICHeartRed,
     'ic-hibernate': ICHibernate,
     'ic-in-progress': ICInProgress,
+    'ic-info-filled-override': ICInfoFilledOverride,
     'ic-info-outline': ICInfoOutline,
     'ic-job-color': ICJobColor,
     'ic-missing': ICMissing,
@@ -84,6 +87,7 @@ export const iconMap = {
     'ic-suspended': ICSuspended,
     'ic-timeout-two-dash': ICTimeoutTwoDash,
     'ic-unknown': ICUnknown,
+    'ic-warning': ICWarning,
 }
 
 export type IconName = keyof typeof iconMap