Regression: Not possible to provide array of source paths for icon generation

[kbrilla]

I'm submitting a...

[x] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

You are not allowed to provide an array of source paths for icon generation, it was possible before your own svg-generator.

Expected behavior

You can provide an array of source paths for icons.

Minimal repoduction

old:

"svg-to-ts": {
    "conversionType": "object",
    "srcFiles": [   
      "./src/assets/svg/*.svg" ,
     "./node_modules/some_lib/assets/svg/*.svg"
    ],
    "outputDirectory": "./src/assets/svg",
    "fileName": "svg-icons",
    "svgoConfig": {
      "plugins": [
        {
          "removeDimensions": true,
          "cleanupAttrs": true
        }
      ]
    }
  }

new:

"svgGenerator": {
    "outputPath": "./src/app/svg",
    "prefix": "app",
    "srcPath": "./src/assets/svg", // Array will throw error
    "svgoConfig": {
      "plugins": [
        {
          "removeDimensions": true,
          "cleanupAttrs": true
        }
      ]
    }
  }

What is the motivation/use case for changing the behavior?

For example generation of icons from node_modules and project assets.

Environment

[NetanelBasal]

You can use svg-to-ts.

[elliottregan]

@NetanelBasal Would you accept a PR that re-implements this functionality? I was also looking to add multiples paths for the same reason.

[NetanelBasal]

Yes

[elliottregan]

@criskrzysiu I was able to add multiple file paths using the Webpack plugin. Works out really nicely, and there's no extra build step.

// webpack.config.ts

import { Configuration } from 'webpack';
// @ts-ignore
import { SvgGeneratorWebpackPlugin } from '@ngneat/svg-generator/webpack-plugin';

export default {
  plugins: [
    new SvgGeneratorWebpackPlugin({
      srcPath: './node_modules/@fortawesome/fontawesome-pro/svgs',
      outputPath: './src/app/svg/fontawesome/brands',
      svgoConfig: {
        plugins: [
          "removeDimensions"
        ],
      },
    }),
    new SvgGeneratorWebpackPlugin({
      srcPath: './src/assets/custom-svgs',
      outputPath: './src/app/svg/custom',
      svgoConfig: {
        plugins: [
          "removeDimensions"
        ],
      },
    }),
  ],
} as Configuration;

You can achieve the same result (with even more control) with svg-to-ts, you just need to add a separate command to compile each icon set you need to use.

The only downside with the Webpack Plugin right now has to do with how Fontawesome's SVGs are organized (and probably other icon libraries that offer multiple weights/styles). @ngneat/svg-icon uses the filename as the name property of the generated TS objects. Since Fontawesome uses the same filenames across each icon set, I need to do some manual renaming in order to reference the correct icons.

import { acornIcon as faRegularAcorn } from './svg/fontawesome/regular/acorn'
import { acornIcon as faSolidAcorn } from './svg/fontawesome/solid/acorn'
faRegularAcorn.name = 'fa-regular-acorn'
faSolidAcorn.name = 'fa-solid-acorn'

In order to properly support multiple directories, we would need to add not only multiple paths, but multiple configurations for each path. Fontawesome has multiple directories for each icon set, and each icon set uses the same filenames. I would need to add custom name prefixes for each srcPath so I can refer to each icon set using a unique name. i.e. <svg-icon key="'fa-thin-checkmark'|'fa-regular-checkmark'"></svg-icon>.

This is certainly doable, but it would be a pretty big change to the configuration.

[NetanelBasal]

You can add a nameNormalizer function that returns a modified name if you want.