Skip to content

README.md

Latest commit

 

History

History
57 lines (42 loc) · 1.38 KB

README.md

File metadata and controls

57 lines (42 loc) · 1.38 KB

shadecn

SVG Color Customizer with shadcn Theme Integration

Transform your SVGs into theme-aware React components. Import SVGs, customize colors with shadcn themes, and export clean JSX components that adapt to your design system.

Features

  • Theme Integration - Import shadcn CSS theme configs and map colors directly
  • Smart Color Mapping - Choose which theme colors replace which SVG colors
  • React Component Export - Convert SVGs to JSX with proper theming
  • Code Transformation - Remove IDs, classes, sizing, and format output
  • Live Preview - See changes instantly with theme color previews
  • Modern Interface - Built with shadcn/ui components

How It Works

  1. Import - Paste or upload your SVG
  2. Map Colors - Import your shadcn theme and map SVG colors to theme colors
  3. Configure - Set export options (React conversion, cleanup, formatting)
  4. Export - Get theme-aware JSX that uses hsl(var(--primary)) instead of hex colors

Theme-Aware Output

Instead of hard-coded colors:

<svg fill="#8b5cf6">
  <path d="..." />
</svg>

Get theme-integrated components:

<svg fill="hsl(var(--primary))">
  <path d="..." />
</svg>

Tech Stack

  • React + TypeScript
  • Tailwind CSS + shadcn/ui
  • Vite
  • Culori (for OKLCH color conversion)

Development

npm install
npm run dev

Deployment

npm run build