@the_awkward_customer/icons

ELIZA Design System icon library - SVG icons exported from Figma.

Installation

npm install @the_awkward_customer/icons

Usage

Accessing Icon Paths

import { icons, getIconPath, hasIcon } from '@the_awkward_customer/icons';

// Get icon path
const addIconPath = getIconPath('add');
// Returns: './dist/add.svg'

// Check if icon exists
if (hasIcon('save')) {
  console.log('Save icon is available');
}

// Get all icons
console.log(icons);
// Returns: { add: './dist/add.svg', save: './dist/save.svg', ... }

Using SVG Files Directly

// Import individual SVG files
import addIcon from '@the_awkward_customer/icons/add.svg';
import saveIcon from '@the_awkward_customer/icons/save.svg';

Getting Icon Metadata

import { iconMetadata, iconNames } from '@the_awkward_customer/icons';

// Get all icon names
console.log(iconNames);
// Returns: ['add', 'save', 'menu', ...]

// Get full metadata
console.log(iconMetadata);
// Returns: { version, source, icons, count, generatedAt }

TypeScript Support

The package includes full TypeScript definitions:

import { IconName, getIconPath } from '@the_awkward_customer/icons';

// IconName is a union type of all available icon names
const iconName: IconName = 'add'; // ✓ Type-safe
const invalid: IconName = 'nonexistent'; // ✗ Type error

Available Icons

The package includes 87 icons across various categories:

• Actions: add, save, edit, delete, settings, etc.
• Audio: mic, volume-up, volume-mute, etc.
• Communication: chat-bubble, chats, at, etc.
• Files: document, pdf, image, video-file, etc.
• Navigation: menu, chevron-up, chevron-down, arrow-up, etc.
• UI: close, search, filter, expand, collapse, etc.
• AI: ai-star, ai-sparkle, prompt-suggestion
• And more...

See icons.json for the complete list with metadata.

Development

Exporting Icons from Figma

To update the icons from Figma, you'll need a Figma personal access token:

1. Get a token from Figma Settings
2. Run the export script:

FIGMA_TOKEN=your_token npm run export:icons

This will download all SVG icons to packages/icons/dist/.

Building the Package

After exporting icons, build the package to generate the index files:

npm run build:icons

This generates:

• dist/index.js - JavaScript module with icon metadata and utilities
• dist/index.d.ts - TypeScript definitions
• All individual SVG files

Publishing

cd packages/icons
npm version prerelease --preid=alpha
npm publish

Source

Icons are sourced from the Figma file: https://www.figma.com/design/eaCXjlW7ANL1Ph5vChLEFc/Icons

License

UNLICENSED