feat: add collection aliases functionality

[galexrt]

This allows whole collections to be aliased with per alias extraProperties.

Resolves #42

---

I have removed the bg-white from one of the example icons as with dark reader/mode addons off, it wouldn't appear for me due to the color overlapping :-D I can remove this change, just let me know

[codesandbox[bot]]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders
Open Preview

[hyoban]

Can you add a test for it? Thanks

[galexrt]

Can you add a test for it? Thanks

Sure, I added two tests. 1. just a collection alias and 2. collection alias and non-collection-alias icon.

[hyoban]

So when you use collectionAliases, you basically want to keep the original icon set unchanged, and then have a new icon set with custom properties added, right? Because otherwise, you can use extraProperties. Do I understand correctly?

[galexrt]

So when you use collectionAliases, you basically want to keep the original icon set unchanged, and then have a new icon set with custom properties added, right? Because otherwise, you can use extraProperties. Do I understand correctly?

Yes, so an icon set can be used multiple times with and without extraProperties added to them.

[hyoban]

Sorry. I realize it seems like extraProperties might not do the trick. Adding it to the CSS part doesn't seem to solve the problem. Maybe we need to generate it into the SVG content?

[galexrt]

Yeah I just realized that stroke and other options that directly affect the svg's styling doesn't work with the "embedded" svg image data.

I'll look into if modifying the SVG content is an option or not, and will keep you updated. Though the feature of aliasing collections is working fine so far :smile:

[hyoban]

This may be a little complicated. It parses the svg icon and restores it back.

I raised an issue in iconify to allow additional attributes to be passed on svg. This should solve the problem of custom stroke width.

https://github.com/iconify/iconify/issues/303

And due to the different content of the svg icon, we may shouldn't always add attributes to the pathTag.

[galexrt]

Yes, the commit I pushed would allow adding, e.g., stroke, stroke-width, etc., to the path tag/first element of the svg element. The URI encoding is a bit much but I haven't found an alternative though I have not spent too much time on looking for an alternative that is encoding less symbols to save space. So having a way for the Iconify library to add it to the correct place directly would be better.

For my case, I noticed that setting the stroke color it doesn't seem to add a border effect as I expected it would. When I was using the mdi-vue3 lib where I was able to use CSS to target the svg path setting stroke and stroke-width caused the few icons I targeted with it to have a slight border/stroke around the icon's color.

Still for the case of wanting to increase the stroke-width it worked in my local tests so far.

Let's see what the Iconify team will respond.

[cyberalien]

Adding attributes to SVG won't help. Usage is limited only to icons that use default attribute values.

Better solution is a callback to change content. Callback should include icon set prefix, icon name (that tells you which icon is being parsed, so you can change only icons that you need) and icon content. Then you can do whatever you want with it.

To change stroke width, just do basic string replacement like content.replaceAll('stroke-width="1.5"', 'stroke-width="2"').

To add attribute, which would be similar to your solution, just wrap content in <g stroke-width="1.5">${content}</g>.

It would also give you ability to do other stuff, like changing colors in icons that use multiple colors, change animation duration in animated icons and so on.

Way better adding attributes. No dependencies required.

Icons in Iconify icon sets are all processed: cleaned up (no extra attributes, no css), validated, optimised, exported in same format. So you won't find stuff like stroke-width='1.5' (single quotes or no quotes), making replacements reliable.

[hyoban]

I just got support for custom stroke width, which is causing many conflicts. Maybe you can open a new PR to continue work on collection aliases. Sorry.

[galexrt]

@hyoban No worries, thank you for the input! I have updated this PR :)

Edit: Mentioned the wrong user, sorry

[hyoban]

Can you help make the test pass? Thanks!

[galexrt]

Let's see if it passes now. I had forgotten to update my local packages which caused the output to be different for me vs the test run.

[galexrt]

I still need to debug the latest code more as for some reason on my machine the tests fail (aliased icons are not rendered in the css) but when running using the example config and index.html the collection alias icons are generated as expected.