Sprix

Sprites for your project, with pleasure!

Sprix is the most efficient, yet enjoyable way to work with icons in your project.

[Demo GIF placeholder]

✨ Features

• CLI command for Sprite Generation: Convert icon directories into an optimized SVG sprite sheet.
• Fully Type-Safe: Full TypeScript support with auto-generated types.
• Premium Developer Experience: Powerful VSCode integration for icon preview and navigation.
• Flexible Structure: Works with both flat and nested icon directories.
• Tree Shaking: Only the sprites you use are included.
• Framework Agnostic: Ready-to-use components for React, Svelte, Solid, Vue, or easily create your own.

🚀 Quick Start

Initialize your sprites

npx sprix init --iconsPath ./icons

Generate your sprites

npm run sprix:generate

📦 What You Get

your-project/
├── icons/
│   ├── arrow-right.svg
│   ├── ...
├── sprix/
│   ├── sprites.svg
│   └── sprites.ts
└── sprix.config.json

💻 Usage

Inject sprites into your project

import { injectSprites } from "sprix";

injectSprites();

Use sprites in your project

import { Sprite } from "sprix/react";

function App() {
  return <Sprite name="arrow-right" className="w-6 h-6" />;
}

[Demo GIF placeholder showing the component usage]

⚙️ Configuration file

The init command will create a sprix.config.json file in your project root. This file is used to be used by the CLI and the VSCode extension. And it can also serve as a documentation for your sprites.

Multiple icons directories can be used targetting different directories.

{
  "sprites": [
    {
      "name": "icons",
      "path": "./icons"
    }
  ]
}

🛠️ CLI Commands

• sprix init - Initialize configuration
• sprix build - Generate sprite sheet
• sprix watch - Watch for changes
• sprix check - Validate icons

📚 Documentation

[Link to full documentation]

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide for details.

📝 License

MIT