API Reference

import { Icon } from 'assets-ai';

<Icon 
  description="home" 
  variant="regular"
  size={24}
  color="#000"
  className="icon"
  style={{ cursor: 'pointer' }}
  fallback={true}
  alt="Home icon"
/>

import { Image } from 'assets-ai';

<Image 
  description="sunset over mountains" 
  width={800}
  height={600}
  alt="Beautiful sunset"
  className="image"
  fallback={true}
/>

import { Video } from 'assets-ai';

<Video 
  description="ocean waves" 
  width={1280}
  height={720}
  controls
  autoPlay={false}
  loop={false}
  muted={false}
  className="video"
  fallback={true}
/>

import { Skeleton } from 'assets-ai';

<Skeleton 
  type="icon"
  size={24}
  className="skeleton"
  alt="Loading icon"
/>

import { MediaProvider } from 'assets-ai';

<MediaProvider 
  batchDelay={500}
  maxCacheSize={2 * 1024 * 1024}
>
  {children}
</MediaProvider>

import { useMediaContext } from 'assets-ai';

function MyComponent() {
  const { mediaMap, registerMedia, isItemLoading, getStaticUrl } = useMediaContext();
  
  // Use context values...
}

function CustomMediaComponent() {
  const { mediaMap, registerMedia, isItemLoading } = useMediaContext();
  
  useEffect(() => {
    registerMedia("icon", "custom icon", "regular");
  }, [registerMedia]);
  
  const url = mediaMap["icon:custom icon:regular"];
  const loading = isItemLoading("icon", "custom icon", "regular");
  
  if (loading) return <div>Loading...</div>;
  if (url) return <img src={url} alt="Custom icon" />;
  return null;
}

import { configureMedia } from 'assets-ai';

configureMedia({
  apiEndpoint: "https://api.oblien.com/icons/fetch",
  apiToken: process.env.NEXT_PUBLIC_OBLIEN_TOKEN,
  manifestUrl: "/media-manifest.json",
  maxCacheSize: 2 * 1024 * 1024,
  staticBaseUrls: {
    icon: "https://cdn.oblien.com/icons/",
    image: "https://cdn.oblien.com/images/",
    video: "https://cdn.oblien.com/videos/",
  },
});

import { clearMediaCache } from 'assets-ai';

function Settings() {
  const handleClear = () => {
    clearMediaCache();
    console.log('Cache cleared!');
  };
  
  return <button onClick={handleClear}>Clear Cache</button>;
}

type MediaType = "icon" | "image" | "video";

type MediaMap = Record<string, string>;

// Example:
const mediaMap: MediaMap = {
  "icon:home:regular": "https://cdn.oblien.com/icons/home-regular.svg",
  "image:sunset": "https://cdn.oblien.com/images/sunset.jpg",
  "video:demo": "https://cdn.oblien.com/videos/demo.mp4",
};

interface MediaRequest {
  type: MediaType;
  description: string;
  variant?: "regular" | "bold" | "light" | "broken" | "two-tone" | "outline";
}

// Example:
const request: MediaRequest = {
  type: "icon",
  description: "home",
  variant: "regular"
};

interface MediaConfig {
  apiEndpoint: string;
  apiToken: string;
  manifestUrl?: string;
  maxCacheSize: number;
  staticBaseUrls?: {
    icon?: string;
    image?: string;
    video?: string;
  };
}

NEXT_PUBLIC_OBLIEN_TOKEN=your_token_here

configureMedia({
  apiToken: process.env.NEXT_PUBLIC_OBLIEN_TOKEN,
});

// Access cache directly
const cache = localStorage.getItem('oblien_media_cache');
const data = JSON.parse(cache || '{}');
console.log(data);

// Missing API token - warnings in console
<Icon description="home" />
// Console: "[Media] API request failed"

// Invalid description - shows fallback
<Icon description="" fallback={<div>Error</div>} />

// Network error - shows fallback or empty space
<Image description="sunset" fallback={true} />

// These 3 requests will be batched together
<Icon description="home" />
<Icon description="search" />
<Icon description="settings" />

// Single API request: POST /fetch with 3 items

// First render - API request
<Icon description="home" />

// Subsequent renders - instant from cache
<Icon description="home" />

{
  "icon:home:regular": "https://cdn.oblien.com/icons/home-regular.svg",
  "icon:search:regular": "https://cdn.oblien.com/icons/search-regular.svg"
}

import type { 
  MediaType, 
  MediaMap, 
  MediaRequest,
  MediaContextType 
} from 'assets-ai';

const type: MediaType = "icon";
const map: MediaMap = {};
const request: MediaRequest = {
  type: "icon",
  description: "home",
  variant: "regular"
};