Port icons / Penpot

[GBKS]

Find the best setup for using the Bitcoin Icons in Penpot, both for maintaining and using.

[GianMancuso]

Currently adding a 30x30 box to every icon in the Penpot working file.

Before I turn them into components, I'd like to confirm how many levels deep we'd like to organize them.

I propose only two level: Icons / <name of icon> with both Filled and Outline of all sizes, reduces the noise in the Asset drawer and there's no other advantage I'm aware of in Penpot further dividing the component group into Filled/Outline. Is there a rationale for going deeper than 2 levels?

I'm also including the icon name in the component name itself to make it searchable in Penpot, since search doesn't return results matching component group names, only exact matches of component names.

Finally, I'm placing underscores in the component name rather than spaces so it's easy to export and give to a dev.

[GBKS]

Thanks for taking this on.

I would appreciate if if we could re-use the naming pattern of Icon Set, so the two projects can be easily kept in sync.

We can ditch the small and large sizes to simplify things, those are really just extras.

Please keep the spaces in file names. From my experience, exporting SVG icons is a hugely messy process, which is why I ended up creating a custom Figma plug-in to process icons for export. So naming folders a certain way does not resolve the hard part of the export. I'd rather keep the names optimized for people to read and come up with an automated dev workflow.

[GianMancuso]

I made it so the component name contains the icon name, so it can be searched, but the instance of that component has the correct naming convention. See below.

Now to do it for the rest 😅

[stackingsaunter]

@GianMancuso FYI I added following icons:

• search
• caret down
• caret left
• check

I think you added search as well, so we can delete mine and use yours.

[GianMancuso]

All icons are components of the correct size in the working file now.

Next I'm going to switch the ones used in other components to make sure we're referencing the right ones, but I'm done for today.

[GianMancuso]

@GBKS Now that you've built something using the API, is there anything you've learned that would have us change the way we name icon components?

Right now they're named <IconName> <Style>, <Size> -- the icon name is in there because it's the only way to make it searchable in Penpot's Assets drawer. And they're organized in Icons / <IconName>.

[GBKS]

I think that's a good system. It should allow us to neatly categorize and group things in our own code.

We'll have to see what Components V2 will bring, but the naming we have now works well.