@openeos/pos-icons

Consistent, AI-generated food & drink icons for point-of-sale systems.

Features

• Flat/minimal design, white background
• 256x256px PNG icons
• React component <PosIcon />
• Search function by name, aliases, and category
• TypeScript types

Installation

pnpm add @openeos/pos-icons

Usage

React Component

import { PosIcon } from '@openeos/pos-icons';

<PosIcon id="pommes" size={64} />
<PosIcon id="bier" size={128} className="rounded" />

Search Function

import { searchIcons, getIcon, getAllIcons } from '@openeos/pos-icons';

// Search by keyword
const results = searchIcons('pom');
// → [{ id: 'pommes', terms: [...], icon256: 'pommes.png' }]

// Get single icon by ID
const icon = getIcon('bier');

// Get all icons
const all = getAllIcons();

Without React (plain JS/HTML)

import { searchIcons, getIcon } from '@openeos/pos-icons';

// Get icon entry
const icon = getIcon('pommes');

// Path to PNG in node_modules
const iconPath = `node_modules/@openeos/pos-icons/icons/256/${icon.icon256}`;

// Example: create <img> dynamically
const img = document.createElement('img');
img.src = iconPath;
img.width = 64;
img.height = 64;
img.alt = 'Pommes';
document.body.appendChild(img);

Or directly in HTML:

<img src="node_modules/@openeos/pos-icons/icons/256/pommes.png" width="64" height="64" alt="Pommes" />

Directly from GitHub (without NPM)

Icons can also be used directly via GitHub raw URL without installation:

<img src="https://raw.githubusercontent.com/OpenEOS-Project/pos-icon-database/main/icons/256/pommes.png" width="64" height="64" alt="Pommes" />

Base URL: https://raw.githubusercontent.com/OpenEOS-Project/pos-icon-database/main/icons/256/{id}.png

Available Icons

47 products (47/47 icons generated)

Food

| Icon | Name | ID | Aliases | |:----:|------|-----|---------| | | Pommes | pommes | pommes frites, french fries, fries, fritten | | | Currywurst | currywurst | curry wurst, curry sausage | | | Hamburger | hamburger | burger, cheeseburger | | | Grillwurst | grillwurst | bratwurst, grilled sausage, rostbratwurst | | | Steak | steak | schweinesteak, pork steak, kräuterbutter | | | Baconburger | baconburger | bacon burger, speckburger | | | Double-Fire-Burger | double-fire-burger | fire burger, spicy burger, jalapeno burger | | | Striebele | striebele | funnel cake, strauben, ausgezogene, schmalzgebäck | | | Crêpes mit Puderzucker | crepes-puderzucker | crepe puderzucker, crepe sugar, crepes zucker | | | Crêpes mit Nutella | crepes-nutella | crepe nutella, crepe chocolate, schoko crepe | | | Currywurst mit Brot | currywurst-brot | currywurst brot, curry sausage with bread, currywurst brötchen | | | Currywurst mit Pommes | currywurst-pommes | currywurst pommes, curry sausage with fries, currywurst fritten | | | Grillwurst mit Brot | grillwurst-brot | grillwurst brot, bratwurst with bread, grillwurst brötchen | | | Grillwurst mit Pommes | grillwurst-pommes | grillwurst pommes, bratwurst with fries, grillwurst fritten | | | Steak mit Brot | steak-brot | steak brot, pork steak with bread, steak brötchen | | | Steak mit Pommes | steak-pommes | steak pommes, pork steak with fries, steak fritten |

Drinks

