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;
}