Git Product home page Git Product logo

Comments (4)

cameronmcefee avatar cameronmcefee commented on May 22, 2024

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

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

octicons generator

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

octicon-plug

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.

from octicons.

duncanbeevers avatar duncanbeevers commented on May 22, 2024

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.

from octicons.

cameronmcefee avatar cameronmcefee commented on May 22, 2024

Absolutely!

from octicons.

lunaisnotaboy avatar lunaisnotaboy commented on May 22, 2024

@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.)

from octicons.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.