Show us your build process

[duncanbeevers]

Please share the toolchain you use for generating the font variants from the svg sources.

[cameronmcefee]

Hi @duncanbeevers,

The generator itself is a little too specific to GitHub's process to be particularly helpful to anyone as an open source project, but I'm happy to share the basics of how it works. The svg -> font process itself is built on the Fontello libraries. It looks something like this:

svg files --> cleaned svgs
          \-> svg2ttf --> ttf2eot
                      \-> ttf2woff

Additionally, it produces all of the bundled stylesheets, the images for the open graph data of https://octicons.github.com/, produces all the files needed to update the site, etc. It also updates files for a Hubot plugin we use to generate octicon markup.

One of the important tasks it does is create a "local" version of octicons that maps characters to the Latin portion of Unicode so the font will display properly in font-preview style font menus like Keynote. It also changes the font name so that locally installed versions of Octicons that are out of date will not conflict with GitHub webfonts which do update from time to time with new icons.

Here are a few screenshots of the GUI that we use to manage everything:

Production Octicons

This is the subset view. We maintain only one public subset for the sake of simplicity. What is public is what's on GitHub sites. For a few cases we have icons that are not included in the set (staff only, extra logos, etc) which get built into a separate font.

Add an icon

This is the add-a-new-icon page. SVG files are dragged in and are queued up. They can be previewed and then merged into the set.

Preview/profile

This is the profile view (the potential icon preview is similar). Here you can see the icon, it's data, and see it in a few real GitHub scenarios to see how it'll look.

[duncanbeevers]

Thanks @cameronmcefee It was great to get a peek into how these assets are built. It's especially nice to hear about how you avoided specific gotchas like locally-installed versions of the fonts.

[cameronmcefee]

Absolutely!

[lunaisnotaboy]

@cameronmcefee would GitHub be willing to open-source this website now? Considering it's almost been a decade...

(I'm asking because I don't want private repositories that aren't used anymore to become lost.)