Suggestion: Default Export

[a-y-u-s-h]

Hi, I love the icons. To change them faster in the application I created this component, which could be default export of the application maybe. It simply returns the appropriate component after searching in all exports.

import * as Icons from "@modulz/radix-icons"

export const Icon = React.forwardRef(({ children, name, ...props }, ref) => {
  if (name) {
    const capitalize = s => s.charAt(0).toUpperCase() + s.slice(1)
    const modified = name
      .split(" ")
      .map(e => capitalize(e))
      .join("")
    const id = `${modified}Icon`
    const available = Object.keys(Icons)
    if (available.includes(id)) {
      const Icon_ = Icons[id]
      return (
        <Icon_ {...props} ref={ref}>
          {children}
        </Icon_>
      )
    }
  }
  return <></>
})

export default Icon

Usage:

<Icon name="layers" />
<Icon name="zoom in" />

[vladmoroz]

Hey, thanks for the suggestion! I have also experienced that it might feel a bit cumbersome to change out the imported icons quickly.

I’d recommend this import style if you want a quick developer experience:

import * as Icons from "@modulz/radix-icons"

function MyComponent () { 
  return <Icons.LayersIcon />
}

This enables code editor autocompletion as you type the icon name and will work out better with TypeScript in case we introduce size or variant props for certain icons.