Add icon select to manual trigger (#12724)

## After

<img width="1220" alt="image"
src="https://github.com/user-attachments/assets/98a73aae-80d7-4e92-93d3-be13210da88b"
/>

<img width="1131" alt="image"
src="https://github.com/user-attachments/assets/9919e415-4355-4995-8979-9055b821f1e9"
/>

<img width="1300" alt="image"
src="https://github.com/user-attachments/assets/27f11cb3-d72c-468a-a641-8414172b9b54"
/>

<img width="1353" alt="image"
src="https://github.com/user-attachments/assets/2f0037f2-fe17-48b6-b7e6-c7528687a5fd"
/>

packages/twenty-front/src/modules/action-menu/actions/record-actions/run-workflow-actions/hooks/useRunWorkflowRecordActions.tsx

@@ -11,7 +11,8 @@ import { msg } from '@lingui/core/macro';
 
 import { useRecoilValue } from 'recoil';
 import { capitalize, isDefined } from 'twenty-shared/utils';
-import { IconSettingsAutomation } from 'twenty-ui/display';
+import { useIcons } from 'twenty-ui/display';
+import { COMMAND_MENU_DEFAULT_ICON } from '@/workflow/workflow-trigger/constants/CommandMenuDefaultIcon';
 
 export const useRunWorkflowRecordActions = ({
   objectMetadataItem,
@@ -20,6 +21,7 @@ export const useRunWorkflowRecordActions = ({
   objectMetadataItem: ObjectMetadataItem;
   skip?: boolean;
 }) => {
+  const { getIcon } = useIcons();
   const contextStoreTargetedRecordsRule = useRecoilComponentValueV2(
     contextStoreTargetedRecordsRuleComponentState,
   );
@@ -48,13 +50,18 @@ export const useRunWorkflowRecordActions = ({
     .map((activeWorkflowVersion, index) => {
       const name = capitalize(activeWorkflowVersion.workflow.name);
 
+      const Icon = getIcon(
+        activeWorkflowVersion.trigger?.settings.icon,
+        COMMAND_MENU_DEFAULT_ICON,
+      );
+
       return {
         type: ActionType.WorkflowRun,
         key: `workflow-run-${activeWorkflowVersion.id}`,
         scope: ActionScope.RecordSelection,
         label: msg`${name}`,
         position: index,
-        Icon: IconSettingsAutomation,
+        Icon,
         shouldBeRegistered: () => true,
         component: (
           <Action

packages/twenty-front/src/modules/action-menu/actions/record-agnostic-actions/run-workflow-actions/hooks/useRunWorkflowRecordAgnosticActions.tsx

@@ -7,9 +7,12 @@ import { useRunWorkflowVersion } from '@/workflow/hooks/useRunWorkflowVersion';
 import { msg } from '@lingui/core/macro';
 import { useContext } from 'react';
 import { capitalize, isDefined } from 'twenty-shared/utils';
-import { IconSettingsAutomation } from 'twenty-ui/display';
+import { useIcons } from 'twenty-ui/display';
+import { COMMAND_MENU_DEFAULT_ICON } from '@/workflow/workflow-trigger/constants/CommandMenuDefaultIcon';
 
 export const useRunWorkflowRecordAgnosticActions = () => {
+  const { getIcon } = useIcons();
+
   const { actionMenuType } = useContext(ActionMenuContext);
 
   const { records: activeWorkflowVersions } =
@@ -29,13 +32,18 @@ export const useRunWorkflowRecordAgnosticActions = () => {
 
       const name = capitalize(activeWorkflowVersion.workflow.name);
 
+      const Icon = getIcon(
+        activeWorkflowVersion.trigger?.settings.icon,
+        COMMAND_MENU_DEFAULT_ICON,
+      );
+
       return {
         type: ActionType.WorkflowRun,
         key: `workflow-run-${activeWorkflowVersion.id}`,
         scope: ActionScope.Global,
         label: msg`${name}`,
         position: index,
-        Icon: IconSettingsAutomation,
+        Icon,
         shouldBeRegistered: () => true,
         component: (
           <Action

packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { useMemo, useState } from 'react';
+import { ReactNode, useMemo, useState } from 'react';
 
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@@ -25,6 +25,8 @@ import {
   LightIconButton,
 } from 'twenty-ui/input';
 import { IconPickerHotkeyScope } from '../types/IconPickerHotkeyScope';
+import { DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset';
+
 export type IconPickerProps = {
   disabled?: boolean;
   dropdownId?: string;
@@ -36,6 +38,10 @@ export type IconPickerProps = {
   variant?: IconButtonVariant;
   className?: string;
   size?: IconButtonSize;
+  clickableComponent?: ReactNode;
+  dropdownWidth?: number;
+  dropdownOffset?: DropdownOffset;
+  maxIconsVisible?: number;
 };
 
 const StyledMenuIconItemsContainer = styled.div`
@@ -102,6 +108,10 @@ export const IconPicker = ({
   variant = 'secondary',
   className,
   size = 'medium',
+  clickableComponent,
+  dropdownWidth,
+  dropdownOffset,
+  maxIconsVisible = 25,
 }: IconPickerProps) => {
   const [searchString, setSearchString] = useState('');
   const {
@@ -171,9 +181,9 @@ export const IconPicker = ({
           ...filteredAndSortedIconKeys.filter(
             (iconKey) => iconKey !== selectedIconKey,
           ),
-        ].slice(0, 25)
+        ].slice(0, maxIconsVisible)
-      : filteredAndSortedIconKeys.slice(0, 25);
+      : filteredAndSortedIconKeys.slice(0, maxIconsVisible);
-  }, [icons, searchString, selectedIconKey]);
+  }, [icons, searchString, selectedIconKey, maxIconsVisible]);
 
   const iconKeys2d = useMemo(
     () => arrayToChunks(matchingSearchIconKeys.slice(), 5),
@@ -186,21 +196,26 @@ export const IconPicker = ({
     <div className={className}>
       <Dropdown
         dropdownId={dropdownId}
+        dropdownOffset={dropdownOffset}
         clickableComponent={
-          <IconButton
+          clickableComponent || (
-            ariaLabel={`Click to select icon ${
+            <IconButton
-              selectedIconKey
+              ariaLabel={`Click to select icon ${
-                ? `(selected: ${selectedIconKey})`
+                selectedIconKey
-                : `(no icon selected)`
+                  ? `(selected: ${selectedIconKey})`
-            }`}
+                  : `(no icon selected)`
-            disabled={disabled}
+              }`}
-            Icon={icon}
+              disabled={disabled}
-            variant={variant}
+              Icon={icon}
-            size={size}
+              variant={variant}
-          />
+              size={size}
+            />
+          )
         }
         dropdownComponents={
-          <DropdownContent widthInPixels={ICON_PICKER_DROPDOWN_CONTENT_WIDTH}>
+          <DropdownContent
+            widthInPixels={dropdownWidth || ICON_PICKER_DROPDOWN_CONTENT_WIDTH}
+          >
             <SelectableList
               selectableListInstanceId="icon-list"
               selectableItemIdMatrix={iconKeys2d}

packages/twenty-front/src/modules/ui/input/components/Select.tsx

@@ -41,6 +41,7 @@ export type SelectProps<Value extends SelectValue> = {
   emptyOption?: SelectOption<Value>;
   fullWidth?: boolean;
   label?: string;
+  description?: string;
   onChange?: (value: Value) => void;
   onBlur?: () => void;
   options: SelectOption<Value>[];
@@ -64,6 +65,11 @@ const StyledLabel = styled.span`
   margin-bottom: ${({ theme }) => theme.spacing(1)};
 `;
 
+const StyledDescription = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.sm};
+`;
+
 export const Select = <Value extends SelectValue>({
   className,
   disabled: disabledFromProps,
@@ -74,6 +80,7 @@ export const Select = <Value extends SelectValue>({
   emptyOption,
   fullWidth,
   label,
+  description,
   onChange,
   onBlur,
   options,
@@ -214,6 +221,7 @@ export const Select = <Value extends SelectValue>({
           }
         />
       )}
+      {!!description && <StyledDescription>{description}</StyledDescription>}
     </StyledContainer>
   );
 };

packages/twenty-front/src/modules/workflow/hooks/useActiveWorkflowVersionsWithManualTrigger.ts

@@ -3,7 +3,10 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { generateDepthOneRecordGqlFields } from '@/object-record/graphql/utils/generateDepthOneRecordGqlFields';
 import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
-import { Workflow, WorkflowVersion } from '@/workflow/types/Workflow';
+import {
+  ManualTriggerWorkflowVersion,
+  Workflow,
+} from '@/workflow/types/Workflow';
 import { isDefined } from 'twenty-shared/utils';
 
 export const useActiveWorkflowVersionsWithManualTrigger = ({
@@ -40,7 +43,7 @@ export const useActiveWorkflowVersionsWithManualTrigger = ({
     });
 
   const { records } = useFindManyRecords<
-    WorkflowVersion & { workflow: Workflow }
+    ManualTriggerWorkflowVersion & { workflow: Workflow }
   >({
     objectNameSingular: CoreObjectNameSingular.WorkflowVersion,
     filter: {

packages/twenty-front/src/modules/workflow/types/Workflow.ts

@@ -114,6 +114,10 @@ export type WorkflowVersion = {
   __typename: 'WorkflowVersion';
 };
 
+export type ManualTriggerWorkflowVersion = WorkflowVersion & {
+  trigger: WorkflowManualTrigger | null;
+};
+
 export type WorkflowRunOutput = z.infer<typeof workflowRunOutputSchema>;
 export type WorkflowExecutorOutput = z.infer<
   typeof workflowExecutorOutputSchema

packages/twenty-front/src/modules/workflow/validation-schemas/workflowSchema.ts

@@ -206,6 +206,7 @@ export const workflowManualTriggerSchema = baseTriggerSchema.extend({
   settings: z.object({
     objectType: z.string().optional(),
     outputSchema: z.object({}).passthrough(),
+    icon: z.string().optional(),
   }),
 });
 

packages/twenty-front/src/modules/workflow/workflow-trigger/components/WorkflowEditTriggerManualForm.tsx

@@ -16,6 +16,10 @@ import { isDefined } from 'twenty-shared/utils';
 import { useIcons } from 'twenty-ui/display';
 import { SelectOption } from 'twenty-ui/input';
 import { GenericDropdownContentWidth } from '@/ui/layout/dropdown/constants/GenericDropdownContentWidth';
+import { useLingui } from '@lingui/react/macro';
+import { IconPicker } from '@/ui/input/components/IconPicker';
+import { SelectControl } from '@/ui/input/components/SelectControl';
+import styled from '@emotion/styled';
 
 type WorkflowEditTriggerManualFormProps = {
   trigger: WorkflowManualTrigger;
@@ -30,11 +34,32 @@ type WorkflowEditTriggerManualFormProps = {
       };
 };
 
+const StyledLabel = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin-bottom: ${({ theme }) => theme.spacing(1)};
+`;
+
+const StyledDescription = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.sm};
+  margin-top: ${({ theme }) => theme.spacing(0.25)};
+`;
+
+const StyledIconPickerContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
 export const WorkflowEditTriggerManualForm = ({
   trigger,
   triggerOptions,
 }: WorkflowEditTriggerManualFormProps) => {
   const theme = useTheme();
+
+  const { t } = useLingui();
+
   const { getIcon } = useIcons();
 
   const { activeNonSystemObjectMetadataItems } =
@@ -47,16 +72,22 @@ export const WorkflowEditTriggerManualForm = ({
       Icon: getIcon(item.icon),
     }));
 
+  const objectType = trigger.settings.objectType;
+
   const manualTriggerAvailability: WorkflowManualTriggerAvailability =
-    isDefined(trigger.settings.objectType)
+    isDefined(objectType) ? 'WHEN_RECORD_SELECTED' : 'EVERYWHERE';
-      ? 'WHEN_RECORD_SELECTED'
-      : 'EVERYWHERE';
 
   const headerTitle = trigger.name ?? getTriggerDefaultLabel(trigger);
 
   const headerIcon = getTriggerIcon(trigger);
+
   const headerType = getTriggerHeaderType(trigger);
 
+  const availabilityDescriptions = {
+    WHEN_RECORD_SELECTED: t`Select a record then open the ⌘K to trigger this workflow`,
+    EVERYWHERE: t`Open the ⌘K to trigger this workflow`,
+  };
+
   return (
     <>
       <WorkflowStepHeader
@@ -78,8 +109,9 @@ export const WorkflowEditTriggerManualForm = ({
       />
       <WorkflowStepBody>
         <Select
-          dropdownId="workflow-edit-manual-trigger-availability"
+          dropdownId={'workflow-edit-manual-trigger-availability'}
-          label="Available"
+          label={t`Available`}
+          description={availabilityDescriptions[manualTriggerAvailability]}
           fullWidth
           disabled={triggerOptions.readonly}
           value={manualTriggerAvailability}
@@ -94,6 +126,7 @@ export const WorkflowEditTriggerManualForm = ({
               settings: getManualTriggerDefaultSettings({
                 availability: updatedTriggerType,
                 activeNonSystemObjectMetadataItems,
+                icon: trigger.settings.icon,
               }),
             });
           }}
@@ -103,10 +136,11 @@ export const WorkflowEditTriggerManualForm = ({
 
         {manualTriggerAvailability === 'WHEN_RECORD_SELECTED' ? (
           <Select
-            dropdownId="workflow-edit-manual-trigger-object"
+            dropdownId={'workflow-edit-manual-trigger-object'}
-            label="Object"
+            label={t`Object`}
+            description={t`Will return one ${objectType} to the next step of this workflow`}
             fullWidth
-            value={trigger.settings.objectType}
+            value={objectType}
             options={availableMetadata}
             disabled={triggerOptions.readonly}
             onChange={(updatedObject) => {
@@ -117,6 +151,7 @@ export const WorkflowEditTriggerManualForm = ({
               triggerOptions.onTriggerUpdate({
                 ...trigger,
                 settings: {
+                  ...trigger.settings,
                   objectType: updatedObject,
                   outputSchema: {},
                 },
@@ -126,6 +161,48 @@ export const WorkflowEditTriggerManualForm = ({
             dropdownWidth={GenericDropdownContentWidth.ExtraLarge}
           />
         ) : null}
+        <IconPicker
+          dropdownId={'workflow-edit-manual-trigger-icon'}
+          selectedIconKey={trigger.settings.icon}
+          dropdownOffset={{ y: -parseInt(theme.spacing(3), 10) }}
+          dropdownWidth={GenericDropdownContentWidth.ExtraLarge}
+          maxIconsVisible={9 * 8} // 9 columns * 8 lines
+          disabled={triggerOptions.readonly}
+          clickableComponent={
+            <StyledIconPickerContainer
+              onClick={(e) => {
+                if (triggerOptions.readonly === true) {
+                  e.stopPropagation();
+                  e.preventDefault();
+                }
+              }}
+            >
+              <StyledLabel>{t`Command menu icon`}</StyledLabel>
+              <SelectControl
+                isDisabled={triggerOptions.readonly}
+                selectedOption={{
+                  Icon: getIcon(trigger.settings.icon),
+                  value: trigger.settings.icon || null,
+                  label: '',
+                }}
+              />
+              <StyledDescription>{t`The icon your workflow trigger will display in the command menu`}</StyledDescription>
+            </StyledIconPickerContainer>
+          }
+          onChange={({ iconKey }) => {
+            if (triggerOptions.readonly === true) {
+              return;
+            }
+
+            triggerOptions.onTriggerUpdate({
+              ...trigger,
+              settings: {
+                ...trigger.settings,
+                icon: iconKey,
+              },
+            });
+          }}
+        />
       </WorkflowStepBody>
     </>
   );

packages/twenty-front/src/modules/workflow/workflow-trigger/constants/CommandMenuDefaultIcon.ts

@@ -0,0 +1 @@
+export const COMMAND_MENU_DEFAULT_ICON = 'IconHandMove';

packages/twenty-front/src/modules/workflow/workflow-trigger/constants/ManualTriggerAvailabilityOptions.ts

@@ -7,12 +7,12 @@ export const MANUAL_TRIGGER_AVAILABILITY_OPTIONS: Array<{
   Icon: IconComponent;
 }> = [
   {
-    label: 'When record(s) are selected',
+    label: 'When record is selected',
     value: 'WHEN_RECORD_SELECTED',
     Icon: IconCheckbox,
   },
   {
-    label: 'When no record(s) are selected',
+    label: 'When no record is selected',
     value: 'EVERYWHERE',
     Icon: IconSquare,
   },

packages/twenty-front/src/modules/workflow/workflow-trigger/utils/__tests__/getManualTriggerDefaultSettings.test.ts

@@ -1,5 +1,6 @@
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
 import { getManualTriggerDefaultSettings } from '../getManualTriggerDefaultSettings';
+import { COMMAND_MENU_DEFAULT_ICON } from '@/workflow/workflow-trigger/constants/CommandMenuDefaultIcon';
 
 it('returns settings for a manual trigger that can be activated from any where', () => {
   expect(
@@ -10,6 +11,7 @@ it('returns settings for a manual trigger that can be activated from any where',
   ).toStrictEqual({
     objectType: undefined,
     outputSchema: {},
+    icon: COMMAND_MENU_DEFAULT_ICON,
   });
 });
 
@@ -18,9 +20,11 @@ it('returns settings for a manual trigger that can be activated from any where',
     getManualTriggerDefaultSettings({
       availability: 'WHEN_RECORD_SELECTED',
       activeNonSystemObjectMetadataItems: generatedMockObjectMetadataItems,
+      icon: 'IconTest',
     }),
   ).toStrictEqual({
     objectType: generatedMockObjectMetadataItems[0].nameSingular,
     outputSchema: {},
+    icon: 'IconTest',
   });
 });

packages/twenty-front/src/modules/workflow/workflow-trigger/utils/__tests__/getTriggerDefaultDefinition.test.ts

@@ -1,6 +1,7 @@
 import { DatabaseTriggerDefaultLabel } from '@/workflow/workflow-trigger/constants/DatabaseTriggerDefaultLabel';
 import { generatedMockObjectMetadataItems } from '~/testing/mock-data/generatedMockObjectMetadataItems';
 import { getTriggerDefaultDefinition } from '../getTriggerDefaultDefinition';
+import { COMMAND_MENU_DEFAULT_ICON } from '@/workflow/workflow-trigger/constants/CommandMenuDefaultIcon';
 
 describe('getTriggerDefaultDefinition', () => {
   it('throws if the activeNonSystemObjectMetadataItems list is empty', () => {
@@ -94,6 +95,7 @@ describe('getTriggerDefaultDefinition', () => {
       settings: {
         objectType: generatedMockObjectMetadataItems[0].nameSingular,
         outputSchema: {},
+        icon: COMMAND_MENU_DEFAULT_ICON,
       },
     });
   });

packages/twenty-front/src/modules/workflow/workflow-trigger/utils/getManualTriggerDefaultSettings.ts

@@ -4,25 +4,30 @@ import {
   WorkflowManualTriggerSettings,
 } from '@/workflow/types/Workflow';
 import { assertUnreachable } from '@/workflow/utils/assertUnreachable';
+import { COMMAND_MENU_DEFAULT_ICON } from '@/workflow/workflow-trigger/constants/CommandMenuDefaultIcon';
 
 export const getManualTriggerDefaultSettings = ({
   availability,
   activeNonSystemObjectMetadataItems,
+  icon,
 }: {
   availability: WorkflowManualTriggerAvailability;
   activeNonSystemObjectMetadataItems: ObjectMetadataItem[];
+  icon?: string;
 }): WorkflowManualTriggerSettings => {
   switch (availability) {
     case 'EVERYWHERE': {
       return {
         objectType: undefined,
         outputSchema: {},
+        icon: icon || COMMAND_MENU_DEFAULT_ICON,
       };
     }
     case 'WHEN_RECORD_SELECTED': {
       return {
         objectType: activeNonSystemObjectMetadataItems[0].nameSingular,
         outputSchema: {},
+        icon: icon || COMMAND_MENU_DEFAULT_ICON,
       };
     }
   }

packages/twenty-server/src/engine/workspace-manager/standard-objects-prefill-data/prefill-workflows.ts

@@ -63,7 +63,7 @@ export const prefillWorkflows = async (
         trigger: JSON.stringify({
           name: 'Launch manually',
           type: 'MANUAL',
-          settings: { outputSchema: {} },
+          settings: { outputSchema: {}, icon: 'IconUserPlus' },
         }),
         steps: JSON.stringify([
           {

packages/twenty-server/src/modules/workflow/workflow-trigger/types/workflow-trigger.type.ts

@@ -20,7 +20,7 @@ type BaseTrigger = {
 
 export type WorkflowDatabaseEventTrigger = BaseTrigger & {
   type: WorkflowTriggerType.DATABASE_EVENT;
-  settings: {
+  settings: BaseWorkflowTriggerSettings & {
     eventName: string;
   };
 };
@@ -32,45 +32,49 @@ export enum WorkflowManualTriggerAvailability {
 
 export type WorkflowManualTrigger = BaseTrigger & {
   type: WorkflowTriggerType.MANUAL;
-  settings: {
+  settings: BaseWorkflowTriggerSettings & {
     objectType?: string;
+    icon?: string;
   };
 };
 
 export type WorkflowCronTrigger = BaseTrigger & {
   type: WorkflowTriggerType.CRON;
-  settings: (
+  settings: BaseWorkflowTriggerSettings &
-    | {
+    (
-        type: 'DAYS';
+      | {
-        schedule: { day: number; hour: number; minute: number };
+          type: 'DAYS';
-      }
+          schedule: { day: number; hour: number; minute: number };
-    | {
+        }
-        type: 'HOURS';
+      | {
-        schedule: { hour: number; minute: number };
+          type: 'HOURS';
-      }
+          schedule: { hour: number; minute: number };
-    | {
+        }
-        type: 'MINUTES';
+      | {
-        schedule: { minute: number };
+          type: 'MINUTES';
-      }
+          schedule: { minute: number };
-    | {
+        }
-        type: 'CUSTOM';
+      | {
-        pattern: string;
+          type: 'CUSTOM';
-      }
+          pattern: string;
-  ) & { outputSchema: object };
+        }
+    );
 };
 
 export type WorkflowWebhookTrigger = BaseTrigger & {
   type: WorkflowTriggerType.WEBHOOK;
-  settings:
+  settings: BaseWorkflowTriggerSettings &
-    | {
+    (
-        httpMethod: 'GET';
+      | {
-        authentication: 'API_KEY' | null;
+          httpMethod: 'GET';
-      }
+          authentication: 'API_KEY' | null;
-    | ({
+        }
-        httpMethod: 'POST';
+      | {
-        authentication: 'API_KEY' | null;
+          httpMethod: 'POST';
-        expectedBody: object;
+          authentication: 'API_KEY' | null;
-      } & { outputSchema: object });
+          expectedBody: object;
+        }
+    );
 };
 
 export type WorkflowManualTriggerSettings = WorkflowManualTrigger['settings'];

packages/twenty-ui/src/display/icon/hooks/useIcons.ts

@@ -11,12 +11,10 @@ export const useIcons = () => {
     return icons;
   };
 
-  const getIcon = (iconKey?: string | null) => {
+  const getIcon = (iconKey?: string | null, customDefaultIcon?: string) => {
-    if (!iconKey) {
+    return (
-      return defaultIcon;
+      icons[iconKey ?? ''] || icons[customDefaultIcon ?? ''] || defaultIcon
-    }
+    );
-
-    return icons[iconKey] ?? defaultIcon;
   };
 
   return { getIcons, getIcon };

packages/twenty-ui/src/display/icon/types/IconComponent.ts

@@ -1,7 +1,9 @@
 import { FunctionComponent } from 'react';
+import * as React from 'react';
 
 export type IconComponentProps = {
   className?: string;
+  style?: React.CSSProperties;
   size?: number | string;
   stroke?: number | string;
   color?: string;