v10/packages/react/react-icons

@vjs-10/react-icons

React-specific icon components derived from @vjs-10/icons.

Overview

This package provides React components for media player icons that are automatically generated from SVG files. All icon components are built using SVGR to transform SVG assets into optimized React components.

🔄 Auto-Generated Components

Important: The React components in this package are automatically generated. Do not edit them directly.

Generated Files Location

src/generated-icons/
├── index.ts          # Auto-generated exports (DO NOT EDIT)
├── Play.tsx          # Auto-generated component (DO NOT EDIT)
├── Pause.tsx         # Auto-generated component (DO NOT EDIT)
├── VolumeHigh.tsx    # Auto-generated component (DO NOT EDIT)
├── VolumeLow.tsx     # Auto-generated component (DO NOT EDIT)
└── VolumeOff.tsx     # Auto-generated component (DO NOT EDIT)

Source of Truth

All icons originate from SVG files located in:

packages/core/icons/assets/
├── play.svg
├── pause.svg
├── volume-high.svg
├── volume-low.svg
└── volume-off.svg

Usage

import { PlayIcon, PauseIcon, VolumeHighIcon } from '@vjs-10/react-icons';

function MediaControls() {
  return (
    <div>
      <PlayIcon color="blue" width={24} height={24} />
      <PauseIcon color="red" className="pause-btn" />
      <VolumeHighIcon />
    </div>
  );
}

IconProps Interface

All generated icon components accept the following props:

interface IconProps extends SVGAttributes<SVGElement> {
  children?: never;
  color?: string;
}

• color: Sets the icon color (default: 'currentColor')
• All SVG attributes: width, height, className, onClick, etc.
• No children: Icon components don't accept children

🔧 Development Workflow

Adding New Icons

1. Add SVG file to packages/core/icons/assets/filename.svg
2. Regenerate components: Run npm run generate in this package
3. New component will be available as FilenameIcon

Modifying Existing Icons

1. Edit SVG file in packages/core/icons/assets/
2. Regenerate components: Run npm run generate in this package
3. Component updates automatically

Build Process

# Generate React components from SVG files
npm run generate

# Build the package (includes generation step)
npm run build

# Clean generated files and dist
npm run clean

📦 Package Scripts

• generate: Transform SVG files into React components using SVGR
• build: Generate components + build distribution files
• clean: Remove generated components and build artifacts

🏗️ Architecture

This package follows the monorepo's dependency hierarchy:

• Depends on: @vjs-10/icons (for shared SVG assets)
• Peer dependency: react (>=16.8.0)
• Build tool: SVGR for SVG-to-React transformation

🚫 What NOT to Edit

• src/generated-icons/ - All files are auto-generated
• Generated components have @generated JSDoc tags
• Generated files include clear "DO NOT EDIT" warnings

✅ What You CAN Edit

• src/types.d.ts - TypeScript interface definitions
• src/index.ts - Main export file (if needed)
• svgr.config.js - SVGR configuration
• package.json - Package configuration
• This README.md

🎯 Icon Naming Convention

SVG filename → React component name:

• play.svg → PlayIcon
• volume-high.svg → VolumeHighIcon
• my-custom-icon.svg → MyCustomIconIcon

🔍 Technical Details

• Generator: SVGR v8
• Output: TypeScript React components
• Optimization: Automatic SVG optimization via SVGO
• Styling: Uses currentColor for easy theming
• Size: Icons default to 1em width/height for text alignment