hanzoai/logo
2
0
Fork 0
mirror of https://github.com/hanzoai/logo.git synced 2026-09-30 22:52:39 +00:00
Code Issues Releases Activity

brand: real hero (mark + name, not 'logo' placeholder) + neutral svg names; publish 1.0.9

Browse Source 
Re-mints the README hero: the template shipped a generic card whose wordmark
literally read "logo" with a truncated subtitle. generateHero() now composes
the brand's own white mark + real name + full tagline + github/domain footer,
driven by a package.json "brand" block — one template, every org. Also renames
dist SVG sources brand-neutral (logo.svg, favicon.svg, …) so the shared build is
correct for every brand (they were hanzo-prefixed after the earlier port).
This commit is contained in:
zeekay
2026-07-04 12:58:44 -07:00
parent 8682673a83
commit dc35b7f8bf
10 changed files with 97 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/hero.svg
+17 -9
View File
@@ -1,9 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="640" viewBox="0 0 1280 640" role="img" aria-label="logo">
<rect width="1280" height="640" fill="#0A0A0A"/>
<svg x="96" y="215" width="210" height="210" viewBox="0 0 67 67"><path d="M22.21 67V44.6369H0V67H22.21Z" fill="#fff"/><path d="M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z" fill="#fff"/><path d="M22.21 0H0V22.3184H22.21V0Z" fill="#fff"/><path d="M66.7198 0H44.5098V22.3184H66.7198V0Z" fill="#fff"/><path d="M66.7198 67V44.6369H44.5098V67H66.7198Z" fill="#fff"/></svg>
<text x="378" y="276" font-family="Inter,system-ui,-apple-system,sans-serif" font-size="78" font-weight="800" letter-spacing="-2" fill="#ffffff">logo</text>
<text x="378" y="322" font-family="Inter,system-ui,sans-serif" font-size="30" fill="#ffffff" opacity=".66">Official Hanzo logo package with TypeScript/React components and…</text>
<rect x="378" y="338" width="806" height="3" rx="1.5" fill="#ffffff" opacity=".9"/>
<text x="378" y="390" font-family="Inter,system-ui,sans-serif" font-size="24" font-weight="600" fill="#ffffff" opacity=".5">github.com/hanzoai</text>
<text x="1184" y="390" text-anchor="end" font-family="Inter,system-ui,sans-serif" font-size="24" font-weight="600" fill="#ffffff" opacity=".5">hanzo.ai</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="640" viewBox="0 0 1280 640" role="img" aria-label="Hanzo brand assets">
<rect width="1280" height="640" fill="#0A0A0A"/>
<svg x="120" y="200" width="240" height="240" viewBox="0 0 67 67" xmlns="http://www.w3.org/2000/svg">
<path d="M22.21 67V44.6369H0V67H22.21Z" fill="#ffffff"/>
<path d="M0 44.6369L22.21 46.8285V44.6369H0Z" fill="#DDDDDD"/>
<path d="M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z" fill="#ffffff"/>
<path d="M22.21 0H0V22.3184H22.21V0Z" fill="#ffffff"/>
<path d="M66.7198 0H44.5098V22.3184H66.7198V0Z" fill="#ffffff"/>
<path d="M66.6753 22.3185L44.5098 20.0822V22.3185H66.6753Z" fill="#DDDDDD"/>
<path d="M66.7198 67V44.6369H44.5098V67H66.7198Z" fill="#ffffff"/>
</svg>
<text x="440" y="316" font-family="Inter,system-ui,-apple-system,sans-serif" font-size="94" font-weight="800" letter-spacing="-3" fill="#ffffff">Hanzo</text>
<text x="443" y="366" font-family="Inter,system-ui,sans-serif" font-size="27" fill="#ffffff" opacity=".62">Official brand marks — SVG, PNG, ICO, favicons &amp; app icons.</text>
<rect x="443" y="390" width="710" height="2" rx="1" fill="#ffffff" opacity=".85"/>
<text x="443" y="440" font-family="Inter,system-ui,sans-serif" font-size="23" font-weight="600" fill="#ffffff" opacity=".45">github.com/hanzoai</text>
<text x="1160" y="440" text-anchor="end" font-family="Inter,system-ui,sans-serif" font-size="23" font-weight="600" fill="#ffffff" opacity=".45">hanzo.ai</text>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

README.md
+2 -2
View File
@@ -2,9 +2,9 @@
<img src=".github/hero.svg" alt="@hanzo/logo" width="100%" />
</p>
# Logo Assets
# Hanzo — Brand & Logo Assets
Official logos and marks.
Official Hanzo brand marks in every format and size — SVG, PNG, multi-resolution ICO, favicons, app/dock/tray icons, and social cards. Installable via `@hanzo/logo`, browsable in `dist/`.
## Formats
dist/hanzo-favicon.svg → dist/favicon.svg
Vendored
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 535 B

