flaming-icons

🔥 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

npm install flaming-icons

🚀 Quick Start

Vuetify Integration (Tree-shaking)

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:

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

CSS Icons (Smallest Bundle)

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

// Load all icon CSS
loadAllCSS();

<!-- 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

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

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

• Simplicity - Clean, minimal API
• Tree-shaking - Only bundle what you use
• Modern patterns - Intuitive API design
• Framework integration - Easy Vuetify setup
• Performance - Optimized for production

📄 License

MIT