npm package: @frontiers/pictograms
Description: A comprehensive pictogram library with colorful SVG illustrations and Vue 3 components for the Frontiers design system
Author: Frontiers
Latest version: 1.2.0

# @frontiers/pictograms

A comprehensive pictogram library with colorful SVG illustrations and Vue 3 components for the Frontiers design system.

## Features

- 🎨 **Colorful Illustrations** - Full-color pictograms (not monochrome like icons)
- 📐 **256px Size** - Large 2xl size variants for prominent displays
- 🎭 **Color Variants** - Multiple color schemes per pictogram (Red, Blue, Green, etc.)
- ⚡ **Vue 3 Components** - Ready-to-use Vue components with TypeScript support
- 📦 **Direct SVG Access** - Import SVG files directly if needed
- 🔧 **Customizable Size** - Adjustable size prop for Vue components

## Installation

```bash
npm install @frontiers/pictograms
```

## Usage

### Vue Components

```vue
<script setup>
import {
  SearchBluePictogram,
  DeniedRedPictogram,
  ScienceBluePictogram,
} from "@frontiers/pictograms"
</script>

<template>
  <div>
    <!-- Default size (256px) -->
    <SearchBluePictogram />

    <!-- Custom size -->
    <DeniedRedPictogram :size="128" />
    <ScienceBluePictogram size="512" />

    <!-- With custom classes -->
    <SearchBluePictogram :size="200" class="my-custom-class" />
  </div>
</template>
```

### Direct SVG Import

```javascript
import searchBlue from "@frontiers/pictograms/svg/search-pictogram-blue.svg"
import deniedRed from "@frontiers/pictograms/svg/denied-pictogram-red.svg"
```

## Component Naming

Pictogram components follow this naming pattern:

- **SVG filename**: `{name}-pictogram-{color}.svg` (kebab-case)
- **Component name**: `{Name}{Color}Pictogram` (PascalCase, "-pictogram-" removed to avoid redundancy)

Examples:

| SVG File                     | Component Name         |
| ---------------------------- | ---------------------- |
| `search-pictogram-blue.svg`  | `SearchBluePictogram`  |
| `denied-pictogram-red.svg`   | `DeniedRedPictogram`   |
| `science-pictogram-blue.svg` | `ScienceBluePictogram` |

## Color Variants

Pictograms come in multiple color variants:

- 🔵 Blue (default)
- 🔴 Red
- 🟢 Green
- 🟡 Yellow
- 🟠 Orange
- 🟣 Purple

If a pictogram doesn't have a specific color variant, the blue variant is used as default.

## Props

All pictogram components accept the following props:

### `size`

- **Type**: `Number | String`
- **Default**: `256`
- **Description**: Width and height of the pictogram in pixels

```vue
<AccessibilityBluePictogram :size="128" />
<AccessibilityBluePictogram size="256" />
```

## Differences from Icons

| Feature          | Icons                     | Pictograms             |
| ---------------- | ------------------------- | ---------------------- |
| **Size**         | 24px                      | 256px                  |
| **Colors**       | Monochrome (currentColor) | Full color (preserved) |
| **Usage**        | UI elements, buttons      | Illustrations, headers |
| **Default Size** | 24                        | 256                    |
| **Variants**     | Size variants             | Color + size variants  |

## TypeScript Support

This package includes TypeScript definitions:

```typescript
import type { PictogramComponent, PictogramProps } from "@frontiers/pictograms"

const MyPictogram: PictogramComponent = AccessibilityBluePictogram
```

## Development

### Building from Figma

This package includes scripts to export and generate components from Figma:

```bash
# Export SVGs from Figma
npm run export

# Generate Vue components from SVGs
npm run generate

# Do both
npm run build
```

**Requirements**:

- Figma Personal Access Token (set in `.env` file as `FIGMA_TOKEN`)
- Access to the Frontiers Foundations Figma file

### Figma Source

Pictograms are sourced from:

**File**: [Foundations](https://www.figma.com/design/jDOnqag4paB2kiJtu2AbqK/Foundations)  
**Page**: 🔵 Pictograms (node-id=10265-817)  
**Size**: 2xl(256px) variants

## License

MIT

## Contributing

Contributions are welcome! Please see the main repository for contribution guidelines.

## Related Packages

- **[@frontiers/icons](../icons)** - Monochrome icon library (24px)
- **[@frontiers/prime-preset](../preset)** - PrimeVue theme preset
- **[@frontiers/tailwind-plugin](../tailwind-plugin)** - Tailwind CSS utilities

---

**Built for PrimeVue • Customized for Frontiers**