OpenMoji Logo Generator

\n \n {label} {description && ({description})}\n \n

\n onChange(e.target.value)}\n className=\"h-10 w-10 mr-2 cursor-pointer\"\n />\n onChange(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm\"\n />\n

\n {colors.map(color => (\n onChange(color)}\n className={`w-8 h-8 rounded-full border ${\n value === color ? 'border-blue-500 ring-2 ring-blue-200' : 'border-gray-300'\n }`}\n style={{ backgroundColor: color }}\n title={color}\n >\n {value === color && (\n \n \n \n )}\n \n ))}\n

\n );\n\n return (\n

Logo Preview

\n \n \n\n \n {firstPart}\n {lastPart}\n \n\n {emojiSvg && (\n \n )}\n\n \n \n \n \n\n \n \n

\n Text is automatically centered vertically for best cross-device compatibility\n

\n\n

Customize Logo

\n\n

\n \n Project Name\n \n setProjectName(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm\"\n />\n

\n\n

\n \n Font\n \n setFontFamily(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm\"\n style={{fontFamily: fontFamily}}\n >\n {fontOptions.map((font) => (\n \n ))}\n \n

\n \n

\n \n Font Size ({minFontSize}-{maxFontSize})\n \n

\n setFontSize(parseInt(e.target.value))}\n className=\"flex-grow\"\n />\n

\n setFontSize(parseInt(e.target.value))}\n className=\"w-12 px-1 py-1 border border-gray-300 rounded-md shadow-sm text-center\"\n />\n

\n\n

\n \n Enter Emoji (colors will be extracted)\n \n

\n setEmojiInput(e.target.value)}\n placeholder=\"Enter any emoji (e.g. 🚀, 🌟, 📱)\"\n className=\"flex-grow px-3 py-2 border border-gray-300 rounded-md shadow-sm\"\n maxLength={2}\n />\n \n \n

\n \n {showEmojiPicker && (\n

\n {commonEmojis.map((emoji, index) => (\n {\n setEmojiInput(emoji);\n setShowEmojiPicker(false);\n }}\n className=\"w-8 h-8 flex items-center justify-center hover:bg-gray-100 rounded cursor-pointer text-xl\"\n title={`Select ${emoji}`}\n >\n {emoji}\n \n ))}\n

\n )}\n \n

\n Type or paste any emoji, or use the picker. We'll convert it to an OpenMoji and extract its colors.\n

\n {loading && (\n

Loading emoji...

\n )}\n {error && (\n

{error}

\n )}\n \n {emojiCodepoint && !loading && !error && (\n

\n Emoji codepoint: {emojiCodepoint}\n

\n )}\n

\n\n

\n {extractedColors.length > 0 ? (\n <>\n Extracted Color Palette\n \n These colors were automatically extracted from the emoji\n \n \n ) : (\n <>\n Color Palette\n \n Choose colors for your logo\n \n \n )}\n

\n\n

\n \n

\n\n

Get SVG Code

\n \n Generate SVG\n \n {svgString && (\n

\n \n \n Copy to Clipboard\n \n

\n )}\n

\n );\n};\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n \n \n \n OpenMoji Logo Generator\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n \n \n

\n View source\n

\n Emoji graphics provided by OpenMoji – the open-source emoji and icon project. License: CC BY-SA 4.0\n

\n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\n body {\n font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n line-height: 1.5;\n padding: 20px;\n }\n`;\n","deleted","label","children",[],[153],"files",[151],"counts",{"_174":31,"_175":176,"_177":31,"_178":31},"pulls","branches",1,"forks","envVars","contents",[181],{"_107":152,"_100":153,"_154":119,"_155":-5,"_156":140,"_157":139,"_158":121,"_109":182,"_104":160,"_161":162,"_163":164,"_165":27,"_166":-5,"_103":183},["D",1743475092053],[153],"file","upstreamProject",{"_107":187,"_100":188,"_115":-5,"_116":-5,"_113":114,"_21":189},"a8427da0-2783-11f0-b46e-569c3dd06744","logoWorkshop_migrated",{"_98":99,"_135":136},"upstreamBranch",{"_107":143,"_109":192,"_193":194,"_100":42,"_141":187,"_104":195,"_142":-5,"_144":-5,"_196":197,"_111":-5,"_133":27,"_113":114,"_148":99,"_147":188},["D",1746210686559],"updatedAt",["D",1743356468603],9,"lockfileKey","1746250176209-esm.town_v_dcm31_logoWorkshop_migrated@9-main","emptyEnvVars","isNew","routes/_app.x.$handle.$name._index",{"_98":99,"_100":101,"_102":-7,"_104":-7,"_105":202,"_179":206,"_209":-7,"_210":211,"_214":-5,"_170":215,"_219":220},{"_107":108,"_100":101,"_109":203,"_111":-5,"_112":27,"_113":114,"_115":-5,"_116":-5,"_12":117,"_118":119,"_120":121,"_122":-5,"_123":31,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":125,"_133":27,"_21":204,"_137":205},["D",1746210663720],{"_98":99,"_135":136},{"_104":139,"_100":42,"_107":140,"_141":108,"_142":143,"_144":31,"_145":114,"_146":117,"_147":101,"_148":99},[207],{"_107":152,"_100":153,"_154":119,"_155":-5,"_156":140,"_157":139,"_158":121,"_109":182,"_104":160,"_161":162,"_163":164,"_165":27,"_166":-5,"_103":208},[153],"readme","upstream",{"_107":143,"_109":212,"_193":213,"_100":42,"_141":187,"_104":195,"_142":-5,"_144":-5,"_196":197,"_111":-5,"_133":27,"_113":114,"_148":99,"_147":188},["D",1746210686559],["D",1743356468603],"pull",[216],{"_107":152,"_100":153,"_154":119,"_155":-5,"_156":140,"_157":139,"_158":121,"_109":159,"_104":160,"_161":162,"_163":164,"_165":27,"_166":-5,"_167":217,"_103":218},[],[153],"previews",[216],"routes/_app","actionData","errors"]