Comments (4)
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.
from octicons.
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.
Absolutely!
from octicons.
@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)
- [Bug]
- [Bug] @primer/octicons-react `esm` is incorrectly exported
- Filled folder icon was removed in recent release HOT 2
- was the folder symlink icon removed for a reason? HOT 6
- [Bug] `@primer/octicons-react` v19.0.0 not published HOT 2
- [Feedback] No empty/unchecked checkbox to go with "checkbox" icon? HOT 2
- [Feedback] Repo Icons are inconsistent HOT 2
- [Feedback] HOT 1
- [Bug] Discrepancies Between Figma Octicons Set and React Library HOT 3
- Biling code
- Titel
- [Bug] HOT 1
- [Bug]: Using styled-octicons in development mode significantly bloats bundle HOT 2
- [Bug] Missing icons accessibility and accessibility-inset in 24px HOT 1
- [Feedback] Duplicated icons HOT 2
- [Feedback] Publish icon list as part of the build process HOT 1
- [Suggestion] Add `git-branch-deleted` and `tag-deleted` icons HOT 3
- [Bug] The SVGs in /build/svg/ don't have the `octicon` classes attached HOT 1
- [Bug] `@primer/octicons-react` includes raw SVG files, but are inaccessible HOT 1
- [Bug] `@primer/octicons` includes all the raw SVGs twice HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from octicons.