Option for size-specific icons

[fabric-8]

If I understand the new icon implementation correctly we're always just using the default 24x24 asset/svg and scaling it when using them at different sizes within the UI. This approach "breaks" the stroke width which isn't just scaled down from 24x24 and in some cases we're actually using different assets for 24x24 vs. 16x16.

Suggestion:

• Optionally be able to provide svg code for multiple sizes within the icon file itself
• If no specific svg code for other sizes is provided, fall back to 24x24 asset and scale it (ideally, with a set stroke width of 1.5 for 16x16 / 2.5 for 32x32 though)

Happy to collaborate on this and provide assets where necessary!

[fbwoolf]

@fabric-8 ok, I didn't understand that from the original issue description. Should we just always provide what we need rather than having fallbacks? I'd prefer to avoid needing conditionals and things just for a simple icon. From other references, is it typ to need so much code arnd icons? This is the ref storybook I used, and it simply has a size prop in the code and does just adjust the height/width of one svg:

https://main--64b56e737c0aeefed9d5e675.chromatic.com/?path=/docs/introduction--docs
https://github.com/storybookjs/icons

[fabric-8]

Sorry, I have spoken about this with @kyranjamie earlier, should have been more explicit about this in the issue.

The implementation was just an idea from my end I imagined to be a nice approach, we can def. leave out the entire fallback/conditional part. But being able to have size-specific svg code would be great. If that's too much effort for now let me know and I'll try to adjust the icons in question in a way that makes them scale / work a bit better.

Straight-up scaling is a bit gnarly as the stroke width values you'll end up with are going to be quite random and off-(pixel)grid

[fbwoolf]

Straight-up scaling is a bit gnarly as the stroke width values you'll end up with are going to be quite random and off-(pixel)grid

Ok, np, I'll move fwd and refactor it with your requests here. I didn't realize it was discussed already! Sorry for not doing it correctly the first time through. Should be quicker now though with the new icons setup already. 👍

[fabric-8]

Awesome! If you need a helping hand doing the grunt work and getting the svg code for the 16 versions in please let me know, happy to help out!