How to handle icons that do not have solid variant?

[mauritskorse]

Currently this package uses the outline variant when there is no solid present. However it inserts the outline paths into the svg tag-that is made for a solid variant:

<svg ... fill="currentColor" aria-hidden="true" data-slot="icon" > ... </svg>

The outline variant in flux has this parent svg tag:

<svg ... stroke-width="{SVG_OUTLINE_STROKE}" stroke="currentColor" aria-hidden="true" data-slot="icon"> ... </svg>

For some icons this works, others start to look horrible.

Some possible solutions on how to fix this:

1. do not create a solid variant at all and remove the variant option from the component
2. always fallback to the outline svg
3. add a config option to determine what parent svg tag to use
4. try to convert the svg into a proper solid variant (this might be pretty difficult to get it right)

Let me know what you think would be the best? If you have other suggestions please share!

[mauritskorse]

A bit more testing tells me that the icons of various vendors are crafted in different ways:

• Some build their outline version actually using solids and not single paths. Hence stroke widths do not work (i.e. this is the case for MDI and Google MDI as well as Fluent).
• Some use a single path (usually those that also have their outline version build as a solid). Others use multiple and various svg paths/circles/etc.
• Some define fill, stroke attributes and clip and fill rules.

This means that we need to define the build type for each vendor.

[mauritskorse]

There is a fallback option in the first version of flux-icons. That should solve it.