Apple has a great article on creating custome SF Symbols to add to your Xcode project.  So I'm trying my hand at this graphic design language.  It seems to start with understanding the SVG format.  Which I do not know... but heck... it's just XML with a huge learning curve - what could go wrong?

Well after a long day of tedious text hacking the SVG file into 20 seperate files with just one symbol each... I had some first approximations of symbols to feed into Xcode.  But first I had to convert my raw SVG into the SF Symbols expected format (which is not really known - Apple refers to it as a Template).  But there is a tool for this on the internet (of course there is!).  I downloaded CustomSymbols App and started importing and adjusting the margins... and exporting and getting  SF-Symbolized-SVG files.  Import into Xcode and drop into a simple view page to see how I did...  well the symbol looks great, but there is a bounding box of white space (verticle padding) not desired.  Wonder where that came from.  Pondering on that ... I assume there is some "page" info that got inclued in the svg file.  It is slightly different for some of the 20 icons I carved by laborous hand editing the path segments in the original svg file.

Note:  this hand editing the SVG file is not the way to proceed!

There are a number of WWDC talks on building custom SF Symbols and the new Beta version 5 of SF Symbols seems to now be an editor tool - with ability to annotate/label the SVG paths for color and hierachary. 
It didn't become obvious to me how/why I'd need to do all of that, so on this first attempt - I ignored all of this complication.

See:  SF Symbols 4 - from WWDC22

Well this is getting complex very fast...  seems the SVG file that defines a symbol - really is a definition of about 27 variants - luckly it appears that SF Symbols knows how to extract and interpalate many of those.  The CustomSymbols app does this magic also.

Now an unknown issue is weather I should be using svg paths as my raw data or some kind of "stroke" thingy.  I've not yet figured out the terminology for SVG.  Maybe those are the same thing.  And then like any complex onion - there are layers!

After importing the SVG file into SF Symbols you can add layer annontations to groups of paths.  Paths may be in multiple layers - like the heart example used for the border and the red fill in the example.

Show the Color Sidebar Inspector in Gallary Mode to view custom symbols layers (you cannot view layers in Apples symbols - unless you duplacte them for customization).

Here are my SF Symbols imported to Xcode for a simple test page of the "font" (symbols).  I've still got some layout issues to decide upon - as the numerals have two verticle sections with the zero thru five on the bottom and the count of fives on the top.  Making a true font from these symbols leads to some interesting design decisions...  do the numberal above 5 get smaller - thereby taking the same bounding box in a font?

More learning to do... but now back to the basic app logic.