https://github.com/saitogo555/initial-logo.js
Generate JavaScript/TypeScript style logo
https://github.com/saitogo555/initial-logo.js
initial javascript logo typescript
Last synced: 29 days ago
JSON representation
Generate JavaScript/TypeScript style logo
- Host: GitHub
- URL: https://github.com/saitogo555/initial-logo.js
- Owner: saitogo555
- License: mit
- Created: 2025-12-26T04:03:23.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2026-01-03T03:16:36.000Z (about 1 month ago)
- Last Synced: 2026-01-08T12:33:27.806Z (about 1 month ago)
- Topics: initial, javascript, logo, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/initial-logo
- Size: 97.7 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# initial-logo.js
> [!WARNING]
> **Beta Version**: This project is currently in beta. APIs are subject to change without notice.
[πΊπΈ English](README.md) | [π―π΅ ζ₯ζ¬θͺ](docs/README.ja.md)
Generate JavaScript/TypeScript style logos (2 characters inside a square) easily.
## Features
- π¨ **Customizable**: Change colors, size, fonts, and more.
- π **Gradients**: Support for gradient backgrounds and text.
- π€ **Custom Fonts**: Easily load fonts from Google Fonts or other sources.
- β‘ **Lightweight**: Zero dependencies for the core logic.
- πΌοΈ **Multiple Formats**: Generate HTML Divs, SVG strings, SVG Elements, or data URLs.
## Installation
```bash
bun add initial-logo
# or
npm install initial-logo
```
## Usage
```typescript
import {
generateLogo,
generateRawSvg,
generateSvgDataUrl,
generateSvgElement,
} from 'initial-logo';
// Generate HTML Div Element
const logo = generateLogo({
text: 'TS',
size: 100,
textColor: '#ffffff',
backgroundColor: '#3178c6',
});
document.body.appendChild(logo);
// Generate SVG String
const svgString = generateRawSvg({
text: 'JS',
textColor: '#000000',
backgroundColor: '#f7df1e',
});
// Generate SVG Data URL string (usable in img/src, CSS, etc.)
const dataUrl = generateSvgDataUrl({
text: 'DN',
textColor: '#ffffff',
backgroundColor: '#000000',
});
// Generate SVG Element
const svgElement = generateSvgElement({
text: 'JS',
textColor: '#000000',
backgroundColor: '#f7df1e',
});
document.body.appendChild(svgElement);
```
### Gradient Example
```typescript
const gradientLogo = generateLogo({
text: 'GR',
textColor: ['#ff0000', '#0000ff'], // Gradient text
backgroundColor: ['#222222', '#444444'], // Gradient background
});
```
## CLI Usage
You can also use the CLI to generate logos directly from the terminal.
```bash
# Generate a logo and save to file
npx initial-logo -t TS -o logo.svg
# Customize colors and size
npx initial-logo -t JS -s 200 --textColor "#000000" --backgroundColor "#f7df1e" -o js-logo.svg
# Gradient example
npx initial-logo -t GR --textColor "#ff0000" --textColor "#0000ff" --backgroundColor "#222222" --backgroundColor "#444444" -o gradient.svg
```
Note: If `--output` is not specified, the CLI writes the generated SVG to `initial-logo.svg` in the current directory.
```bash
# Generate using default output filename
npx initial-logo -t TS
# This will create ./initial-logo.svg
```
### Options
| Option | Alias | Description | Default |
|---|---|---|---|
| `--text` | `-t` | Logo text (required) | - |
| `--size` | `-s` | Logo size in pixels | `100` |
| `--output` | `-o` | Output file path | `initial-logo.svg` |
| `--textColor` | `-T` | Text color (repeat for gradient) | `#ffffff` |
| `--backgroundColor` | `-B` | Background color (repeat for gradient) | `#000000` |
| `--fontSource` | `-f` | Font source URL | - |
| `--fontSize` | `-F` | Font size | - |
| `--help` | `-h` | Display help message | - |
## API
### `generateLogo(options: LogoOptions): HTMLDivElement`
Generates a logo as an HTML `div` element.
### `generateRawSvg(options: LogoOptions): string`
Generates a logo as an SVG string.
### `generateSvgDataUrl(options: LogoOptions): string`
Generates a logo as a data URL string (`data:image/svg+xml;...`).
### `generateSvgElement(options: LogoOptions): SVGElement`
Generates a logo as an SVG DOM element.
#### `LogoOptions`
| Property | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | (Required) | Exactly 2 characters to display. |
| `size` | `number` | `100` | Size of the square in pixels. |
| `textColor` | `string \| string[]` | `'#ffffff'` | Text color. Pass an array for gradient. |
| `backgroundColor` | `string \| string[]` | `'#000000'` | Background color. Pass an array for gradient. |
| `fontSource` | `string` | (Embedded JetBrains Mono) | URL to load the font from (WOFF2 format recommended). |
| `fontFamily` | `string` | (Auto-generated) | Font family name to use. |
| `fontSize` | `number` | `Math.round(size * 0.65)` for HTML, `Math.round(size * 0.525)` for SVG | Font size in pixels. |
| `fontWeight` | `string \| number` | `'800'` | CSS font-weight. |
| `lineHeight` | `string \| number` | `0.8` | CSS line-height. |
## Development
```bash
# Install dependencies
bun install
# Start playground
bun run playground
# Build
bun run build
```
## Disclaimer
This tool is an unofficial project and is not affiliated with, endorsed by, or connected to Oracle, Microsoft, or the OpenJS Foundation. Users are solely responsible for the trademark and copyright compliance of any logos generated using this tool.
## License
MIT