0

I can currently code SVGs in React-Native (typescript). This allows me to call them as individual react native components. Here's a made up example of what I can currently do:

<View>
    <BackArrow 
         color ="red"
         width = {10}
         height = {10}
    />
</View>

However, what I want is to have an "Icon" type with a set few accepted names that output SVGs. This is an example of what I'd like to return that would give the same output:

<View>
    <Icon
     name = "backArrow"
     color = "red"
     width = {10}
     height = {10}
    />
</View>

Is there a way to do this?

Adrian Mole
  • 49,934
  • 160
  • 51
  • 83
Harry
  • 11
  • 2

1 Answers1

0

One way I've seen this be accomplished in to have a mapping function in your Icon component that leverages lazy loading

const icons = {
 backArrow: <BackArrow />
}

const Icon = ({name, ...otherProps}) => React.createElement(
  icons[name],
  [...otherProps],
  null
)