idea: base + adornment

[lifeiscontent]

Icon name

N/A

Use cases

I'm not sure if its possible due to how font icons work, but, based on how the icon structure works, it seems like there is an icon base, and icons with adornments, e.g. cog or plus, it'd be pretty awesome if we could programmatically add all adornments to each icon so then you could have something like the server icon with server-plus instead of having to manually create each individually.

Design ideas

I've got an idea on how to implement this, but wanted to hear some feedback before I go and actually try to implement this.

Checklist

• I have searched if someone has submitted a similar issue before and there weren't any. (Please make sure to also search closed issues, as this issue might already have been resolved.)
• I have searched existing icons to make sure it does not already exist and I didn't find any.
• I am not requesting a brand logo and the art is not protected by copyright.
• I have provided appropriate use cases for the icon(s) requested.

[sukei]

That would really be a great addition!

[skamradt]

If only there was a collection of just common adornments.

I believe this would be possible using masks and simple shapes to cut the adornment holes in the primary icon. Ideally, the adornment library would include the masks (basically black filled outlines of the icon just a little larger than the icon) ready to be applied.

[sukei]

It may work well for the solid icons, but I'm not sure about the outlines since the cutouts should cuts the lines. You can better observe that behavior on adjustement-* outline icons.

[skamradt]

Here is an example with masks and outlines which shows it DOES cut the lines using this method (using outline alarm and solid circle-plus). This is a poor example, as at 24x24 the plus portion is hard to read, which is why we would need adornments rendered smaller to start with that will match the stroke of the outline. When merging the two icons I placed each one in a separate group. You can easily replace the last path in the last group with any other circular icon that is also 24x24 :)

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <mask id="mask1">
    <rect x="0" y="0" width="24" height="24" fill="white"/>
    <circle cx="18.8" cy="18.8" r="5" fill="black"/>
  </mask>
  <g fill="none" mask="url(#mask1)" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M12 13m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"/>
    <path d="M12 10l0 3l2 0"/>
    <path d="M7 4l-2.75 2"/>
    <path d="M17 4l2.75 2"/>
  </g>
  <g transform="scale(0.4,0.4) translate(35,35)">
    <path d="M4.929 4.929a10 10 0 1 1 14.141 14.141a10 10 0 0 1 -14.14 -14.14zm8.071 4.071a1 1 0 1 0 -2 0v2h-2a1 1 0 1 0 0 2h2v2a1 1 0 1 0 2 0v-2h2a1 1 0 1 0 0 -2h-2v-2z"/>
  </g>
</svg>

[lifeiscontent]

for the icons that seem to cut lines, you could potentially just create a pre-cut template that has enough space for the adornments to settle in, and if necessary use the pre-cut template for adaption does this seem like a viable option? or is there something I might be missing in terms of context?

[sukei]

Here is an example with masks and outlines which shows it DOES cut the lines using this method

Yes, it cut it but not in the intended style:

you could potentially just create a pre-cut template that has enough space for the adornments to settle in

And that's why I take adjustement-* outline icons as an example to show that each adornment take its own space and have to cut the icons in different ways. Unfortunately, it may not be as simple as that.

[skamradt]

The issue of pre-generating would be that some of the adornments would end up with not enough space, or too much (the minus vs the heart for instance). Clipping the path would need to occur, and that would require a little more lifting than the SVG specs allow for. You can get close using the masking method, load it up into Inkscape and use the Boolean path routines to cut the path properly and remove some of the points.

[sukei]

There is another path. We could have a collection of icons that can be fused with few adornments and build them on the fly (from the website and the integrated libraries). Then, no needs to pre-generate everything. BTW, That would take ages and clutter the searching engine.

[lifeiscontent]

@sukei based off your example, we could have some kind of template that defines the paths that the base icon would be modified from and then set some boundaries that keep the bounadries porportional depending on the intersections between the adornments and the base.