React-Logo-Filled (1)

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_361":362,"_363":364},"routes/_app.x.$handle.$name",{"_101":100,"_37":48,"_110":91,"_32":111,"_13":14,"_112":-5,"_11":113,"_114":115,"_116":117,"_118":119,"_120":121,"_26":-5,"_122":-5,"_123":-5,"_124":30,"_125":126,"_127":62,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_46":47,"_37":48,"_41":49,"_50":-5,"_51":30,"_52":53,"_54":53,"_55":56,"_57":-5,"_19":58,"_59":60,"_61":62,"_63":62,"_64":65,"_66":67,"_68":69,"_70":-5,"_71":-5,"_72":-5,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":30},"version",125,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","c72cac0e-3feb-496e-981b-d2404326c19b","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":30,"_32":33,"_34":33},"file",{"_35":36,"_37":33,"_38":26,"_39":40,"_41":42,"_43":14,"_44":45,"_29":30},"previous","deleted",false,"deletedHere","path","README.md","latestPath","fileId","cb124e6e-7a16-11f1-a27b-1607ee4eb77e","name","fileType","content","# logos\n\nA small collection of SVG logos with a web UI for exporting **consistently sized, padded PNGs** — handy for using as Val Town val images (or any square avatar/thumbnail).\n\nLive site: \n\n## What it does\n\n- Stores logos as inline SVG strings, one per file.\n- Serves each logo as SVG or PNG.\n- Provides a **framing tool** that wraps any logo (or [Lucide icon](https://lucide.dev/icons)) in a padded square canvas at a fixed pixel size, with an optional background/foreground color, and downloads it as a PNG. This is the piece that gives every exported image the same dimensions and padding.\n\n## Exporting a logo as a val image\n\n1. Go to .\n2. Pick a **Source**:\n - **Logo** — one of the built-in logos in this val.\n - **Lucide icon** — type any icon name from (e.g. `heart`, `star`, `github`). Lucide icons also get an **Icon color** control.\n3. Adjust **Size** (square, in px), **Padding**, and **Background** (toggle the checkbox off for a transparent background).\n4. Watch the live preview, then click **Download PNG**.\n5. Upload the resulting PNG as your val's image.\n\nKeeping **Size** and **Padding** the same across exports is what makes the logos look consistent when used as val images.\n\n## URLs / API\n\nThe app is a [Hono](https://hono.dev) HTTP handler in `http.tsx`. Routes:\n\n| Route | Description |\n| --- | --- |\n| `/` | Gallery of all logos with SVG / PNG links. |\n| `/frame` | Interactive framing tool (UI). |\n| `/frame.png?...` | Rendered framed PNG (see query params below). |\n| `/:name` | A logo as SVG, e.g. `/github`. |\n| `/:name.png` | A logo as PNG, e.g. `/github.png`. |\n| `/lucide/:name` | A Lucide icon as raw SVG (used by the preview). |\n| `/source` | Redirects to the val source. |\n\n### `/frame.png` query parameters\n\nYou can build a download link directly without the UI. Provide **either** `logo` or `lucide`:\n\n| Param | Default | Notes |\n| --- | --- | --- |\n| `logo` | — | Name of a built-in logo, e.g. `github`. |\n| `lucide` | — | Name of a Lucide icon, e.g. `heart`. |\n| `size` | `1024` | Output width/height in px (clamped 64–4096). |\n| `padding` | `64` | Space between the canvas edge and the logo (clamped 0 … size/2 − 1). |\n| `bg` | transparent | Background color, or `transparent`. Any CSS color. |\n| `color` | — | Foreground color for `currentColor`-based icons (Lucide). |\n\nExamples:\n\n```\n# Built-in logo, 1024px, white background\nhttps://logo.val.run/frame.png?logo=github&size=1024&padding=128&bg=%23ffffff\n\n# Lucide icon, transparent background, custom icon color\nhttps://logo.val.run/frame.png?lucide=heart&size=1024&padding=160&bg=transparent&color=%23e11d48\n```\n\n## Adding a new logo\n\nEach logo lives in its own file that exports a named SVG string, which `http.tsx` imports and registers.\n\n1. Create a file, e.g. `mylogo.http.tsx` (an `.http.tsx` file also gives you a standalone endpoint for that logo, but any `.tsx` that exports the SVG works).\n2. Export the SVG as a named constant. The framing tool rescales whatever `viewBox` (or width/height) you provide, so keep the markup clean:\n\n ```tsx\n export const mylogo = `\n \n `;\n ```\n\n Tip: SVGs that use `stroke=\"currentColor\"` or `fill=\"currentColor\"` will pick up the frame's **color** option — that's how Lucide icons are recolored.\n\n3. Register it in `http.tsx`:\n\n ```ts\n import { mylogo } from \"./mylogo.http.tsx\";\n\n const logos: Record = {\n // ...existing entries\n mylogo,\n };\n ```\n\nThat's it — the logo now appears in the gallery, at `/mylogo`, `/mylogo.png`, and in the `/frame` picker.\n\n## How framing works\n\n`frame.tsx` exports `buildFrameSvg(logoSvg, opts)`, shared by the server (`/frame.png`) and mirrored client-side in the `/frame` preview so the on-screen render matches the download. It:\n\n- parses the source SVG's `viewBox` (falling back to width/height),\n- centers it inside a `size × size` canvas with the given `padding` using `preserveAspectRatio=\"xMidYMid meet\"`,\n- preserves presentation attributes (`stroke`, `stroke-width`, `fill`, …) so icons keep their styling,\n- optionally draws a background `` and applies a `color` via a wrapping `` for `currentColor`.\n\nPNGs are rasterized from that SVG with [`resvg_wasm`](https://deno.land/x/resvg_wasm).\n\n## File overview\n\n| File | Role |\n| --- | --- |\n| `http.tsx` | Main HTTP entrypoint (gallery, `/frame`, `/frame.png`, per-logo routes). |\n| `frame.tsx` | Shared `buildFrameSvg` helper for the padded square canvas. |\n| `render.tsx` | Small helper that turns a logo SVG into a per-file HTTP handler (`/`, `/.png`). |\n| `lucide.tsx` | Fetches Lucide icon SVGs on demand from `lucide-react`. |\n| `*.http.tsx` / `*.tsx` (logos) | Individual logos, each exporting a named SVG string. |\n","createdAt",["D",1783437373991],"branchVersion","branchId","a3fe6106-0bdf-11f0-81e8-569c3dd06744","id","a3fdf676-0bdf-11f0-81e8-569c3dd06744","logos",["D",1743171560540],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Various SVG logos for exporting to PNG","imageUrl","5e11e267-23cd-4ee4-86f4-3bf2a5ed69d7","pinnedFileId","b803ca8a-170e-11f0-822a-569c3dd06744","pinPreview",true,"pinMigrated","screenshotVersion",24,"likeCount",0,"orgId","62a75f8d-be32-4eaa-989a-23f3433a7d42","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_101":100,"_109":105},"org",{"_101":100,"_102":103,"_104":105,"_19":58,"_106":107,"_108":30},"branch",{"_13":90,"_37":91,"_46":45,"_92":47,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":48,"_99":100},"isOwned",131,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","jxnblk","handle","displayName","Brent Jackson","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/fca87e60-4ad1-453c-af10-2782c6823400/square512?exp=1789545599&sig=241a998a3b2676202985118f370e58e8e4c965b15387615c1b5fd73d70b9e059","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_46":47,"_37":48,"_41":357,"_50":-5,"_51":30,"_52":53,"_54":53,"_55":56,"_57":-5,"_19":58,"_59":60,"_61":62,"_63":62,"_64":65,"_66":67,"_68":69,"_70":-5,"_71":-5,"_72":-5,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":358,"_85":359,"_87":360,"_89":30},"tree",[288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304],"files",[288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304],"counts",{"_278":67,"_279":173,"_280":67,"_281":282,"_283":284},"contents",[132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_46":275,"_37":33,"_35":36,"_152":-5,"_44":45,"_43":14,"_154":30,"_41":276,"_13":67,"_38":26,"_39":40,"_29":30,"_158":-5,"_32":277},{"_46":267,"_37":268,"_35":269,"_152":-5,"_44":45,"_43":270,"_154":62,"_41":271,"_13":272,"_38":190,"_39":273,"_29":30,"_158":-5,"_32":274},{"_46":260,"_37":261,"_35":262,"_152":-5,"_44":45,"_43":263,"_154":62,"_41":264,"_13":189,"_38":156,"_39":265,"_29":30,"_158":-5,"_32":266},{"_46":252,"_37":253,"_35":254,"_152":-5,"_44":45,"_43":255,"_154":62,"_41":256,"_13":257,"_38":156,"_39":258,"_29":30,"_158":-5,"_32":259},{"_46":245,"_37":246,"_35":247,"_152":-5,"_44":45,"_43":248,"_154":62,"_41":249,"_13":67,"_38":156,"_39":250,"_29":30,"_158":-5,"_32":251},{"_46":238,"_37":239,"_35":60,"_152":-5,"_44":45,"_43":240,"_154":30,"_41":241,"_13":65,"_38":156,"_39":242,"_29":30,"_158":243,"_32":244},{"_46":231,"_37":232,"_35":233,"_152":-5,"_44":45,"_43":234,"_154":62,"_41":235,"_13":189,"_38":190,"_39":236,"_29":30,"_158":-5,"_32":237},{"_46":224,"_37":225,"_35":226,"_152":-5,"_44":45,"_43":227,"_154":62,"_41":228,"_13":189,"_38":156,"_39":229,"_29":30,"_158":-5,"_32":230},{"_46":216,"_37":217,"_35":218,"_152":-5,"_44":45,"_43":219,"_154":62,"_41":220,"_13":221,"_38":156,"_39":222,"_29":30,"_158":-5,"_32":223},{"_46":209,"_37":210,"_35":211,"_152":-5,"_44":45,"_43":212,"_154":62,"_41":213,"_13":65,"_38":156,"_39":214,"_29":30,"_158":-5,"_32":215},{"_46":201,"_37":202,"_35":203,"_152":-5,"_44":45,"_43":204,"_154":62,"_41":205,"_13":206,"_38":156,"_39":207,"_29":30,"_158":-5,"_32":208},{"_46":193,"_37":194,"_35":195,"_152":-5,"_44":45,"_43":196,"_154":62,"_41":197,"_13":198,"_38":156,"_39":199,"_29":30,"_158":-5,"_32":200},{"_46":184,"_37":185,"_35":186,"_152":-5,"_44":45,"_43":187,"_154":62,"_41":188,"_13":189,"_38":190,"_39":191,"_29":30,"_158":-5,"_32":192},{"_46":176,"_37":177,"_35":178,"_152":-5,"_44":45,"_43":179,"_154":62,"_41":180,"_13":181,"_38":156,"_39":182,"_29":30,"_158":-5,"_32":183},{"_46":168,"_37":169,"_35":170,"_152":-5,"_44":45,"_43":171,"_154":62,"_41":172,"_13":173,"_38":156,"_39":174,"_29":30,"_158":-5,"_32":175},{"_46":160,"_37":161,"_35":162,"_152":-5,"_44":45,"_43":163,"_154":62,"_41":164,"_13":165,"_38":156,"_39":166,"_29":30,"_158":-5,"_32":167},{"_46":149,"_37":150,"_35":151,"_152":-5,"_44":45,"_43":153,"_154":62,"_41":155,"_13":67,"_38":156,"_39":157,"_29":30,"_158":-5,"_32":159},"d32958e0-3cbd-11f1-9e49-42b51c65c3df","vercel.http.tsx","d3295976-3cbd-11f1-9e49-42b51c65c3df","parentId",96,"latest",["D",1776692141424],"http","import render from \"./render.tsx\";\n\n// Official Vercel triangle mark\n// Source: https://commons.wikimedia.org/wiki/File:Vercel_logo_black.svg (public domain)\n// Extracted the symbol (triangle) portion from the combined logo.\nconst path = `M37.59.25l36.95 64H.64l36.95-64z`;\n\nexport const vercel = `\n\n \n\n`;\n\nconst svg = `\n\n \n \n \n \n\n`;\n\nexport default render(svg);\n","label",[150],"e39621a8-39d0-11f1-9455-42b51c65c3df","threejs.http.tsx","2f514fe2-1708-11f0-8059-569c3dd06744",82,["D",1776370475933],7,"import render from \"./render.tsx\";\n\nexport const threejs = `\n\n \n \n \n \n \n \n \n \n\n`\n\nexport default render(threejs);",[161],"bb787e46-3ccd-11f1-9482-42b51c65c3df","telegram.http.tsx","2ea7b908-39d2-11f1-9c10-42b51c65c3df",104,["D",1776698973619],2,"import render from \"./render.tsx\";\n\n// Official 2019 Telegram logo (extracted from the Telegram Android source, v5.6).\n// The paper-plane's fold is implied by negative space rather than a separate shape.\n// Source: https://commons.wikimedia.org/wiki/File:Telegram_2019_Logo.svg\nexport const telegram = `\n\n`;\n\nexport default render(telegram);\n",[169],"e2af7e4c-39d0-11f1-97c9-42b51c65c3df","skullcat.tsx","4d093dfa-26c7-11f0-aff9-569c3dd06744",80,["D",1776370474413],8,"import render from \"./render.tsx\";\n\nconst SIZE = 1024;\n\nexport const skullcat = (`\n\n`);\n\nexport default render(skullcat);",[177],"68670de4-1708-11f0-9984-569c3dd06744","render.tsx","54021830-1708-11f0-8e9b-569c3dd06744",58,["D",1744398532715],1,"script","export default function createHandler (svg: string) {\n return async function (req: Request): Promise {\n const url = new URL(req.url);\n \n if (url.pathname === \"/.png\") {\n const { render } = await import(\"https://deno.land/x/resvg_wasm@0.2.0/mod.ts\");\n const png = await render(svg);\n return new Response(png, {\n headers: {\n \"Content-Type\": \"image/png\",\n },\n });\n };\n \n return new Response(svg, {\n headers: {\n \"Content-Type\": \"image/svg+xml\",\n },\n });\n };\n};",[185],"98353ca8-1708-11f0-8e9b-569c3dd06744","reline.http.tsx","773fb8a6-16f0-11f0-9a40-569c3dd06744",62,["D",1744398612919],18,"/** @jsxImportSource https://esm.sh/react@18.3.1 */\nimport { render, React } from \"https://esm.town/v/jxnblk/reactstream/index.tsx\";\n\nimport { Icon } from \"https://esm.sh/reline\";\n\n\nfunction App () {\n return (\n

\n )\n}\n\nexport default render(App);",[194],"eacb0a9c-39d0-11f1-b143-42b51c65c3df","rebass.http.tsx","315c5132-16fa-11f0-9254-569c3dd06744",84,["D",1776370488022],4,"// \n// \nimport render from \"./render.tsx\";\n\nexport const rebass = `\n\n`;\n\nexport default render(rebass);",[202],"0a276a38-170f-11f0-87ec-569c3dd06744","react.http.tsx","a8c8e256-0bdf-11f0-86c5-569c3dd06744",66,["D",1744401381069],"// this logo does not have proper whitespace\nexport const react = `\n \n`;\n\nconst BACKGROUND = \"#23272f\";\n\nconst dark = `\n \n \n \n ${react}\n \n \n`;\n\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n\n if (url.pathname === \"/.png\") {\n const { render } = await import(\"https://deno.land/x/resvg_wasm@0.2.0/mod.ts\");\n const png = await render(dark);\n return new Response(png, {\n headers: {\n \"Content-Type\": \"image/png\",\n },\n });\n };\n \n return new Response(react, {\n headers: {\n \"Content-Type\": \"image/svg+xml\",\n },\n });\n};",[210],"f98311b8-3ccf-11f1-af2b-42b51c65c3df","rb2b.http.tsx","2bd4a114-3ccf-11f1-a2c3-42b51c65c3df",112,["D",1776699936700],5,"import render from \"./render.tsx\";\n\n// RB2B wordmark, locked up on the brand-green background as shown on rb2b.com.\n// Path geometry from:\n// https://cdn.prod.website-files.com/670d16df61df3f62eac698e3/670e8638244fae7c3b0718a0_Logo.svg\nconst WORDMARK_PATHS = `\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n`;\n\n// RB2B brand green (approximate). Adjust if you have the official hex.\nconst BRAND_GREEN = \"#52ff00\";\n\n// Square lockup: black wordmark centered on the brand-green background,\n// matching the styling on rb2b.com. The wordmark is 120x36; we place it\n// in a 160x160 square with equal margins.\nexport const rb2b = `\n\n`;\n\nexport default render(rb2b);\n",[217],"7069891e-3cbd-11f1-a987-42b51c65c3df","openai.http.tsx","d7e2a488-3a72-11f1-986d-42b51c65c3df",95,["D",1776691975747],"import render from \"./render.tsx\";\n\n// Official OpenAI blossom symbol (2025)\n// Source: https://commons.wikimedia.org/wiki/File:OpenAI_logo_2025_(symbol).svg\n// Public domain (consists of simple geometric shapes)\nconst path = `M60.8734,57.2556v-14.9432c0-1.2586.4722-2.2029,1.5728-2.8314l30.0443-17.3023c4.0899-2.3593,8.9662-3.4599,13.9988-3.4599,18.8759,0,30.8307,14.6289,30.8307,30.2006,0,1.1007,0,2.3593-.158,3.6178l-31.1446-18.2467c-1.8872-1.1006-3.7754-1.1006-5.6629,0l-39.4812,22.9651ZM131.0276,115.4561v-35.7074c0-2.2028-.9446-3.7756-2.8318-4.8763l-39.481-22.9651,12.8982-7.3934c1.1007-.6285,2.0453-.6285,3.1458,0l30.0441,17.3024c8.6523,5.0341,14.4708,15.7296,14.4708,26.1107,0,11.9539-7.0769,22.965-18.2461,27.527v.0021ZM51.593,83.9964l-12.8982-7.5497c-1.1007-.6285-1.5728-1.5728-1.5728-2.8314v-34.6048c0-16.8303,12.8982-29.5722,30.3585-29.5722,6.607,0,12.7403,2.2029,17.9324,6.1349l-30.987,17.9324c-1.8871,1.1007-2.8314,2.6735-2.8314,4.8764v45.6159l-.0014-.0015ZM79.3562,100.0403l-18.4829-10.3811v-22.0209l18.4829-10.3811,18.4812,10.3811v22.0209l-18.4812,10.3811ZM91.2319,147.8591c-6.607,0-12.7403-2.2031-17.9324-6.1344l30.9866-17.9333c1.8872-1.1005,2.8318-2.6728,2.8318-4.8759v-45.616l13.0564,7.5498c1.1005.6285,1.5723,1.5728,1.5723,2.8314v34.6051c0,16.8297-13.0564,29.5723-30.5147,29.5723v.001ZM53.9522,112.7822l-30.0443-17.3024c-8.652-5.0343-14.471-15.7296-14.471-26.1107,0-12.1119,7.2356-22.9652,18.403-27.5272v35.8634c0,2.2028.9443,3.7756,2.8314,4.8763l39.3248,22.8068-12.8982,7.3938c-1.1007.6287-2.045.6287-3.1456,0ZM52.2229,138.5791c-17.7745,0-30.8306-13.3713-30.8306-29.8871,0-1.2585.1578-2.5169.3143-3.7754l30.987,17.9323c1.8871,1.1005,3.7757,1.1005,5.6628,0l39.4811-22.807v14.9435c0,1.2585-.4721,2.2021-1.5728,2.8308l-30.0443,17.3025c-4.0898,2.359-8.9662,3.4605-13.9989,3.4605h.0014ZM91.2319,157.296c19.0327,0,34.9188-13.5272,38.5383-31.4594,17.6164-4.562,28.9425-21.0779,28.9425-37.908,0-11.0112-4.719-21.7066-13.2133-29.4143.7867-3.3035,1.2595-6.607,1.2595-9.909,0-22.4929-18.2471-39.3247-39.3251-39.3247-4.2461,0-8.3363.6285-12.4262,2.045-7.0792-6.9213-16.8318-11.3254-27.5271-11.3254-19.0331,0-34.9191,13.5268-38.5384,31.4591C11.3255,36.0212,0,52.5373,0,69.3675c0,11.0112,4.7184,21.7065,13.2125,29.4142-.7865,3.3035-1.2586,6.6067-1.2586,9.9092,0,22.4923,18.2466,39.3241,39.3248,39.3241,4.2462,0,8.3362-.6277,12.426-2.0441,7.0776,6.921,16.8302,11.3251,27.5271,11.3251Z`;\n\nexport const openai = `\n\n \n\n`;\n\nconst svg = `\n\n \n \n \n \n\n`;\n\nexport default render(svg);\n",[225],"9aee3608-3cd1-11f1-8593-42b51c65c3df","lucide.tsx","622c5f3a-3cd0-11f1-9caa-42b51c65c3df",121,["D",1776700637011],"// Fetch Lucide icon SVGs on demand by importing icon node data from the\n// `lucide-react` npm package. The package publishes each icon as an ES module\n// at `lucide-react/dist/esm/icons/.js` that exports a raw `__iconNode`\n// array — no React rendering required.\n//\n// We pin to a specific pre-release because npm's `latest` dist-tag on the\n// lucide packages points at an old (1.8.0) placeholder version; the active\n// releases are tagged `dev` / `next`. Bump the version here to update icons.\n\nconst LUCIDE_VERSION = \"0.554.0-rc.0\";\n\ntype IconAttrs = Record;\ntype IconChild = [tag: string, attrs: IconAttrs];\n\nconst cache = new Map();\nconst NAME_RE = /^[a-z0-9-]+$/;\n\n// Standard attributes applied to every Lucide icon's root

${logos[name]}

${name}

\n SVG\n PNG\n

A collection of SVG logos. Click SVG to view, or PNG to download a rasterized version. Or frame a logo to make a padded thumbnail.

Diff · v125