[Code Snippet] A simple shared util for styled icon

[fluid-design-io]

Just wanted to share a util file I created to use icons with uniwind, as well as a functional approach if needed, for example:

import { StyledMaterialCommunityIcons, styledIcon } from '@/components/ui/styled-icon'

<StyledMaterialCommunityIcons name="cart-outline" size={20} className="text-muted" />

// OR

{styledIcon({ family: 'materialcommunityicons', name: 'cart-outline' })({
	 className: 'text-muted',
	 size: 20,
})}

Code src/components/ui, feel free to extend to other icon libs as well

import { Feather, FontAwesome6, MaterialCommunityIcons, Octicons } from '@expo/vector-icons'
import type { ComponentProps, ReactNode } from 'react'
import { withUniwind } from 'uniwind'

export const StyledFeatherIcon = withUniwind(Feather)
export const StyledFontAwesome6Icon = withUniwind(FontAwesome6)
export const StyledOctIcon = withUniwind(Octicons)
export const StyledMaterialCommunityIcons = withUniwind(MaterialCommunityIcons)

type FeatherIconName = ComponentProps<typeof Feather>['name']
type FontAwesome6IconName = ComponentProps<typeof FontAwesome6>['name']
type OctIconName = ComponentProps<typeof Octicons>['name']
type MaterialCommunityIconsName = ComponentProps<typeof MaterialCommunityIcons>['name']

/** Config for styledIcon: family + name. Name is type-safe per family. */
export type StyledIconConfig =
	| { family: 'feather'; name: FeatherIconName }
	| { family: 'fontawesome6'; name: FontAwesome6IconName }
	| { family: 'octicons'; name: OctIconName }
	| { family: 'materialcommunityicons'; name: MaterialCommunityIconsName }

/** Props passed to the icon component (size and className). */
export type StyledIconProps = {
	size?: number
	className?: string
}

/** Icon component returned by styledIcon (e.g. for quick actions or lists). */
export type StyledIconComponent = (props?: StyledIconProps) => ReactNode

/**
 * Returns a styled icon component for the given family and name.
 * Use for list items, headers, or anywhere you need a Feather, FontAwesome6, Octicons, or MaterialCommunityIcons icon.
 * TypeScript will enforce valid icon names per family.
 *
 * @example
 * const BookIcon = styledIcon({ family: 'feather', name: 'book' })
 * const LyftIcon = styledIcon({ family: 'fontawesome6', name: 'lyft' })
 */
export function styledIcon(config: StyledIconConfig): StyledIconComponent {
	const iconComponent: StyledIconComponent = ({ size = 22, className }: StyledIconProps = {}) => {
		switch (config.family) {
			case 'feather':
				return <StyledFeatherIcon name={config.name} size={size} className={className} />
			case 'fontawesome6':
				return <StyledFontAwesome6Icon name={config.name} size={size} className={className} />
			case 'octicons':
				return <StyledOctIcon name={config.name} size={size} className={className} />
			case 'materialcommunityicons':
				return <StyledMaterialCommunityIcons name={config.name} size={size} className={className} />
		}
	}
	Object.assign(iconComponent, { displayName: `${config.family}-${String(config.name)}-icon` })
	return iconComponent
}

/** Feather icon helper. Prefer styledIcon({ family: 'feather', name }) for consistency. */
export function featherIcon(name: FeatherIconName): StyledIconComponent {
	return styledIcon({ family: 'feather', name })
}

/** FontAwesome6 icon helper. Prefer styledIcon({ family: 'fontawesome6', name }) for consistency. */
export function fontAwesome6Icon(name: FontAwesome6IconName): StyledIconComponent {
	return styledIcon({ family: 'fontawesome6', name })
}

/** Octicons icon helper. Prefer styledIcon({ family: 'octicons', name }) for consistency. */
export function octiconsIcon(name: OctIconName): StyledIconComponent {
	return styledIcon({ family: 'octicons', name })
}

/** MaterialIcons icon helper. Prefer styledIcon({ family: 'materialicons', name }) for consistency. */
export function materialCommunityIconsIcon(name: MaterialCommunityIconsName): StyledIconComponent {
	return styledIcon({ family: 'materialcommunityicons', name })
}