Quick Start

Install as Project Dependency (Recommended)

npm install @marsbased/svgpack

CLI Usage

# Basic usage - generate CSS variables
svgpack my-images/ > images.css

# With ready-to-use classes
svgpack my-images/ --background --mask > images.css

# SCSS functions instead of CSS variables
svgpack my-images/ --sass > images.scss

# Get help
svgpack --help

Example output:

:root {
  --my-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");
  --my-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'...");
}

Build Scripts

Add to your package.json scripts:

{
  "scripts": {
    "build:svg": "svgpack src/shared/assets/svg > src/styles/_svgpack.css --mask --background",
  }
}

Then run:

npm run build:svg

Global Installation (Alternative)

npm install --global @marsbased/svgpack

React Components (Optional)

import { SvgpackMask, SvgpackBackground } from '@marsbased/svgpack';

// Use as React components
<SvgpackMask image="my-icon" width="24px" height="24px" className="text-blue-500" />
<SvgpackBackground image="my-logo" width="100%" height="200px" />