@frontiers/pictograms

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

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

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