Documentation

📖 View Full Documentation

svgpack converts SVG files into CSS variables and ready-to-use classes.

It optimizes and sanitizes SVGs and generates CSS variables for direct use, plus optional CSS classes for easy implementation. Perfect for modern web development with frameworks like Angular, NextJS, and vanilla CSS.

Why CSS Variables instead of inline SVG?

Inlining SVG directly into your HTML duplicates markup across pages and components.
svgpack converts SVG assets into CSS variables that:

• Avoid duplicated markup: SVG definitions live in CSS, not repeated in every component.
• Are cached once: The stylesheet is cached by the browser.
• Keep HTML cleaner: No large inline <svg> blocks in your templates.
• Encourage reuse: The same asset can be used consistently across the application.
• Simplify updates: Update the SVG once and the change propagates everywhere.

Additional Advantages:

• Reduced HTML size and duplication
• Centralized asset management
• Native CSS custom properties (no runtime required)
• Ready-to-use utility classes
• Works seamlessly with modern frameworks (React, Vue, Angular)
• Optional Tailwind v4 native integration

Table of Contents

• Quick Start
• CLI Usage
• CSS Variables Usage
• Tailwind v4
• SCSS Functions
• React Components
• Installation

Quick Start

Install as Project Dependency (Recommended)

npm install -D @artero/svgpack

⚠️ Previously published as @marsbased/svgpack. The old package is deprecated and will no longer receive updates.

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

# Tailwind v4 native output
svgpack my-images/ --tailwind > theme.css

# Get help
svgpack --help

Credits

Originally developed at MarsBased by Danigb and Javier Artero. Now maintained independently.

License

MIT License