chore: add new strategy icons (#10665)

https://linear.app/unleash/issue/2-3879/add-new-strategy-icons

Adds new strategy icons in the new "add strategy" modal.

<img width="983" height="564" alt="image"
src="https://github.com/user-attachments/assets/dc39379d-f8c0-41ec-9510-61b6115acfa5"
/>

<img width="988" height="565" alt="image"
src="https://github.com/user-attachments/assets/dba642f1-bf37-4e49-906d-dcd88fdaf1e0"
/>

frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx

@@ -6,8 +6,8 @@ const StyledIcon = styled('div')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     '& > svg': {
-        width: theme.spacing(3.5),
-        height: theme.spacing(3.5),
+        width: theme.spacing(6),
+        height: theme.spacing(6),
         fill: theme.palette.primary.main,
     },
 }));

frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCardIcon.tsx

@@ -0,0 +1,32 @@
+import { ReactComponent as StrategyDefaultIcon } from 'assets/img/strategyDefault.svg';
+import { ReactComponent as StrategyGradualIcon } from 'assets/img/strategyGradual.svg';
+import { ReactComponent as StrategyIPsIcon } from 'assets/img/strategyIPs.svg';
+import { ReactComponent as StrategyOnIcon } from 'assets/img/strategyOn.svg';
+import { ReactComponent as ReleaseTemplateIcon } from 'assets/img/releaseTemplates.svg';
+import { ReactComponent as StrategyHostsIcon } from 'assets/img/strategyHosts.svg';
+import { ReactComponent as StrategyCustomIcon } from 'assets/img/strategyCustom.svg';
+
+interface IFeatureStrategyMenuCardIconProps {
+    name: string;
+}
+
+export const FeatureStrategyMenuCardIcon = ({
+    name,
+}: IFeatureStrategyMenuCardIconProps) => {
+    switch (name) {
+        case 'defaultStrategy':
+            return <StrategyDefaultIcon />;
+        case 'default':
+            return <StrategyOnIcon />;
+        case 'flexibleRollout':
+            return <StrategyGradualIcon />;
+        case 'remoteAddress':
+            return <StrategyIPsIcon />;
+        case 'applicationHostname':
+            return <StrategyHostsIcon />;
+        case 'releasePlanTemplate':
+            return <ReleaseTemplateIcon />;
+        default:
+            return <StrategyCustomIcon />;
+    }
+};

frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx

@@ -19,15 +19,13 @@ import {
     UPDATE_PROJECT,
 } from 'component/providers/AccessProvider/permissions.ts';
 import AccessContext from 'contexts/AccessContext.ts';
-import {
-    formatStrategyName,
-    getFeatureStrategyIcon,
-} from 'utils/strategyNames.tsx';
+import { formatStrategyName } from 'utils/strategyNames.tsx';
 import { FeatureStrategyMenuCardAction } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCardAction.tsx';
 import { formatCreateStrategyPath } from '../../FeatureStrategyCreate/FeatureStrategyCreate.tsx';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker.ts';
 import { FeatureStrategyMenuCardsDefaultStrategy } from './FeatureStrategyMenuCardsDefaultStrategy.tsx';
 import type { IStrategy } from 'interfaces/strategy.ts';
+import { FeatureStrategyMenuCardIcon } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCardIcon.tsx';
 
 const FILTERS = [
     { label: 'All', value: null },
@@ -162,14 +160,13 @@ export const FeatureStrategyMenuCards = ({
 
     const renderStrategy = (strategy: IStrategy) => {
         const name = strategy.displayName || formatStrategyName(strategy.name);
-        const Icon = getFeatureStrategyIcon(strategy.name);
 
         return (
             <FeatureStrategyMenuCard
                 key={strategy.name}
                 name={name}
                 description={strategy.description}
-                icon={<Icon />}
+                icon={<FeatureStrategyMenuCardIcon name={strategy.name} />}
             >
                 <FeatureStrategyMenuCardAction
                     onClick={() =>

frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCardsDefaultStrategy.tsx

@@ -7,7 +7,7 @@ import useToast from 'hooks/useToast.tsx';
 import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
 import { FeatureStrategyMenuCard } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx';
 import { FeatureStrategyMenuCardAction } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCardAction.tsx';
-import { getFeatureStrategyIcon } from 'utils/strategyNames.tsx';
+import { FeatureStrategyMenuCardIcon } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCardIcon.tsx';
 
 interface IFeatureStrategyMenuCardsDefaultStrategyProps {
     projectId: string;
@@ -95,13 +95,11 @@ export const FeatureStrategyMenuCardsDefaultStrategy = ({
         projectDefaultStrategy.title ||
         'This is the default strategy defined for this environment in the project';
 
-    const Icon = getFeatureStrategyIcon(strategyName);
-
     return (
         <FeatureStrategyMenuCard
             name={strategyDisplayName}
             description={description}
-            icon={<Icon />}
+            icon={<FeatureStrategyMenuCardIcon name='defaultStrategy' />}
             isDefault
         >
             <FeatureStrategyMenuCardAction

frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCardsReleaseTemplates.tsx

@@ -10,9 +10,9 @@ import {
     FeatureStrategyMenuCardsSection,
     StyledStrategyModalSectionHeader,
 } from './FeatureStrategyMenuCardsSection.tsx';
-import { getFeatureStrategyIcon } from 'utils/strategyNames.tsx';
 import { FeatureStrategyMenuCard } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx';
 import { FeatureStrategyMenuCardAction } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCardAction.tsx';
+import { FeatureStrategyMenuCardIcon } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCardIcon.tsx';
 
 const RELEASE_TEMPLATE_DISPLAY_LIMIT = 5;
 
@@ -115,8 +115,6 @@ export const FeatureStrategyMenuCardsReleaseTemplates = ({
         ? templates
         : templates.slice(0, RELEASE_TEMPLATE_DISPLAY_LIMIT);
 
-    const Icon = getFeatureStrategyIcon('releasePlanTemplate');
-
     return (
         <Box>
             {shouldShowHeader && (
@@ -158,7 +156,9 @@ export const FeatureStrategyMenuCardsReleaseTemplates = ({
                             key={template.id}
                             name={template.name}
                             description={template.description}
-                            icon={<Icon />}
+                            icon={
+                                <FeatureStrategyMenuCardIcon name='releasePlanTemplate' />
+                            }
                         >
                             <FeatureStrategyMenuCardAction
                                 onClick={() => onReviewReleasePlan(template)}