API Reference

Reference for the @meteocons/svg, @meteocons/svg-static, and @meteocons/lottie packages.

Packages

All 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/svg-static

npm install @meteocons/svg-static

yarn add @meteocons/svg-static

pnpm add @meteocons/svg-static

bun add @meteocons/lottie

npm install @meteocons/lottie

yarn add @meteocons/lottie

pnpm add @meteocons/lottie

TypeScript types

All 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

All 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:

Animation status

All icons in Meteocons are animated. The animated field in each IconEntry is always true.

Exports map

All 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:

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

// Static SVG files (no SMIL animations)
import clearDayStatic from '@meteocons/svg-static/fill/clear-day.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';