Package Exports

@a24z/logo-component
@a24z/logo-component/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@a24z/logo-component) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Logo Component

An animated wireframe sphere logo component for React.

Installation

npm install @a24z/logo-component

Usage

import { Logo } from '@a24z/logo-component';

function App() {
  return (
    <Logo
      width={150}
      height={150}
      color="currentColor"
      particleColor="#00ff00"
      opacity={0.9}
    />
  );
}

Props

width (number, default: 150): Width of the logo in pixels
height (number, default: 150): Height of the logo in pixels
color (string, default: "currentColor"): Color of the wireframe lines
particleColor (string, optional): Color of the animated particles (defaults to color)
opacity (number, default: 0.9): Overall opacity of the logo

Exporting PNG icons

Use the provided script to render the SVG at a high resolution and optionally convert it to a PNG. The script will always write an SVG, and if sharp is installed it will also generate a PNG while keeping transparency intact.

# Install sharp once if you plan to generate PNGs
npm install sharp

# Export a 1024x1024 icon (SVG + PNG) to the exports/ directory
npm run export-icon

# Customize the export (e.g. different size, colors, or SVG only)
npm run export-icon -- --size=512 --color=#ff00ff --svg-only

Available flags

--size <number> – Output width and height in pixels (default: 1024).
--color <hex> – Stroke color for the wireframe (default: #00ffff).
--particle-color <hex> – Particle color (defaults to --color).
--opacity <0-1> – Overrides the root SVG opacity (default: 1).
--output <path> – Destination directory (default: exports).
--name <string> – Base file name used for the exports (default: logo).
--svg-only – Skip PNG generation, useful if sharp is not installed.
--background <hex|transparent> – Fill color to apply behind the icon when rasterizing.
--density-multiplier <number> – Multiplies the rasterization density before resizing (default: 2).

License

MIT