Using a single component to add any icons without importing all

[alic-xc]

Hi,

Thanks for this great package. I would like to ask if there is a component to use that prevents us from importing any icons we want to use.

`

`

[ace-builds]

Hi, this issue description isn't clear. Can you rephrase so others can understand?

[alic-xc]

Hi, this issue description isn't clear. Can you rephrase so others can understand?

Instead of importing any components, can't we just have a single component that we can use to specify any font icon?

[esamueljsx]

Hi, this issue description isn't clear. Can you rephrase so others can understand?

Instead of importing any components, can't we just have a single component that we can use to specify any font icon?

Exacly

A feature like that would be helpful when one is getting these icon from an array of items

[Brunowilliang]

@alic-xc @Samandcode Hi guys, I did it this way, I believe you can use it this way too.

import React, { forwardRef } from 'react'
import { SvgProps } from 'react-native-svg'
import * as Icons from 'iconsax-react-native'
import { ThemeTokens, styled } from 'tamagui'

export interface IconProps extends SvgProps {
  name: keyof typeof Icons
  weight?: 'Linear' | 'Outline' | 'Broken' | 'Bold' | 'Bulk' | 'TwoTone'
  color?: ThemeTokens
  size?: string | number
}

const DynamicIcon = forwardRef<
  React.ElementRef<(typeof Icons)[keyof typeof Icons]>,
  IconProps
>(({ name, weight, ...props }, ref) => {
  const IconComponent = Icons[name]
  if (!IconComponent) {
    return null
  }

  return <IconComponent ref={ref} variant={weight} {...props} />
})

// @ts-ignore
const Icon = styled(DynamicIcon, {})

export default Icon

[esamueljsx]

I’ll check it out 👏🏼👏🏼