| Icon | Name | ID | Aliases | |:----:|------|-----|---------| | | Wasser | wasser | water, mineralwasser, sprudel | | | Apfelschorle | apfelschorle | apple spritzer, apfelsaft gespritzt | | | Johannisbeerschorle | johannisbeerschorle | currant spritzer, red currant spritzer, johannisbeere | | | Spezi | spezi | paulaner spezi, cola orange, cola mix | | | Limo Orange | limo-orange | orangenlimo, orange lemonade, orangenlimonade | | | Limo Zitrone | limo-zitrone | zitronenlimo, lemon lemonade, zitronenlimonade | | | Cola | cola | coca cola, coke, kola | | | Cola Zero | cola-zero | coca cola zero, coke zero, cola light, zero | | | Eistee Pfirsich | eistee | iced tea, eistee pfirsich, peach iced tea, ice tea | | | Almdudler | almdudler | herbal lemonade, kräuterlimonade, alpine herb soda | | | Pils | pils | bier, beer, pilsner, helles | | | Radler | radler | shandy, alster, beer lemonade | | | Weißwein | weisswein | white wine, gutedel, weisswein, wein weiss | | | Rotwein | rotwein | red wine, wein rot, rotwein | | | Weinschorle weiß | weinschorle-weiss | white wine spritzer, weisse weinschorle, gespritzter weiss | | | Weinschorle rot | weinschorle-rot | red wine spritzer, rote weinschorle, gespritzter rot | | | Gedeck | gedeck | wine and water, wein und wasser, flasche wein wasser | | | Wasser (Flasche) | wasser-flasche | water bottle, wasserflasche, mineralwasser flasche | | | Apfelschorle (Flasche) | apfelschorle-flasche | apple spritzer bottle, apfelschorle flasche | | | Johannisbeerschorle (Flasche) | johannisbeerschorle-flasche | currant spritzer bottle, johannisbeerschorle flasche | | | Spezi (Flasche) | spezi-flasche | spezi bottle, cola orange bottle, spezi flasche | | | Limo Orange (Flasche) | limo-orange-flasche | orange lemonade bottle, orangenlimo flasche | | | Limo Zitrone (Flasche) | limo-zitrone-flasche | lemon lemonade bottle, zitronenlimo flasche | | | Cola (Flasche) | cola-flasche | cola bottle, coke bottle, colaflasche | | | Cola Zero (Flasche) | cola-zero-flasche | cola zero bottle, coke zero bottle, cola zero flasche | | | Eistee Pfirsich (Flasche) | eistee-flasche | iced tea bottle, eistee flasche, peach iced tea bottle | | | Almdudler (Flasche) | almdudler-flasche | almdudler bottle, herbal lemonade bottle, almdudler flasche | | | Pils (Flasche) | pils-flasche | beer bottle, bierflasche, pils flasche | | | Radler (Flasche) | radler-flasche | shandy bottle, radler flasche, alster flasche | | | Wein | wein | wine, rotwein weisswein, wein rot weiss, gutedel rotwein | | | Weinschorle | weinschorle | wine spritzer, weinschorle rot weiss, gespritzter |

Generating Icons

Icons are generated using the OpenAI API (gpt-image-1).

Setup

cp .env.example .env
# Add your OPENAI_API_KEY to .env
pnpm install

Generate all missing icons

pnpm run generate

Generate a single icon

node scripts/generate-icons.mjs --product pommes

Force regenerate (overwrite)

node scripts/generate-icons.mjs --product pommes --force

Rebuild search index

pnpm run build-index

Update README icon table

The icon table in this README is auto-generated from data/products.json:

pnpm run build-readme

Project Structure

icons/
  1024/          # Master icons (1024x1024, AI-generated)
  256/           # POS icons (256x256, resized)
data/
  products.json  # Product database
  index.json     # Search index (auto-generated)
prompts/
  master-prompt.txt  # AI style prompt
scripts/
  generate-icons.mjs  # OpenAI icon generator
  build-index.mjs     # Search index builder
  build-readme.mjs    # README table generator
src/
  index.ts       # Main exports
  search.ts      # Search function
  PosIcon.tsx    # React component
  types.ts       # TypeScript types

Publishing to NPM

Initial Setup

1. NPM Login:

   npm login

2. Create organization (once):

   Since the package is scoped under @openeos/, an NPM organization openeos is required. Create one at https://www.npmjs.com/org/create.

First Publish

pnpm run generate            # Generate icons (OpenAI API)
pnpm run build-index         # Build search index
pnpm run build-readme        # Update README
pnpm publish --access public

--access public is required for scoped packages, otherwise NPM will attempt to create a paid private package. prepublishOnly automatically runs build-index + build, but icons must be generated beforehand.

Publishing Updates

npm version patch   # 0.1.0 → 0.1.1 (or: minor / major)
pnpm publish --access public

License

CC0-1.0 – Public Domain