@beyondequity/logo

Official Beyond Equity logo package providing TypeScript/React components and utilities for consistent branding.

Installation

npm install @beyondequity/logo
# or
yarn add @beyondequity/logo
# or
pnpm add @beyondequity/logo

Usage

TypeScript/JavaScript

import {
  beyondEquityLogo,
  beyondEquityLogoMono,
  beyondEquityLogoWhite,
  beyondEquityLogoDataUrl,
  getLogo
} from '@beyondequity/logo';

// Get color logo as SVG string
console.log(beyondEquityLogo);

// Get logo as data URL
const dataUrl = beyondEquityLogoDataUrl;

// Get logo with options
const monoLogo = getLogo({ variant: 'mono', format: 'svg' });

React

import { Logo } from '@beyondequity/logo/react';

function App() {
  return (
    <div>
      {/* Color variant */}
      <Logo variant="color" size={64} />

      {/* Monochrome variant */}
      <Logo variant="mono" size={48} />

      {/* White variant for dark backgrounds */}
      <Logo variant="white" size={32} />
    </div>
  );
}

API

Logo Variants

• color - Full color logo (default)
• mono - Monochrome logo
• white - White logo for dark backgrounds

Logo Formats

• svg - SVG string (default)
• dataUrl - Data URL for use in img src
• base64 - Base64 encoded string

React Component Props

interface LogoProps {
  variant?: 'color' | 'mono' | 'white';
  size?: number;
  className?: string;
  style?: React.CSSProperties;
}

Development

# Install dependencies
npm install

# Build the package
npm run build

# Watch mode for development
npm run dev

# Run type checking
npm run typecheck

# Generate favicon and icon files
npm run generate

Logo Customization

The logo SVG can be replaced in src/logos.ts. Update the getColorSVG() function with your actual logo design.

License

MIT © Beyond Equity