sprix/README.md

Sprites for your project, with pleasure

# Sprix

Sprites for your project, with pleasure!

Sprix is the most efficient, yet joyful 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

```bash
npx sprix init --iconsPath ./icons
```

### Generate your sprites

```bash
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

```tsx
import { injectSprites } from "sprix";

injectSprites();
```

### Use sprites in your project

```tsx
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.

```json
{
  "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](CONTRIBUTING.md) for details.

## 📝 License

MIT