Social Icons in m10c

Are from the set feather icons but do not offer a reddit icon. You refer to the icon by name in config.toml and svg path strokes which are apparent from the final html code. I explored the mechanism of page construction in the theme.

SVG Icons

All my references to m10c code refer to https://github.com/vaga/hugo-theme-m10c/tree/1adc079e39fe999191d8829c676d546c047acc45 version of m10c theme. The m10c theme inserts all social icons into this base document layouts/_default/baseof.html with the format of the icon is determined by layouts/partials/icon.html and where the icon path selected by name from the json file data/m10c/icons.json.

Format of the json file

The file is a single-line list of comma-separated key:value strings where the key string is the name of the icon, and the value is the set of svg paths.

Adding a new icon

The Graphic creation

Create the graphic with svg primitives in a 0 0 24 24 viewbox.

Insert the icon into the icon.json database.

Next insert the graphic into the json file using the correct named key. In Emacs I could split the long json list by M-x json-pretty-print, add the "tag":"svg string". Recreate a single-line json file by using the second version of the code from this Stack Overflow Page.

First Attempt - drafted Reddit icon - Failure

I spent several hours in Inkscape tracing a reddit icon at 24px by 24px. I managed to insert a "reddit" as an ellipse path, and finally the entire reddit logo as a stroked path. The 2pt stroke was too heavy making this effort a failure.

A branded Reddit Icon - Success

Using the branded feather icons which are filled path constructions, with no license restrictions. I replaced my own created graphic with branded Reddit icon using the icon.json editing procedure. The graphic showed but icon.html added the rest of svg with a 2px stroke, ugly again. Adding a stroke="none" property to the branded drawing removed the strokes, making a successful Reddit icon.

Create a dark and lite version of the branded Github icon - Success

I left the feather version of the Github icon and added the github-light and github-dark icons from the branded version by adjusting the fill colors in the branded version.

A branded Disord Icon - Success

I am getting in the grove, this was a copy of a branded version.

Rescale and Translate the Mastodon Logo - Success

Starting with a svg graphic from the Mastodon web site I placed centered the graphic in a svg:g section which scaled and centered the result.