Add option to customize symbol id based on file name

[troywarr]

I just switched to gulp-svg-sprite from gulp-svg-sprites; it was pretty seamless for my use case, but one useful feature of the latter that doesn't appear to be supported in the former is config-based control over the value of the id attributes of the rendered <symbol>s.

gulp-svg-sprites actually doesn't appear to directly support this either, but there I was able to set the selector config option to something like icon-%f, and that would also affect the generated <symbol>'s id (not just the class names of the <svg> elements used in the HTML to include the sprite output), giving me output like:

<svg>
  <symbol id="icon-my-logo">
  <symbol id="icon-user-profile">
</svg>

when sourcing a directory of SVG files like:

icons/
  my-logo.svg
  user-profile.svg

This is handy because it keeps the file names concise and DRY (i.e., I don't need to name them icons/icon-my-logo.svg), while also "namespacing" the generated id attributes so that I don't have to worry about a naming collision unless I give another element on the page an id starting with icon- as well (which is unlikely anyway, and easier to remember not to do).

Would it be possible to add such a config option here? Or is there already a way to do this of which I'm unaware?

Offhand, I'd think maybe a good way to do it would be to provide an id configuration option with a similar string format:

id: 'icon-%f'

where %f is replaced by the id that's generated by the .svg source file name.

Hope that makes sense - please let me know if not.

Incidentally, great work here!

[jkphl]

Hi @troywarr,

thanks a lot for your feedback and for supporting svg-sprite by adopting it — I very much appreciate that! :)

Regarding your question: There is already a config option that lets you customize the IDs in whatever way you want, although this might not be obvious at first. Please have a look at the shape.generator.id option for this (see here). Use it to pass a callback that transforms the "local part" of your SVG file name into the shape ID. The default used by svg-sprite (in case you don't provide something else) looks like this:

function(name) {
    return path.basename(name.split(path.sep).join(this.separator), '.svg');
}

Replace it with a callback that has the same signature (i.e. accepting the "local path" as it's sole argument and returning the ID). It might seem a little overdone to use a callback for this (in comparison to "icon-%f"), but please bear in mind that svg-sprite supports recursive directory traversal, which makes things a little more complicated. In your case (without subdirectories), this should solve your request:

function(name) {
    return 'icon-' + path.basename(name.split(path.sep).join(this.separator), '.svg');
}

Please let me know if this works for you. For simpler cases, I might consider adding support for passing in template strings as well. Stay tuned ...

Cheers,
Joschi

[jkphl]

As of release ac5f923, svg-sprite now supports template strings for the shape.id.generator option. Please see the manual for details. I'll close the issue for now, but please feel free to re-open it in case of problems.

Cheers,
Joschi

[troywarr]

This is excellent - thanks so much, Joschi!

Both approaches (function and template string) work great. I stuck with the latter for simplicity's sake. Thanks for adding that ability!

Sorry I missed this feature in the docs - I read through them but must not have grokked that section. I think I somehow had the impression that all of the config options pertinent to my use case were nested within the mode property - but now it makes a lot more sense.

Anyhow, thanks again!

[marcosalberto]

I have a similar problem, but i want to edit the id based in file path.

Example:
An icon on /component-a/icons/search.svg should be the ID icon-component-a--search.

The shape.generator.id option used as a function only pass name as argument.

Would be good pass the path too? Or is there another solution?

Thank you