v10/packages/core/icons

@vjs-10/icons

SVG icon library for Video.js media players

Status: Early Development

⚠️ PROTOTYPE - SUBJECT TO CHANGE

This package is in early prototype phase. Expect significant changes including:

• Package restructuring and naming
• Breaking API changes
• Major architectural updates
• Incomplete or experimental features

Not recommended for production use.

Overview

@vjs-10/icons is a curated collection of SVG icons designed specifically for media player interfaces. This package serves as the single source of truth for all Video.js icons, providing raw SVG assets that platform-specific packages transform into their respective component formats.

Key Features

• Curated Media Icons - Comprehensive set of media player interface icons
• SVG Source Files - Raw SVG assets optimized for transformation
• Platform Agnostic - Icons serve as source for HTML, React, React Native implementations
• Optimized Assets - Clean, minimal SVG markup
• Consistent Design - Cohesive visual language across all icons

Installation

npm install @vjs-10/icons

Icon Catalog

Playback Controls

• play.svg - Play button
• pause.svg - Pause button
• replay.svg - Replay/restart button
• forward.svg - Skip forward
• backward.svg - Skip backward

Volume Controls

• volume-high.svg - High volume indicator
• volume-medium.svg - Medium volume indicator
• volume-low.svg - Low volume indicator
• volume-off.svg / mute.svg - Muted state

Playback Features

• fullscreen.svg - Enter fullscreen
• fullscreen-exit.svg - Exit fullscreen
• settings.svg - Settings menu
• captions.svg - Closed captions
• picture-in-picture.svg - PiP mode

Additional Controls

• airplay.svg - AirPlay casting
• chromecast.svg - Chromecast
• download.svg - Download media
• share.svg - Share functionality

Usage

This package is typically used as a dependency by platform-specific icon packages rather than directly by applications.

Direct SVG Access

import { getIconPath } from '@vjs-10/icons';

// Get path to SVG file
const playIconPath = getIconPath('play');

// In Node.js or build tools
import { readFileSync } from 'fs';
const playSvg = readFileSync(playIconPath, 'utf-8');

With Platform Packages

For Web Components:

npm install @vjs-10/html-icons

For React:

npm install @vjs-10/react-icons

For React Native:

npm install @vjs-10/react-native-icons

Icon Format Standards

All icons in this package follow these guidelines:

• Format: SVG 1.1
• Viewbox: 0 0 24 24 (standardized 24×24 grid)
• Stroke: None (filled icons)
• Color: currentColor (inherits from context)
• Optimization: Minified, cleaned paths
• Accessibility: Semantic, descriptive file names

Architecture

@vjs-10/icons (source SVGs)
    ↓
    ├─→ @vjs-10/html-icons (Web Components)
    ├─→ @vjs-10/react-icons (React Components)
    └─→ @vjs-10/react-native-icons (React Native Components)

This package serves as:

• Single source of truth for all icon designs
• Asset library consumed by platform-specific generators
• Design system foundation ensuring visual consistency

Adding New Icons

1. Design Requirements:

   • 24×24 viewBox
   • Single color (will be replaced with currentColor)
   • Minimal, clean paths
   • Optimized file size

2. File Naming:

   • Use kebab-case: volume-high.svg
   • Descriptive, clear names
   • Avoid abbreviations

3. Process:

   # Add SVG to assets directory
   cp new-icon.svg packages/core/icons/assets/
   
   # Regenerate platform packages
   cd packages/react/react-icons
   pnpm generate
   
   cd packages/html/html-icons
   pnpm generate
   

Development

# Build the package
pnpm build

# Watch mode for development
pnpm dev

# Clean build artifacts
pnpm clean

Package Dependencies

• Dependencies: None (pure SVG assets)
• Used by: @vjs-10/html-icons, @vjs-10/react-icons, @vjs-10/react-native-icons

Platform Integration

HTML Icons

Generates Web Component icon elements from SVG sources.

npm install @vjs-10/html-icons

React Icons

Generates React components with SVGR from SVG sources.

npm install @vjs-10/react-icons

See @vjs-10/react-icons for detailed usage.

React Native Icons

Generates React Native SVG components from SVG sources.

npm install @vjs-10/react-native-icons

Design Philosophy

Icons follow Video.js design principles:

• Clarity - Instantly recognizable at small sizes
• Consistency - Uniform stroke weight and visual density
• Accessibility - Clear, distinguishable shapes
• Simplicity - Minimal visual noise

Related Packages

• @vjs-10/html-icons - Web Component implementation
• @vjs-10/react-icons - React component implementation
• @vjs-10/core - Core Video.js components

Contributing

When contributing new icons:

1. Follow the design guidelines above
2. Optimize SVGs (remove unnecessary metadata)
3. Test icon clarity at 16×16, 24×24, and 32×32 sizes
4. Ensure currentColor is used for fill/stroke
5. Provide context in PR description

License

Apache-2.0