graphics-api-remotion

Context-aware graphics API for Remotion - Fetch illustrations, icons, and doodles from 5 free sources. Zero API keys required.

✨ Features

• 🎯 Context-aware - Describe your scene, get matching graphics
• 🔑 No API keys - All 5 providers work out of the box
• 🎬 Remotion-ready - Prefetch utilities for SSR
• 📦 ESM native - Full TypeScript support
• 🎨 SVG focus - Crisp graphics at any resolution

📦 Installation

npm install graphics-api-remotion

🚀 Quick Start

Context-Aware Query

import { query, getGraphicsForContext } from 'graphics-api-remotion';

// Describe your scene → get matching graphics
const graphics = await query("developer coding startup success");
// Returns icons, illustrations, and doodles matching your context

// Get categorized results
const scene = await getGraphicsForContext("team celebrating launch");
// → { icons: [...], illustrations: [...], doodles: [...] }

Remotion Integration

Important: Remotion can't use external URLs during render. Use prefetchGraphics():

import { Composition } from 'remotion';
import { query, prefetchGraphics } from 'graphics-api-remotion';

export const MyVideo = () => (
  <Composition
    id="Scene"
    component={SceneComponent}
    calculateMetadata={async ({ props }) => {
      // 1. Query graphics by context
      const graphics = await query(props.storyline);
      // 2. Prefetch to data URIs (required for Remotion render)
      const prefetched = await prefetchGraphics(graphics);
      return { props: { ...props, graphics: prefetched } };
    }}
  />
);

🎨 Providers (5 Sources, No Auth)

Provider	Content	Count	Features
Phosphor	Icons	1,200+	6 weights (thin→fill)
Lucide	Icons	1,500+	Consistent stroke style
Iconoodle	Icons, Doodles, Illustrations	2,000+	19 themed packs
Storyset	Illustrations	2,000+	Professional SVGs
Doodle Ipsum	Doodles	Unlimited	4 styles

📚 Direct Provider Access

For specific needs, access providers directly:

import { phosphor, lucide, iconoodle, storyset, doodleIpsum } from 'graphics-api-remotion';

// Phosphor icons (6 weights)
const icon = await phosphor.get({ name: 'check', weight: 'bold' });
const icons = await phosphor.search(['arrow', 'user', 'star']);

// Lucide icons
const settings = await lucide.get({ name: 'settings' });

// Iconoodle (19 packs - icons, doodles, AND illustrations)
await iconoodle.search(['payment'], { pack: 'doodles' });
await iconoodle.search(['cat'], { pack: 'doodles-cute-animals' });
await iconoodle.search(['robot'], { pack: 'doodles-ai-icon-doodles' });
await iconoodle.search(['pizza'], { pack: 'doodles-fast-food-doodle-art' });
console.log(iconoodle.packs); // List all 19 packs

// Storyset (professional illustrations)
const illustrations = await storyset.search(['technology', 'developer']);

// Doodle Ipsum (4 styles: flat, hand-drawn, outlined, abstract)
const doodle = doodleIpsum.getRandom({ style: 'flat', width: 200, height: 200 });

📍 Context Keyword Reference

Context	Returns
"send payment"	credit-card, wallet, arrow-right
"user login"	log-in, user, key, lock
"success celebrate"	trophy, check, star
"developer coding"	code, terminal + tech illustrations
"team meeting"	users + business illustrations
"error warning"	alert-triangle, x-circle

🔧 Prefetch Functions

Function	Purpose
prefetchGraphics(graphics[])	Batch convert to data URIs
prefetchGraphic(graphic)	Single convert to data URI
svgToDataUri(svg)	Convert SVG string to data URI
getPrefetchedUrl(graphic)	Get URL (uses embedded SVG if available)

🎭 Iconoodle Packs

Pack	Content
doodles	Main (2,000+ items)
doodles-cute-animals	Animals
doodles-fast-food-doodle-art	Food
doodles-hand-drawn-lifestyle-doodle	Lifestyle
doodles-internet-network-doodles	Tech/Network
doodles-ai-icon-doodles	AI/Robot
doodles-educational-doodles	Education
christmas-illustration	Holiday
brutalist-doodles	Bold/Minimal
3d-like-shape-doodles	3D shapes
candy-icons	Colorful
cars-icons	Vehicles

🧪 Testing

npm run test:endpoints    # Provider connectivity
npm run test:remotion     # Remotion integration
npm run test:prefetch     # Prefetch verification

📄 License

MIT © siva-sub

---

Links: npm • GitHub