Add option to sourcePaths for icon name prefix.

[ssylvia]

It would be really helpful if you could add a prefix option to each individual sourcePath strings. The would you allow for easier sorting if using different collection and reduce name collisions.

svgJar: {
  sourceDirs: [
    {
      prefix: 'material-',
      path: 'node_modules/material-design-icons'
    },
   {
      prefix: 'fa-',
      path: 'node_modules/font-awesome-icons'
    }
  ]
}

Then the generated icons would be:

{{svg-jar "material-share"}}

{{svg-jar "fa-share"}}

or if the main prefix option is used:

svgJar: {
  prefix: 'icon-',
  sourceDirs: [
    {
      prefix: 'material-',
      path: 'node_modules/material-design-icons'
    },
   {
      prefix: 'fa-',
      path: 'node_modules/font-awesome-icons'
    }
  ]
}

Then the generated icons would be:

{{svg-jar "icon-material-share"}}

{{svg-jar "icon-fa-share"}}

[voltidev]

I really like your idea and might implement it soon.

[vladucu]

Thanks for this nifty add-on.

We've also run into the need for this and found it would give a lot of flexibility.

Even more having sourceDirs an array of objects (like suggested above) which supports optimizer and stripPath options individually, would be amazing (though I understand it might be more complicated).

Our use-case is an addon that will need to import some SVG's from an npm module and add it to the host app. With what's currently supported by the addon, we're running into naming conflicts with some other SVG's that are imported directly by our host app, the prefix would solve this issue.

Looking forward for something like this, if I could help in any way, feel free to let me know

[ombr]

Hi,

I was able to get something like this with symbolic links:

mkdir app/svg
cd app/svg
ln -s -r ../../node_modules/bootstrap-icons/icons/ boostrap
ln -s -r ../../node_modules/@fortawesome/fontawesome-free/svgs/ fontawesome

    svgJar: {
      strategy: 'inline',
      inline: {
        copypastaGen: (assetId) =>
          `{{svg-jar "${assetId}" width="14px" class="icon"}}`,
        throwOnFailure: true,
        stripPath: false,
        sourceDirs: ['app/svg'],
      },
    },

and then:

{{svg-jar "fontawesome/solid/spinner" width="14px" class="icon"}}

What do you think ?

Thanks.

Luc