@luminastudy/logo

Lumina logo assets library - SVG and PNG exports for use across all systems.

Installation

pnpm add @luminastudy/logo
# or
npm install @luminastudy/logo

Usage

JavaScript/Node.js

const logo = require('@luminastudy/logo');

// Use the SVG logo
console.log(logo.svg); // Path to logo.svg

// Use the default PNG (512x512)
console.log(logo.png); // Path to logo.png

// Use specific sizes
console.log(logo.sizes[256]); // Path to logo-256.png

// Use favicon sizes
console.log(logo.favicon[32]); // Path to logo-32.png

// Use icon sizes
console.log(logo.icon[128]); // Path to logo-128.png

// Use large sizes
console.log(logo.large[1024]); // Path to logo-1024.png

TypeScript

import logo from '@luminastudy/logo';

// Fully typed paths
const svgPath: string = logo.svg;
const pngPath: string = logo.png;
const iconPath: string = logo.icon[256];

React Example

import logo from '@luminastudy/logo';

function App() {
  return (
    <div>
      <img src={logo.svg} alt="Lumina Logo" />
      {/* or */}
      <img src={logo.png} alt="Lumina Logo" width="512" height="512" />
    </div>
  );
}

Next.js Example

import Image from 'next/image';
import logo from '@luminastudy/logo';

function Header() {
  return (
    <Image
      src={logo.png}
      alt="Lumina Logo"
      width={256}
      height={256}
    />
  );
}

Available Assets

SVG

• logo.svg - Original vector logo (scalable)

PNG Sizes

Favicon Sizes

• logo-16.png (16×16)
• logo-32.png (32×32)
• logo-48.png (48×48)

Icon Sizes

• logo-64.png (64×64)
• logo-128.png (128×128)
• logo-256.png (256×256)
• logo-512.png (512×512) - Also available as default logo.png

Large Sizes

• logo-1024.png (1024×1024)
• logo-2048.png (2048×2048)

API Reference

logo.svg

Path to the SVG logo file.

logo.png

Path to the default PNG logo (512×512).

logo.sizes

Object containing paths to all PNG sizes:

{
  16: string;
  32: string;
  48: string;
  64: string;
  128: string;
  256: string;
  512: string;
  1024: string;
  2048: string;
}

logo.favicon

Favicon-optimized sizes (16, 32, 48):

{
  16: string;
  32: string;
  48: string;
}

logo.icon

Icon sizes (64, 128, 256, 512):

{
  64: string;
  128: string;
  256: string;
  512: string;
}

logo.large

Large sizes (1024, 2048):

{
  1024: string;
  2048: string;
}

Development

Building

pnpm build

This will:

1. Clean the dist directory
2. Copy the SVG logo
3. Generate PNG files at all specified sizes
4. Generate index.js with path exports
5. Generate index.d.ts with TypeScript definitions

Scripts

• pnpm build - Build all assets
• pnpm clean - Clean the dist directory
• pnpm release - Create a new release (interactive)
• pnpm release:dry - Dry run release (no changes)
• pnpm release:patch - Release patch version
• pnpm release:minor - Release minor version
• pnpm release:major - Release major version

Installing Dependencies

pnpm install

Releasing

This project uses release-it for automated releases.

Setup

1. Copy .env.example to .env:

   cp .env.example .env

2. Add your tokens to .env:

   • GITHUB_TOKEN - GitHub Personal Access Token with repo permissions (create at https://github.com/settings/tokens)
   • NPM_TOKEN - NPM Access Token (Automation or Publish type, create at https://www.npmjs.com/settings/YOUR_USERNAME/tokens)

Release Commands

# Interactive release (choose version bump interactively)
pnpm release

# Dry run (see what would happen without actually releasing)
pnpm release:dry

# Specific version bumps
pnpm release:patch  # 1.0.0 -> 1.0.1
pnpm release:minor  # 1.0.0 -> 1.1.0
pnpm release:major  # 1.0.0 -> 2.0.0

The release process will:

1. Run the build process
2. Bump the version in package.json
3. Generate/update CHANGELOG.md
4. Create a git commit and tag
5. Push to GitHub
6. Create a GitHub release
7. Publish to npm

Logo Colors

The Lumina logo uses the following colors:

• Primary (Gold): #f0ba4a
• Secondary (Blue): #315c96

License

MIT