Pathicon.tsx

import { Icon } from "@chakra-ui/react"
import * as icons from "@pathwright/pathicons"
import PropTypes from "prop-types"

const Pathicon = ({ name, ...props }) => {
  const componentName = componentNameFromIconName(name)
  const IconComponent = icons[componentName]
  if (!IconComponent) {
    console.warn(`Icon ${name} (${componentName}) not found`)
    return <Icon />
  }

  const boxSize = props.size ? `${props.size}px` : props.boxSize || undefined

  return <Icon boxSize={boxSize} as={IconComponent} alt={name} {...props} />
}

export const iconNameFromComponentName = componentName => {
  let name = componentName.replace("Icon", "")
  // split by capital letters
  const split = name.split(/(?=[A-Z])/)
  // join with hyphen
  name = split.join("-").toLowerCase()
  return name
}

export const componentNameFromIconName = iconName => {
  // split by hyphen
  const split = iconName.split("-")
  // capitalize each element
  const capitalized = split.map(
    word => word.charAt(0).toUpperCase() + word.slice(1)
  )
  // join with capital letters
  return `${capitalized.join("")}Icon`
}

export const iconNames = Object.keys(icons).map(name =>
  iconNameFromComponentName(name)
)

Pathicon.defaultProps = {
  size: 24,
  fill: "currentColor"
}

Pathicon.propTypes = {
  size: PropTypes.number,
  name: PropTypes.oneOf([...iconNames])
}

export default Pathicon