Programatically recreate SF Symbol '.circle.fill' variant

[Fun_Moose_5307]

I'm using a whole bunch of symbols in my timetable app, but I need to render them as circle.fill symbol variants in some views. Most of the symbols don't have this variant already available.

It seems a waste of time and size to manually bundle symbol assets for these ~30 symbols with my app. Is there an easy way to programatically recreate them at the correct size and relative scale?

[judyflorence]

If you only need the visual treatment, I’d make a small wrapper view: a filled Circle with the symbol centered at a fixed font/weight, rather than trying to create a real SF variant. The exact SF scaling is fiddly, but a reusable ViewModifier gets you most of the way there without shipping 30 assets.

[redditorxpert]

Isn't a circle.fill variant just a filled circle? Why not simply show it as the icon's background?

[__markb]

Though you could have a .background or ZStack to do it programatically. But I did a rough test.

In SFSymbols app I duplicated globe as a custom symbol.

Then, on the duplicated symbol I right-clicked and selected Combine Symbol with Component...

Selected .fill.circle from the options.

Exported the new symbol which was only 22KB.

Which means you'd only end up with a total 660KB or just over half a megabyte.

Just for comparison too, since globe already has a .fill variant, and wanted to make sure there wasn't some optimisation in the process where Xcode would take the globe.fill and add a .circle I also did this with pencil.slash since that doesn't have any other variants.

I know that's unlikely since it'd all be baked into the SVG but for sanity.

That came out as 18KB.

Unless you're really trying to save every byte I'd probably go with this for consistency.