Vincent
ffedb72b83
Simple Icons publishes each brand's own hex next to its glyph, and the build was throwing it away. Tiles now carry it - Gmail red, Drive blue, Chat green, Gemini violet - and the glyph is drawn black or white by the tile's perceived brightness, since brand colours are picked to look right rather than to carry a white mark. GitHub and Notion are near-black, Snapchat is pure yellow, and a fixed white glyph loses one end of that. An app's right corners are now rounded on its own layer. The container's rounded-xl could never have clipped them: an app is a native view sitting on top, not something the shell lays out, so it kept square corners and overhung the curve. Only the right pair - the left edge butts against the nav, and rounding it would notch the middle of the window. The traffic lights move to (26, 24) and the drag strip deepens to match, so they sit inside the window's margin instead of against its corner. Adds Gemini, Claude, ChatGPT, Linear, ClickUp, HubSpot, Shopify and Cloudflare to the host table.
37 lines
1.3 KiB
JavaScript
37 lines
1.3 KiB
JavaScript
/**
|
|
* Turns Simple Icons into one map of slug → [path, brand colour].
|
|
*
|
|
* The package ships a file per icon and 15MB of SVG wrapper around what is
|
|
* really a single `d` attribute each, plus a separate metadata file carrying
|
|
* the brand's own hex. This joins the two and throws the rest away.
|
|
*
|
|
* The output goes to public/ rather than src/: it is fetched once at runtime
|
|
* instead of being parsed into the JS bundle at every startup.
|
|
*
|
|
* `npm run build` runs this, so the result is never committed and never stale.
|
|
*/
|
|
import { readFileSync, readdirSync, writeFileSync } from "node:fs";
|
|
import { join } from "node:path";
|
|
|
|
const ICONS = "node_modules/simple-icons/icons";
|
|
const META = "node_modules/simple-icons/data/simple-icons.json";
|
|
const OUT = "public/brand-icons.json";
|
|
|
|
const hexes = new Map();
|
|
for (const icon of JSON.parse(readFileSync(META, "utf8"))) {
|
|
hexes.set(icon.slug, icon.hex);
|
|
}
|
|
|
|
const icons = {};
|
|
for (const file of readdirSync(ICONS)) {
|
|
if (!file.endsWith(".svg")) continue;
|
|
const slug = file.slice(0, -4);
|
|
const path = /\sd="([^"]+)"/.exec(readFileSync(join(ICONS, file), "utf8"))?.[1];
|
|
if (!path) continue;
|
|
icons[slug] = [path, hexes.get(slug) ?? "64748B"];
|
|
}
|
|
|
|
writeFileSync(OUT, JSON.stringify(icons));
|
|
const kb = Math.round(readFileSync(OUT).length / 1024);
|
|
console.log(`${Object.keys(icons).length} icons → ${OUT} (${kb} KB)`);
|