After

Width:  |  Height:  |  Size: 535 B

dist/hanzo-logo-menubar.svg → dist/logo-menubar.svg
Vendored
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 611 B

After

Width:  |  Height:  |  Size: 611 B

dist/hanzo-logo-mono.svg → dist/logo-mono.svg
Vendored
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 576 B

After

Width:  |  Height:  |  Size: 576 B

dist/hanzo-logo-white.svg → dist/logo-white.svg
Vendored
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 576 B

After

Width:  |  Height:  |  Size: 576 B

dist/hanzo-logo.svg → dist/logo.svg
Vendored
View File
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 576 B

After

Width:  |  Height:  |  Size: 576 B

dist/showcase.html
Vendored
+10 -10
View File
@@ -108,34 +108,34 @@
</head>
<body>
<h1>🎨 Hanzo Logo Assets</h1>
<p class="subtitle">Generated: 2026-07-03T23:05:57.000Z</p>
<p class="subtitle">Generated: 2026-07-04T19:57:15.666Z</p>
<section class="section">
<h2>📁 SVG Sources</h2>
<div class="grid">
<div class="icon-item">
<div class="icon-box dark" style="width:120px;height:120px;">
<img src="hanzo-logo.svg" alt="Color Logo" style="width:100px;height:100px;">
<img src="logo.svg" alt="Color Logo" style="width:100px;height:100px;">
</div>
<span class="label">hanzo-logo.svg</span>
<span class="label">logo.svg</span>
</div>
<div class="icon-item">
<div class="icon-box light" style="width:120px;height:120px;">
<img src="hanzo-logo-mono.svg" alt="Mono Logo" style="width:100px;height:100px;">
<img src="logo-mono.svg" alt="Mono Logo" style="width:100px;height:100px;">
</div>
<span class="label">hanzo-logo-mono.svg</span>
<span class="label">logo-mono.svg</span>
</div>
<div class="icon-item">
<div class="icon-box dark" style="width:120px;height:120px;">
<img src="hanzo-logo-white.svg" alt="White Logo" style="width:100px;height:100px;">
<img src="logo-white.svg" alt="White Logo" style="width:100px;height:100px;">
</div>
<span class="label">hanzo-logo-white.svg</span>
<span class="label">logo-white.svg</span>
</div>
<div class="icon-item">
<div class="icon-box" style="width:120px;height:120px;">
<img src="hanzo-favicon.svg" alt="Favicon" style="width:100px;height:100px;">
<img src="favicon.svg" alt="Favicon" style="width:100px;height:100px;">
</div>
<span class="label">hanzo-favicon.svg</span>
<span class="label">favicon.svg</span>
</div>
</div>
</section>
@@ -295,6 +295,6 @@
</div>
</section>
<div class="timestamp">Last generated: 7/3/2026, 4:05:57 PM</div>
<div class="timestamp">Last generated: 7/4/2026, 12:57:15 PM</div>
</body>
</html>
package.json
+7 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@hanzo/logo",
"version": "1.0.8",
"version": "1.0.9",
"description": "Official Hanzo logo package with React components and utilities",
"type": "module",
"main": "dist/index.js",
@@ -77,5 +77,11 @@
},
"publishConfig": {
"access": "public"
},
"brand": {
"name": "Hanzo",
"tagline": "Official brand marks — SVG, PNG, ICO, favicons & app icons.",
"github": "hanzoai",
"domain": "hanzo.ai"
}
}
src/build.ts
+61 -13
View File
@@ -142,6 +142,51 @@ async function writeIco(pngPaths: string[], outputPath: string): Promise<void> {
console.log(`✓ ${path.relative(process.cwd(), outputPath)} (${dims})`);
}
// Brand identity for the README hero — read from package.json "brand". Falls
// back sensibly so a repo without the block still renders (never the old
// "logo" placeholder).
interface Brand { name: string; tagline: string; github: string; domain: string; }
function readBrand(): Brand {
let pkg: any = {};
try { pkg = JSON.parse(fs.readFileSync('package.json', 'utf8')); } catch { /* defaults */ }
const b = pkg.brand || {};
const scope = (pkg.name || '').replace(/^@/, '').split('/')[0]; // e.g. hanzo
return {
name: b.name || (scope ? scope.charAt(0).toUpperCase() + scope.slice(1) : 'Brand'),
tagline: b.tagline || 'Official brand marks — SVG, PNG, ICO, favicons & app icons.',
github: b.github || 'hanzoai',
domain: b.domain || 'hanzo.ai',
};
}
// generateHero composes the README hero card (1280×640): the brand's own white
// mark + the real brand NAME (not the "logo" placeholder the template shipped)
// + a full tagline + github/domain footer. Written to .github/hero.svg, which
// the README embeds. One template, every brand — driven by readBrand().
function generateHero(whiteMark: string): void {
const brand = readBrand();
const esc = (s: string) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
// Embed the brand mark as a nested, positioned SVG. Strip any existing
// width/height on the mark's root tag first (some brand marks set them,
// which collide with the x/y/width/height we inject and corrupt the SVG);
// the viewBox is preserved so scaling stays correct.
const cleaned = whiteMark.replace(/^<svg\b[^>]*>/, (tag) => tag.replace(/\s(?:width|height)="[^"]*"/g, ''));
const mark = cleaned.replace(/^<svg /, '<svg x="120" y="200" width="240" height="240" ');
const hero = `<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="640" viewBox="0 0 1280 640" role="img" aria-label="${esc(brand.name)} brand assets">
<rect width="1280" height="640" fill="#0A0A0A"/>
${mark}
<text x="440" y="316" font-family="Inter,system-ui,-apple-system,sans-serif" font-size="94" font-weight="800" letter-spacing="-3" fill="#ffffff">${esc(brand.name)}</text>
<text x="443" y="366" font-family="Inter,system-ui,sans-serif" font-size="27" fill="#ffffff" opacity=".62">${esc(brand.tagline)}</text>
<rect x="443" y="390" width="710" height="2" rx="1" fill="#ffffff" opacity=".85"/>
<text x="443" y="440" font-family="Inter,system-ui,sans-serif" font-size="23" font-weight="600" fill="#ffffff" opacity=".45">github.com/${esc(brand.github)}</text>
<text x="1160" y="440" text-anchor="end" font-family="Inter,system-ui,sans-serif" font-size="23" font-weight="600" fill="#ffffff" opacity=".45">${esc(brand.domain)}</text>
</svg>
`;
fs.mkdirSync('.github', { recursive: true });
fs.writeFileSync('.github/hero.svg', hero);
console.log(`✓ .github/hero.svg (${brand.name})`);
}
async function buildAll(): Promise<void> {
console.log('🎨 Hanzo Logo Builder\n');
@@ -161,13 +206,16 @@ async function buildAll(): Promise<void> {
// Save SVG sources
console.log('📁 SVG Sources:');
fs.writeFileSync('dist/hanzo-logo.svg', colorSVG);
fs.writeFileSync('dist/hanzo-logo-mono.svg', monoSVG);
fs.writeFileSync('dist/hanzo-logo-white.svg', whiteSVG);
fs.writeFileSync('dist/hanzo-logo-menubar.svg', menuBarSVG);
fs.writeFileSync('dist/hanzo-favicon.svg', faviconSVG);
fs.writeFileSync('dist/logo.svg', colorSVG);
fs.writeFileSync('dist/logo-mono.svg', monoSVG);
fs.writeFileSync('dist/logo-white.svg', whiteSVG);
fs.writeFileSync('dist/logo-menubar.svg', menuBarSVG);
fs.writeFileSync('dist/favicon.svg', faviconSVG);
console.log('✓ Generated 5 SVG sources\n');
// README hero card (brand mark + real brand name), written to .github/.
generateHero(whiteSVG);
// === STANDARD ICONS ===
console.log('📁 Standard Icons (dist/icons/):');
const standardSizes = [16, 32, 64, 128, 256, 512, 1024];
@@ -418,27 +466,27 @@ function generateShowcase(): void {
<div class="grid">
<div class="icon-item">
<div class="icon-box dark" style="width:120px;height:120px;">
<img src="hanzo-logo.svg" alt="Color Logo" style="width:100px;height:100px;">
<img src="logo.svg" alt="Color Logo" style="width:100px;height:100px;">
</div>
<span class="label">hanzo-logo.svg</span>
<span class="label">logo.svg</span>
</div>
<div class="icon-item">
<div class="icon-box light" style="width:120px;height:120px;">
<img src="hanzo-logo-mono.svg" alt="Mono Logo" style="width:100px;height:100px;">
<img src="logo-mono.svg" alt="Mono Logo" style="width:100px;height:100px;">
</div>
<span class="label">hanzo-logo-mono.svg</span>
<span class="label">logo-mono.svg</span>
</div>
<div class="icon-item">
<div class="icon-box dark" style="width:120px;height:120px;">
<img src="hanzo-logo-white.svg" alt="White Logo" style="width:100px;height:100px;">
<img src="logo-white.svg" alt="White Logo" style="width:100px;height:100px;">
</div>
<span class="label">hanzo-logo-white.svg</span>
<span class="label">logo-white.svg</span>
</div>
<div class="icon-item">
<div class="icon-box" style="width:120px;height:120px;">
<img src="hanzo-favicon.svg" alt="Favicon" style="width:100px;height:100px;">
<img src="favicon.svg" alt="Favicon" style="width:100px;height:100px;">
</div>
<span class="label">hanzo-favicon.svg</span>
<span class="label">favicon.svg</span>
</div>
</div>
</section>