flaming-icons/README.md

Complete icon library with tree-shaking support for Vue and Vuetify

# 🔥 Flaming Icons

A clean, simple icon library with tree-shaking support for Vue and Vuetify.

## ✨ Features

- **Tree-shakable** - Only bundle icons you use
- **Font Awesome patterns** - Familiar API design
- **Vuetify integration** - Works seamlessly with v-icon
- **CSS icons** - Optional font-based icons for smallest bundles
- **TypeScript** - Full type safety

## 📦 Installation

```bash
npm install flaming-icons
```

## 🚀 Quick Start

### Vuetify Integration (Tree-shaking)

```javascript
import { createApp } from 'vue';
import { createVuetify } from 'vuetify';
import { createVuetifyIconSet } from 'flaming-icons';
import { home, search, settings } from 'flaming-icons/icons';

// Create Vuetify with tree-shaking friendly icon set
const vuetify = createVuetify({
  icons: {
    defaultSet: 'flaming',
    sets: { 
      flaming: createVuetifyIconSet([home, search, settings])
    }
  }
});

const app = createApp(App);
app.use(vuetify);
```

Then use in templates:

```vue
<template>
  <v-icon>flaming:home</v-icon>
  <v-icon>flaming:search</v-icon>
  <v-icon>flaming:settings</v-icon>
</template>
```

### CSS Icons (Smallest Bundle)

```javascript
import { loadAllCSS } from 'flaming-icons/css';

// Load all icon CSS
loadAllCSS();
```

```html
<!-- Use with CSS classes -->
<i class="flaming-icon-home"></i>
<i class="flaming-icon-search"></i>
```

## 📋 Available Icons

- `home` - Home/dashboard icon
- `search` - Search/magnifying glass icon  
- `settings` - Settings/gear icon
- `edit` - Edit/pencil icon
- `deleteIcon` - Delete/trash icon (exported as deleteIcon to avoid reserved word)
- `userProfile` - User profile/avatar icon

## 🛠️ API Reference

### Vuetify

```javascript
import { createVuetifyIconSet } from 'flaming-icons/vuetify';
import { home, search, settings } from 'flaming-icons/icons';

// Pass icons directly to the icon set (tree-shaking friendly)
const iconSet = createVuetifyIconSet([home, search, settings]);
```

### CSS

```javascript
import { 
  loadAllCSS, 
  loadIconCSS, 
  getIconCSS, 
  getAllCSS 
} from 'flaming-icons/css';

// Load specific icons
loadIconCSS(['home', 'search']);

// Get CSS string
const css = getIconCSS(['home', 'search']);
```

## 📁 File Structure

```
src/
├── icons/           # Icon definitions (tree-shakable)
├── vuetify.ts       # Vuetify integration
├── css.ts           # CSS/font icons
├── types/           # TypeScript definitions
└── index.ts         # Main exports
```

## 🎯 Design Principles

1. **Simplicity** - Clean, minimal API
2. **Tree-shaking** - Only bundle what you use
3. **Modern patterns** - Intuitive API design
4. **Framework integration** - Easy Vuetify setup
5. **Performance** - Optimized for production

## 📄 License

MIT