@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

npm install @frontiers/pictograms

Usage

Vue Components

<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

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

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

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:

# 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
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 - Monochrome icon library (24px)
• @frontiers/prime-preset - PrimeVue theme preset
• @frontiers/tailwind-plugin - Tailwind CSS utilities

Built for PrimeVue • Customized for Frontiers