@vonlof/generate-icons NPM

Generate icons

The icons generator is used to optimize SVG files, and to generate typescript files (or a barrel). These icons can then be consumed (typed) by the ngx-icon component, go here more info about @vonlof/ngx-icons.

For a quick start please go here

Installation

Getting started with Generate icons is a breeze. Simply run one of the following commands:

  npm install --save-dev @vonlof/generate-icons

Or, if you prefer yarn:

  yarn add -D @vonlof/generate-icons

Usage

Setup generator

All you need to do is create a folder named ./app/src/icons (you can choose any directory you like), add a base config file (such as app/src/icons/.base-iconrc.json) with the following contents:

{
  "srcPath": "./app/src/icons/svg",
  "outputPath": "./app/src/icons/generated",
  "svgoConfig": {
    "plugins": [
      {
        "name": "preset-default"
      }
    ]
  }
}

For the svgo configuration please check out the svgo documentation.

Run script

Add your desired svg files to the app/src/icons/svg folder. Then, simply run:

generate-icons --config app/src/icons/.base-iconrc.json

This will improve your SVG files and convert them to TypeScript files, making them even easier to work with.

Svgo config

To get full control over the behaviour of our svg optimizations, you could add a file .iconrc.json (you can change the config name in base-iconrc.json with the overrideConfigName property) that will override the base config. For example if you have the following folder structure we could override the svgo config:

app
  /src
    /icons
      - .base-iconrc.json
      - svg
        - static
          - .iconrc.json <--- overrides the .base-iconrc.json
          - logo
        - outline
          - .iconrc.json <--- overrides the .base-iconrc.json
          - chevron-right.svg
        - solid
      - generated

As an example if you look at app/src/icons/svg/outline/.iconrc.json, and our base config removes the stroke attr from a svg. For our outline icons we still want to keep the stroke, but we want to remove the fill. So we could write something like this.

{
  "prefix": "outline",
  "svgoConfig": {
    "plugins": [
      {
        "name": "removeAttrs",
        "params": {
          "attrs": ["stroke", "fill", "color", "width", "height"]
        }
      },
      {
        "name": "addAttributesToSVGElement",
        "params": {
          "attribute": {
            "fill": "none",
            "stroke": "currentColor"
          }
        }
      }
    ]
  }
}

This is just a small example, but please check the demo in the repo to fully understand this behaviour. Now run the script again, it should generate/optimize the icons differently.

Config

The following properties can be added to the .base-iconrc.json and the overridable .iconrc.json.

key	type	default	description
srcPath	string	required*	The path where svg icons are located
outputPath	string	required*	The path where typescript icon files/barrel should be generated
barrel	boolean	false	If the output should be an index.ts barrel file or seperated files
prefix	string	-	Add prefix to the output icon file names f.e. ${prefix}ChevronDown - #{prefix}-chevron-down
suffix	string	-	Add suffix to the output icon file names f.e. chevronDown${suffix} - chevron-down-${suffix}
overrideConfigName	string	.iconrc.json	The file name to override the config in a sub directory
svgoConfig	object	default-preset	Please check the svgo documentation.