Pass component and add style to it with solidjs and TypeScript

I have several icons in my web application which look like this:

type IconProps = ComponentProps<"svg">

const Icon = (props: IconProps) => {
  const [, rest] = splitProps(props, ["class"])
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class={cn("", props.class)}
      {...rest}
    />
  )
}

export function IconUser(props: IconProps) {
  return (
    <Icon {...props}>
      <path .... />
    </Icon>
  )
}

Next I want to write the following component to receive one of the various icons and render it. However I need the ability to add the style prop to the given icon.

export const SettingButton = (props: {
    title: string;
    icon: ?; // JSX.Element maybe? 
    onPress: () => void;
}) => {


const { hovering, hoveringProps } = useHovering();
    const responsive = useResponsiveV2();
    const color = () => {
        if (hovering()) {
            return c.colors.text.secondary;
        }
        return c.colors.text.tertiary;
    };
    return (
    ? // {props.icon} works but I want to add the style prop to it here
// Ideally {props.icon style={{color: color()}}}
)

// Usage: <SettingButton title={"Test"} icon={<IconUser />} onPress={() => {}} />

Please note that I am using solidjs so to my knowledge cloneElement is not available.

Also I know I could wrap this in a div and apply the style there but I am wondering how to do it right.