aykutkardas / svgps.app

SVGPS converts your icons into a single JSON file that is ready to use in your frontend or mobile projects.
https://svgps.app
MIT License
292 stars 22 forks source link

Add export icon types feature for typescript users #287

Closed bufgix closed 1 year ago

bufgix commented 1 year ago

Users can now benefit from type support when passing the icon prop to the Icon component. I created a type that can be exported based on the names of all icons using a simple button.

Generated TS file:

export type IconNames =
  | 'logout'
  | 'dots-three-vertical'
  | 'package'
  | 'preact'
// ...
// ..
  | 'trash'
  | 'filetype-tsx';

Usage

import IcoMoon, { IconProps } from 'react-icomoon';
import { Svg, Path } from "react-native-svg";
import iconSet from "./selection.json";
import { IconNames } from './TypedIconProps';

type MyIconProps = {
    icon: IconNames
} & IconProps

const Icon = (props) => (
  <IcoMoon
    iconSet={iconSet} 
    native
    SvgComponent={Svg}
    PathComponent={Path} 
    {...props}
  />
);

<Icon name={'dots-three-vertical'} />
       // ^ 'dots-three-vertical' | 'logout' | 'package' | 'preact' ///
image

Desing

image
aykutkardas commented 1 year ago

Thanks for this good contribution, it can be merged after some editing. ✨ @bufgix