icon-name-type
CLI to generate TS file with IconName type.
Intro
Image a React (NextJS) project with following structure.
Icons stored by groups in folders named by icon size.
public/
images/
icons/
16/
chevron.svg
clockwise.svg
24/
arrow-left.svg
arrow-right.svg
There is an Icon component which accepts icon name property.
type IconName = '16/chevron' | '16/clockwise' | '24/arrow-left' | '24/arrow-right'
type IconProps = {
name: IconName
}
const Icon: React.FC<IconProps> = ({ name }) => (
<img src={`/images/svg/${name}`} />
)To automate process and avoid handwriting IconName type this package exists.
icon-name-type call will generate icons.d.ts file with content
export type IconName = '16/chevron' | '16/clockwise' | '24/arrow-left' | '24/arrow-right'
The Icon component's code can be simplified
import type { IconType } from './icons'
type IconProps = {
name: IconName
}
const Icon: React.FC<IconProps> = ({ name }) => (
<img src={`/images/svg/${name}`} />
)Generate types
icon-name-type --i ./public/images/svg --o ./src/components/Icon
Watch for input changes and generate types
icon-name-type --i .. --o .. --watch
Helpful scripts
Add this to your package.json scripts
"build-icons": "icon-name-type --i ./public/images/svg --o ./src/components/ui/Icon",
"watch-icons": "npm run build-icons -- --watch",