mirror of
https://github.com/hanzoai/logo.git
synced 2026-09-30 22:52:39 +00:00
zeekay
e90e4f5e3c
- build now runs generate, so `npm run build` (and prepublishOnly / the publish-on-tag CI) render every image before packing — the npm package actually ships the pngs/icos/svgs, not just compiled JS. - Track the rendered image assets (png/ico/svg + showcase.html) in git so every size is browsable for easy reference; compiled JS stays out (CI regenerates). Full set: favicon (+ .ico), icons, apple, dock, menubar, slack (2000² square), og — 58 png, 3 ico, 5 svg. - Bump 1.0.7 → 1.0.8.
Logo Assets
Official logos and marks.
Formats
svg/- Vector formats (preferred)png/- Raster formats (various sizes)ico/- Favicon formats
Variants
- Primary logo
- Wordmark
- Icon/Symbol
- Monochrome (light/dark)
Usage
See brand guidelines for proper usage.
Download
All assets available in this repository.
License
All rights reserved. Usage requires permission.
Animated & interactive
The mark ships a self-contained, pure-CSS animated SVG — a load animation, a
hover flourish, and a press squash, with zero JavaScript. Inline it into the DOM
(not via <img>) for the hover/press interactions to fire. Honors prefers-reduced-motion.
// React — one-line interactive embed
import { HanzoLogo } from '@hanzo/logo';
<HanzoLogo variant="animated" size={64} />
// Vanilla / any framework
import { getAnimatedSVG, getAnimatedDataUrl } from '@hanzo/logo';
el.innerHTML = getAnimatedSVG(); // interactive (inline in the DOM)
img.src = getAnimatedDataUrl(); // load animation only (fine in <img>)
<!-- Raw SVG over CDN — load animation in <img>; inline the file for hover/press -->
<img src="https://unpkg.com/@hanzo/logo/svg/hanzo-mark-animated.svg" width="64" alt="" />