Icon Typification

Script to auto generate a union type for your icons.

Why?

We got tired to lookup all the icons inside app and extend the type on our own.

Get Started

Install Package

npm i @reactive-solutions/icon-typification

Prepare package.json

{
    ...
    "scripts": {
        "extract-icons": "ts-node ./node_modules/@reactive-solutions/icon-typification/extract-icons.ts --type-name=MyAppIconType ..."
    ...
}

Run script

npm run extract-icons

Sample Run

- src
  - assets
    - icons
      - user-icon.svg
      - add-icon.svg

> ts-node ./node_modules/@reactive-solutions/icon-typification/extract-icons.ts --type-name=MyAppIconType --source=src/assets/icons --extension=svg --suffix=icon

user
add
done.

Sample Output

export type MyAppIconType =
'user' |
'add';

Parameters

Parameter	Type	Default	Description
type-name	string	IconType	Typescript type name for icons.
source	string	./src/assets/icons	Icon source directory
extension	string	svg	Icon file extension without '.'
output	string	./src/app/shared	Target directory for output file
filename	string	custom-icon	Target file name without extension
prefix	string	null	Icon file prefix like "icon-add.svg". Prefix will be removed
suffix	string	null	Icon file suffix like "add-icon.svg". Suffix will be removed

Use Case

@Component({
  selector: 'rs-icon',
  templateUrl: './icon.component.html'
})
export class IconComponent {
  @Input() icon: MyAppIconType;
}