Allow duplicates items name

[Huntedpix]

Hello !

Thanks for this plugin. I'm migrating from Grunt and the grunt-svgstore plugin to webpack. This plugin is kind of a savior to me.

It only miss one feature to perfectly fit my use case. In association with the "idify" option, I need the same based svg but with a different id name.

I've update the docs and create an example.

[cascornelissen]

I'm really not sure what the end goal for these changes is, can you try and explain a bit better what exactly the problem is you were running into so that I have some context on what this is trying to solve?

Just in general, some pointers for the PR:

• You removed a bunch of trailing whitespace which servers a function in the docs
• I don't think an example is valuable for such a specific use case (but I'm not sure, hence my first question)

[Huntedpix]

Hi !

I'm sorry, i didn't notice the removal of the trailing white space, my IDE did it automatically. I've added the example so you will be able to test it, if you want it and also to help someone who has the same issue.

The end goal is to be able to generate with the same svg file input multiple svg symbol output.

My personal use case is that me and my team are working with a CMS that handle 100+ websites with the same HTML template, so updating them is complicated. We found one way to deal with icons customization, per website, is that we are reading a json file with a key/value where the key is the icon id in our template and the value is the input svg file.

An example with our search template :

We have a "search anchor" that allow us to display the search bar of our website and a "search button" that allow the user to click and trigger the search on the website.

In icons.json we have:

{
  "search-anchor": "search",
  "search-button": "search"
}

In the HTML:

<svg class="icon" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
      <use xlink:href="#search-anchor" x="0" y="0"/>
</svg>
...
<svg class="icon" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
      <use xlink:href="#search-button" x="0" y="0"/>
</svg>

By default we have the same input svg, but sometimes the designer want something different for each icon and this technique allow us to do so, without having to change our template.

I'm aware that we are duplicating code, but the cost is so small compare to the benefits it give us, so it's totally worth it.

I hope that it's more clear for you what my end goal is and why it's an important feature for me and my team.

[cascornelissen]

Thanks for the context, that helps a bunch. Reading your explanation and looking at the PR, functionally you only want one thing; to be able to disable this new Set(), right?

If you can make the following changes to this PR I'm open to include this as an option.

• Only include that change without the example, IMHO it's way too complex for a simple example that lives in the repository.
• Move/rename the option to be under input.allowDuplicates as this is an option that influences the input which in turn influences the output
• Add some tests
• Update the docs to include this new option

[cascornelissen]

Thanks for your contribution! This feature was released as part of 4.2.0 🚀

[Huntedpix]

Thanks a lot !