API Reference

Reference for the @meteocons/svg and @meteocons/lottie packages.

Packages

Both packages have identical directory structures, manifests, and TypeScript types.

Install

bun add @meteocons/svg

npm install @meteocons/svg

yarn add @meteocons/svg

pnpm add @meteocons/svg

bun add @meteocons/lottie

npm install @meteocons/lottie

yarn add @meteocons/lottie

pnpm add @meteocons/lottie

TypeScript types

Both packages export the following types from index.d.ts:

export interface IconEntry {
    slug: string;       // e.g. "clear-day"
    name: string;       // e.g. "clear-day"
    animated: boolean;  // true if icon has animation keyframes
}

export interface IconCategory {
    name: string;       // e.g. "Standard"
    slug: string;       // e.g. "standard"
    icons: IconEntry[];
}

export interface IconManifest {
    styles: string[];           // ["fill", "flat", "line", "monochrome"]
    categories: IconCategory[];
}

Import types in your project:

import type { IconManifest, IconCategory, IconEntry } from '@meteocons/svg';

Manifest

Both packages include a manifest.json with metadata about all icons. This is useful for building icon pickers, search interfaces, or generating documentation.

import type { IconManifest } from '@meteocons/svg';
import manifest from '@meteocons/svg/manifest.json';

// Access styles
console.log(manifest.styles); // ["fill", "flat", "line", "monochrome"]

// Access categories
for (const category of manifest.categories) {
    console.log(`${category.name} (${category.slug}): ${category.icons.length} icons`);
}

Query examples

import manifest from '@meteocons/svg/manifest.json';

// Flatten all icons into a single list
const allIcons = manifest.categories.flatMap(c => c.icons);

// Find all rain-related icons
const rainIcons = allIcons.filter(icon => icon.slug.includes('rain'));
// → ["rain", "drizzle", "partly-cloudy-day-rain", "thunderstorms-rain", ...]

// Get only animated icons
const animated = allIcons.filter(icon => icon.animated);

// Get icons by category
const standardIcons = manifest.categories
    .find(c => c.slug === 'standard')
    ?.icons ?? [];

// Search icons by partial match
function searchIcons(query: string): IconEntry[] {
    const q = query.toLowerCase();
    return allIcons.filter(icon => icon.slug.includes(q));
}

// Build a slug → category lookup
const categoryBySlug = new Map<string, string>();
for (const category of manifest.categories) {
    for (const icon of category.icons) {
        categoryBySlug.set(icon.slug, category.name);
    }
}

Styles

All four styles contain the same set of icons. The monochrome style is unique in that it uses currentColor instead of fixed colors, allowing icons to inherit the parent element’s text color.

File naming

Icons use kebab-case slugs following a consistent pattern:

{condition}[-{time}][-{variant}].{ext}

Examples

Categories

Icons are organized into the following categories:

Animated vs static

The animated field in each IconEntry indicates whether an icon has animation keyframes. Static icons (like wind direction arrows or UV index badges) are included in both packages — they render as still images.

const allIcons = manifest.categories.flatMap(c => c.icons);

const animated = allIcons.filter(icon => icon.animated);
const static_ = allIcons.filter(icon => !icon.animated);

console.log(`${animated.length} animated, ${static_.length} static`);

Exports map

Both packages use Node.js subpath exports for direct file imports:

{
    "exports": {
        "./*": "./*",
        "./manifest.json": "./manifest.json"
    }
}

This means you can import any file directly by path:

// SVG files
import clearDay from '@meteocons/svg/fill/clear-day.svg';
import rain from '@meteocons/svg/line/rain.svg';

// Lottie JSON
import clearDayLottie from '@meteocons/lottie/fill/clear-day.json';

// Manifest
import manifest from '@meteocons/svg/manifest.json';

// Types
import type { IconManifest, IconEntry } from '@meteocons/svg';