npm package: @logmaster/logmaster-svgs
Description: Logmaster's Vue 2 SVG wrapper for building reusable icon and graphic components. Simply place your SVG files, and automatically generate ready-to-use Vue components for icons and graphics.
Latest version: 0.0.13

# @logmaster/logmaster-svgs

> Logmaster's Vue 2 wrapper for building reusable SVG components.  
> Automatically generate ready-to-use Vue components from raw SVG files.

---

## ✨ Features

- 📦 Easily manage your SVG assets as Vue 2 components
- 🖼️ Support for Icons and Graphics with dynamic suffixes (`Icon`, `Graphic`)
- 🎨 Fully customizable with Tailwind CSS or custom classes
- ⚡ Auto-generated components from your `/icons` and `/graphics` folders

## 📥 Installation

```bash
npm install @logmaster/logmaster-svgs
```


## 🚀 Usage

```bash
<template>
  <div>
    <ProfileSwitchIcon width="32" height="32" color="#1D4ED8" />
    <LogoGraphic className="w-32 h-16 text-gray-500" />
  </div>
</template>

<script>
import { ProfileSwitchIcon, LogoGraphic } from '@logmaster/logmaster-svgs';

export default {
  components: {
    ProfileSwitchIcon,
    LogoGraphic
  }
}
</script>
```


## 📂 How It Works

1. Place your SVG files:

    - Inside src/icons/ → will become *Icon.vue (e.g., UserIcon.vue)

    - Inside src/graphics/ → will become *Graphic.vue (e.g., LogoGraphic.vue)

2. Generate components:

```bash
npm run generate-icons
```

This will:

- Scan src/icons and src/graphics

- Create Vue 2 components in src/components/generated/

- Auto-update src/index.js with named exports

3. Build the package:

```bash
npm run build
```

This bundles your components into dist/ as ESM/UMD for distribution.

4. Publish to GitHub Packages:

```bash
npm run publish
```

## 🎨 Customization

You can style components using props or Tailwind CSS classes.

| Prop        | Description                                        | Default        |
|-------------|----------------------------------------------------|----------------|
| `width`     | Sets the SVG width                                 | `24`           |
| `height`    | Sets the SVG height                                | `24`           |
| `color`     | Sets the fill color                                | `#000`         |
| `className` | Base class applied to all SVG components           | `inline-svg`   |
| `className` | Additional class for graphic SVGs (auto-applied)   | `graphic-svg`  |
| `className` | Additional class for icon SVGs (auto-applied)      | `icon-svg`     |

Example:

Icon SVG with props for size and color

```bash
<ProfileSwitchIcon width="48" height="48" color="red" />
```

Graphic SVG using Tailwind utility classes

```bash
<LogoGraphic className="w-40 h-20 text-gray-500 hover:text-gray-700" />
```
Auto-applied context-specific class names.

`icon-svg` is auto-injected for icon components

```bash
<ProfileSwitchIcon className="custom-class" /> <!-- Will render with: class="custom-class icon-svg" -->
```

`graphic-svg` is auto-injected for graphic components

```bash
<LogoGraphic className="custom-graphic" /> <!-- Will render with: class="custom-graphic graphic-svg" -->
```


## 🛠 Development Setup

1. Clone the repo:
```bash
git clone https://github.com/logmaster/logmaster-svgs.git
cd logmaster-svgs
```

2. Install dependencies:
```bash
npm install
```

3. Generate components from SVGs:
```bash
npm run generate-icons
```

4. Build the package:
```bash
npm run build
```


## 📁 Project Structure
```bash

src/
  icons/            # Raw SVGs for icons → becomes *Icon.vue
  graphics/         # Raw SVGs for graphics → becomes *Graphic.vue
  components/
    generated/      # Auto-generated Vue components
    SVGWrapper.vue  # Shared wrapper for all SVGs
  index.js          # Auto-generated export list

scripts/
  generate-icons.js # SVG to Vue component generator script