Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

idea: base + adornment #1227

Open
4 tasks done
lifeiscontent opened this issue Sep 25, 2024 · 9 comments
Open
4 tasks done

idea: base + adornment #1227

lifeiscontent opened this issue Sep 25, 2024 · 9 comments
Labels
icon request New icon or icon update requested

Comments

@lifeiscontent
Copy link
Contributor

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.
@lifeiscontent lifeiscontent added the icon request New icon or icon update requested label Sep 25, 2024
Copy link

That would really be a great addition!

@skamradt
Copy link

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.

Copy link

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
Copy link

skamradt commented Sep 27, 2024 •
edited
Loading

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
Copy link
Contributor Author

lifeiscontent commented Sep 27, 2024 •
edited
Loading

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?

Copy link

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:

icon

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.

image

@skamradt
Copy link

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.

Copy link

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
Copy link
Contributor Author

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
icon request New icon or icon update requested
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@lifeiscontent @skamradt