Привет, можете помочь с типами, хочу создать универсальную функцию для

создания компонента иконки, чтобы удобно было использовать в разных местах, со своим набором иконок (спрайтом)
то есть по итогу я хочу вывести тип name в зависимости от переданого iconTypeToIconViewBoxMap, я сделал так но это не правильно получается


//CreateIcon
import * as React from 'react'

type IconProps<TIconName> = {
name: TIconName
width?: number | 'auto'
height?: number | 'auto'
className?: string
}

type CreateIcon<TIconTypeToIconViewBoxMap extends Record<string, string>> = (
iconTypeToIconViewBoxMap: TIconTypeToIconViewBoxMap,
iconSpritePath: string,
) => React.FunctionComponent<IconProps<keyof TIconTypeToIconViewBoxMap>>

export const createIcon: CreateIcon<T> = (
iconTypeToIconViewBoxMap,
iconSpritePath,
): React.FunctionComponent<IconProps<T>> => {
return function Icon({ name, width = 'auto', height = 'auto', className }) {
return (
<svg
className={className}
viewBox={iconTypeToIconViewBoxMap[name]}
aria-hidden
width={width}
height={height}
>
<use href={iconSpritePath} />
</svg>
)
}
}

const ICON_TYPE_TO_ICON_VIEW_BOX = {
icon1: '0 0 17 17',
icon2: '0 0 17 17',

}

// Application code
const CustomIcon = createIcon(ICON_TYPE_TO_ICON_VIEW_BOX, '')

const Test = () => <CustomIcon name="" />

Лёша Рубцов
похоже?

нет, мне нужно именно MAP передать и на его основе вывести имя (на основе ключей этой мапы)

Лёша Рубцов
похоже?

о спаибо, направление хорошее было) type IconProps<TIconName> = { name: TIconName width?: number | 'auto' height?: number | 'auto' className?: string } export const createIcon = < TIconTypeToIconViewBoxMap extends Record<string, string>, >( iconTypeToIconViewBoxMap: TIconTypeToIconViewBoxMap, iconSpritePath: string, ) => { return function Icon({ name, width = 'auto', height = 'auto', className, }: IconProps<keyof TIconTypeToIconViewBoxMap>) { return ( <svg className={className} viewBox={iconTypeToIconViewBoxMap[name]} aria-hidden width={width} height={height} > <use href={iconSpritePath} /> </svg> ) } }