|
| 1 | +# Icon |
| 2 | + |
| 3 | +A broken method chain: one long line, then a group of shorter ones sharing a left edge, with a |
| 4 | +column guide down the right. It is the formatter's own output shape — the thing that distinguishes |
| 5 | +it is deciding *where* to break and what to line up, not laying everything out uniformly. |
| 6 | + |
| 7 | +| File | Use | |
| 8 | +|---|---| |
| 9 | +| `icon.svg` | The mark. Inherits `currentColor`, so one file covers light, dark and monochrome. | |
| 10 | +| `favicon.svg` | Same geometry, guide at full strength. Below ~24px contrast is what keeps the guide visible, not shape. | |
| 11 | +| `avatar.svg` | The mark on a white rounded square, for the GitHub organisation and marketplace tiles. | |
| 12 | +| `avatar-512.png`, `avatar-128.png` | Rasterised from `avatar.svg`; GitHub organisation avatars must be raster. | |
| 13 | + |
| 14 | +Regenerate the PNGs after editing the SVG: |
| 15 | + |
| 16 | +```bash |
| 17 | +rsvg-convert -w 512 -h 512 docs/icon/avatar.svg -o docs/icon/avatar-512.png |
| 18 | +rsvg-convert -w 128 -h 128 docs/icon/avatar.svg -o docs/icon/avatar-128.png |
| 19 | +``` |
| 20 | + |
| 21 | +## What not to break |
| 22 | + |
| 23 | +The mark has seven elements, which is the ceiling for 16px. Anything added has to displace |
| 24 | +something else. |
| 25 | + |
| 26 | +- **The shared right edge does the work.** The first and third bars end on the same x. That |
| 27 | + implied vertical is what carries "there is a boundary" at sizes where the dashes disappear, and |
| 28 | + it costs nothing because no thin element draws it. Changing either bar's width breaks the idea |
| 29 | + silently — the icon will still look fine at 64px and mean nothing at 16px. |
| 30 | +- **The guide's rhythm must not match the bars'.** Three dashes against four bars is deliberate: |
| 31 | + mismatched rhythms read as two layers, so the boundary belongs to the format rather than to any |
| 32 | + one line. Align them and the dashes turn into decoration stuck on the bar ends. |
| 33 | +- **Check every edit at 16px first.** Every version of this mark looked fine large. The small size |
| 34 | + is the only one that rejects anything. |
| 35 | + |
| 36 | +The two colours in `avatar.svg` are the only brand decision baked in here, and they are a |
| 37 | +placeholder. The white ground means that on GitHub's light theme the tile itself disappears and |
| 38 | +only the mark reads; an off-white ground keeps the tile visible if that is preferred. |
0 commit comments