### Meteocons Development Setup

Source: https://github.com/basmilius/meteocons/blob/main/README.md

Clone the repository, navigate to the project directory, install dependencies using bun, and copy the environment file. Ensure you fill in your Figma token and file key in the `.env` file.

```bash
git clone ...
cd meteocons
bun install
cp .env.example .env
# Fill in FIGMA_TOKEN and FIGMA_FILE_KEY
```

--------------------------------

### Install @meteocons/lottie

Source: https://github.com/basmilius/meteocons/blob/main/packages/lottie/README.md

Install the package using your preferred package manager.

```bash
bun add @meteocons/lottie
npm install @meteocons/lottie
yarn add @meteocons/lottie
pnpm add @meteocons/lottie
```

--------------------------------

### Install @meteocons/svg-static

Source: https://github.com/basmilius/meteocons/blob/main/packages/svg-static/README.md

Install the package using your preferred package manager.

```bash
bun add @meteocons/svg-static
npm install @meteocons/svg-static
yarn add @meteocons/svg-static
pnpm add @meteocons/svg-static
```

--------------------------------

### Install lottie-web and Meteocons Lottie

Source: https://context7.com/basmilius/meteocons/llms.txt

Install the necessary packages for using Lottie animations on the web.

```bash
npm install @meteocons/lottie lottie-web
```

--------------------------------

### Install @meteocons/svg

Source: https://github.com/basmilius/meteocons/blob/main/packages/svg/README.md

Install the package using your preferred package manager.

```bash
bun add @meteocons/svg
npm install @meteocons/svg
yarn add @meteocons/svg
pnpm add @meteocons/svg
```

--------------------------------

### Install Meteocons for Next.js

Source: https://context7.com/basmilius/meteocons/llms.txt

Install packages for SVG and Lottie integration in Next.js. Uses `next/image` for SVGs and `lottie-react` for animations.

```bash
npm install @meteocons/svg @meteocons/lottie lottie-react
```

--------------------------------

### Install Meteocons SVG for Astro

Source: https://context7.com/basmilius/meteocons/llms.txt

Install the SVG package for Astro integration. Lottie animations would require additional setup, potentially via a framework island.

```bash
npm install @meteocons/svg
```

--------------------------------

### Install Meteocons Package

Source: https://github.com/basmilius/meteocons/blob/main/packages/meteocons/README.md

Install the meteocons package using bun, npm, yarn, or pnpm.

```bash
bun add meteocons
npm install meteocons
yarn add meteocons
pnpm add meteocons
```

--------------------------------

### Install All Meteocons Packages

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/getting-started.mdx

Install all Meteocons packages (SVG, SVG Static, Lottie) simultaneously. Supports npm, yarn, pnpm, and bun.

```bash
bun add @meteocons/svg @meteocons/svg-static @meteocons/lottie
```

```bash
npm install @meteocons/svg @meteocons/svg-static @meteocons/lottie
```

```bash
yarn add @meteocons/svg @meteocons/svg-static @meteocons/lottie
```

```bash
pnpm add @meteocons/svg @meteocons/svg-static @meteocons/lottie
```

--------------------------------

### CDN Usage Examples

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/getting-started.mdx

Use Meteocons directly from a CDN without installation. Examples show usage with the official Meteocons CDN, unpkg, and jsDelivr.

```html
<!-- Meteocons CDN -->
<img
    src="https://cdn.meteocons.com/latest/svg/fill/clear-day.svg"
    alt="Clear day"
    width="64"
    height="64"
/>

<!-- unpkg -->
<img
    src="https://unpkg.com/@meteocons/svg/fill/clear-day.svg"
    alt="Clear day"
    width="64"
    height="64"
/>

<!-- jsDelivr -->
<img
    src="https://cdn.jsdelivr.net/npm/@meteocons/svg/fill/clear-day.svg"
    alt="Clear day"
    width="64"
    height="64"
/>
```

--------------------------------

### Install Meteocons Packages

Source: https://context7.com/basmilius/meteocons/llms.txt

Install the Meteocons npm packages based on your needs: animated SVG, static SVG, or Lottie JSON. You can install them individually or all at once. The `meteocons` package acts as a unified wrapper.

```bash
# Animated SVG (native SMIL, no runtime needed)
npm install @meteocons/svg

# Static SVG (no animations — ideal for emails, PDFs)
npm install @meteocons/svg-static

# Lottie JSON (requires a Lottie player)
npm install @meteocons/lottie

# All packages at once
npm install @meteocons/svg @meteocons/svg-static @meteocons/lottie

# Unified wrapper (exposes both SVG and Lottie via one package)
npm install meteocons
```

--------------------------------

### Install Lottie Only Package

Source: https://github.com/basmilius/meteocons/blob/main/packages/meteocons/README.md

Install only the Lottie animation version of meteocons to reduce bundle size.

```bash
bun add @meteocons/lottie
```

--------------------------------

### Install Meteocons Packages

Source: https://github.com/basmilius/meteocons/blob/main/README.md

Install the desired Meteocons package using bun. Choose between animated SVG, static SVG, or Lottie JSON animations.

```bash
bun add @meteocons/svg

bun add @meteocons/svg-static

bun add @meteocons/lottie
```

--------------------------------

### Install Meteocons for Angular

Source: https://context7.com/basmilius/meteocons/llms.txt

Install packages for SVG and Lottie integration in Angular. Includes lottie-web for animations.

```bash
npm install @meteocons/svg @meteocons/lottie lottie-web
```

--------------------------------

### Install Lottie Web Player

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/getting-started.mdx

Install the `lottie-web` player alongside the Meteocons Lottie package to enable animation playback in the browser. Supports npm, yarn, pnpm, and bun.

```bash
bun add @meteocons/lottie lottie-web
```

```bash
npm install @meteocons/lottie lottie-web
```

```bash
yarn add @meteocons/lottie lottie-web
```

```bash
pnpm add @meteocons/lottie lottie-web
```

--------------------------------

### Install SVG Only Package

Source: https://github.com/basmilius/meteocons/blob/main/packages/meteocons/README.md

Install only the SVG version of meteocons to reduce bundle size.

```bash
bun add @meteocons/svg
```

--------------------------------

### Example CDN URL Structures

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/cdn.mdx

Illustrates different formats and styles available via the CDN.

```url
https://cdn.meteocons.com/latest/svg/fill/clear-day.svg
```

```url
https://cdn.meteocons.com/latest/svg-static/fill/clear-day.svg
```

```url
https://cdn.meteocons.com/latest/lottie/line/rain.json
```

--------------------------------

### React Native Lottie Animation Setup

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/usage.mdx

Integrate Lottie animations in React Native applications using the lottie-react-native library. Ensure the library is installed via npm, yarn, pnpm, or bun.

```tsx
import LottieView from 'lottie-react-native';

function WeatherIcon() {
    return (
        <LottieView
            source={require('@meteocons/lottie/fill/rain.json')}
            autoPlay
            loop
            style={{ width: 64, height: 64 }}
        />
    );
}
```

--------------------------------

### Querying Icon Manifest

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/api.mdx

Examples of how to query and filter the icon manifest data to find specific icons based on various criteria.

```typescript
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);
    }
}
```

--------------------------------

### Initialize and Control Lottie Animations

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/usage.mdx

Use the 'lottie-web' library to load and control Lottie animations. Install the library using your preferred package manager. You can control playback speed, direction, and specific frames.

```javascript
import lottie from 'lottie-web';
import rainAnimation from '@meteocons/lottie/fill/rain.json';

const animation = lottie.loadAnimation({
    container: document.getElementById('weather-icon'),
    renderer: 'canvas',   // 'canvas' for performance, 'svg' for quality
    loop: true,
    autoplay: true,
    animationData: rainAnimation
});

// Playback control
animation.setSpeed(0.5);          // half speed
animation.setDirection(-1);        // play in reverse
animation.goToAndStop(30, true);   // jump to frame 30
animation.pause();
animation.play();

// Clean up when removing the element
animation.destroy();
```

--------------------------------

### Android Lottie Animation Setup

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/usage.mdx

Configure Lottie animations in Android layouts using XML or programmatically with the lottie-android library.

```xml
<!-- layout.xml -->
<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/weatherIcon"
    android:layout_width="64dp"
    android:layout_height="64dp"
    app:lottie_rawRes="@raw/rain"
    app:lottie_loop="true"
    app:lottie_autoPlay="true" />
```

```kotlin
// Or programmatically
val animationView = findViewById<LottieAnimationView>(R.id.weatherIcon)
animationView.setAnimation("rain.json")
animationView.repeatCount = LottieDrawable.INFINITE
animationView.playAnimation()
```

--------------------------------

### CDN Usage Example

Source: https://github.com/basmilius/meteocons/blob/main/README.md

Access Meteocons assets via CDN by constructing the URL with the version, format (svg or lottie), style, and icon name. Refer to the CDN documentation for more details.

```text
https://cdn.meteocons.com/{version}/svg/{style}/{icon}.svg
https://cdn.meteocons.com/{version}/svg-static/{style}/{icon}.svg
https://cdn.meteocons.com/{version}/lottie/{style}/{icon}.json
```

--------------------------------

### SolidJS Lottie Animation

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/frameworks.mdx

Integrate Lottie animations in SolidJS using `lottie-web`. Ensure `@meteocons/lottie` and `lottie-web` are installed.

```tsx
import { onCleanup, onMount } from 'solid-js';
import lottie from 'lottie-web';
import type { AnimationItem } from 'lottie-web';

function WeatherLottieIcon(props: {
    slug: string;
    style?: 'fill' | 'flat' | 'line' | 'monochrome';
    size?: number;
}) {
    let container!: HTMLDivElement;
    let animation: AnimationItem;

    onMount(async () => {
        const mod = await import(`@meteocons/lottie/${props.style ?? 'fill'}/${props.slug}.json`);

        animation = lottie.loadAnimation({
            container,
            renderer: 'svg',
            loop: true,
            autoplay: true,
            animationData: mod.default
        });
    });

    onCleanup(() => animation?.destroy());

    return (
        <div
            ref={container}
            style={{ width: `${props.size ?? 64}px`, height: `${props.size ?? 64}px` }}
        />
    );
}
```

--------------------------------

### Meteocons Development Commands

Source: https://github.com/basmilius/meteocons/blob/main/README.md

Execute various development commands using bun. These include fetching icons from Figma, exporting icons to different formats, validating icon data, publishing packages, and starting the documentation website.

```bash
bun run fetch              # Fetch SVGs from Figma (uses cache)
bun run fetch --force      # Force re-download
bun run export             # Export all icons (SVG + Lottie)
bun run export --frame X   # Export a single icon
bun run validate           # Validate layer names and coverage
bun run publish-icons      # Copy output to @meteocons/svg, @meteocons/svg-static and @meteocons/lottie
bun run docs:dev           # Start documentation website
```

--------------------------------

### Load and Control Lottie Animation

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/getting-started.mdx

Load a Lottie animation using `lottie-web` and control its playback. This example demonstrates loading animation data, setting playback speed, pausing, playing, and destroying the animation instance.

```javascript
import lottie from 'lottie-web';
import clearDayAnimation from '@meteocons/lottie/fill/clear-day.json';

const animation = lottie.loadAnimation({
    container: document.getElementById('weather-icon'),
    animationData: clearDayAnimation,
    renderer: 'svg',    // or 'canvas' for better performance
    loop: true,
    autoplay: true
});

// Control playback
animation.setSpeed(0.5);    // half speed
animation.pause();
animation.play();
animation.destroy();        // clean up when done
```

--------------------------------

### Using the Icon Manifest

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/usage.mdx

Access and utilize the manifest file to get metadata about all icons, including slugs, categories, and animation status. Useful for building features like icon pickers or search functionalities.

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

// Get all icons in a flat list
const allIcons = manifest.categories.flatMap(category => category.icons);
console.log(`Total icons: ${allIcons.length}`);

// Find all rain-related icons
const rainIcons = allIcons.filter(icon => icon.slug.includes('rain'));

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

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

// Search by partial slug
function searchIcons(query: string) {
    return allIcons.filter(icon =>
        icon.slug.includes(query.toLowerCase())
    );
}
```

--------------------------------

### Svelte: Lottie Animation

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/frameworks.mdx

Embed Lottie animations in Svelte components. This example dynamically loads and plays animations. Requires `lottie-web` and `@meteocons/lottie`.

```svelte
<script lang="ts">
    import lottie from 'lottie-web';

    let { slug, style = 'fill', size = 64 }: {
        slug: string;
        style?: 'fill' | 'flat' | 'line' | 'monochrome';
        size?: number;
    } = $props();

    let container: HTMLElement;

    $effect(() => {
        import(`@meteocons/lottie/${style}/${slug}.json`).then((mod) => {
            const animation = lottie.loadAnimation({
                container,
                renderer: 'svg',
                loop: true,
                autoplay: true,
                animationData: mod.default
            });

            return () => animation.destroy();
        });
    });
</script>

<div bind:this={container} style="width: {size}px; height: {size}px" />
```

--------------------------------

### TypeScript Declarations for Meteocons

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/getting-started.mdx

Import TypeScript types directly from the package for full type safety when working with icon manifests. This example shows how to access icon categories and individual icon properties.

```typescript
import type { IconManifest, IconCategory, IconEntry } from '@meteocons/svg';
import manifest from '@meteocons/svg/manifest.json';

// Full type safety
const categories: IconCategory[] = manifest.categories;
const firstIcon: IconEntry = categories[0].icons[0];

console.log(firstIcon.slug);     // "clear-day"
console.log(firstIcon.animated);  // true
```

--------------------------------

### CDN URL Structure for Meteocons

Source: https://context7.com/basmilius/meteocons/llms.txt

Icons can be accessed directly from the CDN without installing packages. The URL structure includes version, format, style, icon name, and extension.

```html
https://cdn.meteocons.com/{version}/{format}/{style}/{icon}.{ext}
```

```html
<!-- Latest version — SVG animated -->
<img src="https://cdn.meteocons.com/latest/svg/fill/clear-day.svg" alt="Clear day" width="64" height="64" />

<!-- Pinned version — recommended for production -->
<img src="https://cdn.meteocons.com/1.0.0/svg/fill/rain.svg" alt="Rain" width="64" height="64" />

<!-- Static SVG -->
<img src="https://cdn.meteocons.com/latest/svg-static/flat/snow.svg" alt="Snow" width="64" height="64" />

<!-- Lottie JSON via CDN -->
<!-- path: https://cdn.meteocons.com/latest/lottie/fill/thunderstorms-day-rain.json -->

<!-- unpkg fallback -->
<img src="https://unpkg.com/@meteocons/svg/fill/clear-day.svg" alt="Clear day" width="64" height="64" />

<!-- jsDelivr fallback -->
<img src="https://cdn.jsdelivr.net/npm/@meteocons/svg/fill/clear-day.svg" alt="Clear day" width="64" height="64" />
```

--------------------------------

### Astro SVG Icon as Image

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/frameworks.mdx

Use SVG icons directly in Astro components. Requires `@meteocons/svg` to be installed.

```astro
---
import clearDay from '@meteocons/svg/fill/clear-day.svg';
---
<img src={clearDay} alt="Clear day" width="64" height="64" />
```

--------------------------------

### Svelte: SVG as Image

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/frameworks.mdx

Use SVG icons as image sources in Svelte. This method is straightforward for static icon usage. Ensure `@meteocons/svg` is installed.

```svelte
<script lang="ts">
    import clearDay from '@meteocons/svg/fill/clear-day.svg';
</script>

<img src={clearDay} alt="Clear day" width={64} height={64} />
```

--------------------------------

### Render SVG Icon with <img> Tag

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/cdn.mdx

Use an <img> tag to directly render an SVG icon from the CDN. Animations start automatically.

```html
<img
    src="https://cdn.meteocons.com/latest/svg/fill/clear-day.svg"
    alt="Clear day"
    width="64"
    height="64"
/>
```

--------------------------------

### Render Meteocons SVG as <img> Tag

Source: https://context7.com/basmilius/meteocons/llms.txt

Render an animated SVG icon using an `<img>` tag. This is the simplest method, and animations will start automatically. Can be used with assets from an npm package via a bundler or directly from the CDN.

```html
<!-- From npm package via bundler (Vite / Webpack / Turbopack) -->
<img src="@meteocons/svg/fill/clear-day.svg" alt="Clear day" width="64" height="64" />

<!-- From CDN — no install needed -->
<img src="https://cdn.meteocons.com/latest/svg/fill/rain.svg" alt="Rain" width="64" height="64" />
```

```javascript
// Bundler import — returns the resolved asset URL
import clearDay from '@meteocons/svg/fill/clear-day.svg';

const img = document.createElement('img');
img.src = clearDay;
img.width = 64;
img.height = 64;
img.alt = 'Clear day';
document.body.appendChild(img);
```

--------------------------------

### Angular: SVG as Image Component

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/frameworks.mdx

Create an Angular component to display SVG icons as images. This component dynamically imports the SVG based on input properties. Ensure `@meteocons/svg` is installed.

```typescript
import { Component, Input, OnInit } from '@angular/core';

@Component({
    selector: 'weather-icon',
    standalone: true,
    template: `
        <img
            [src]="src"
            [alt]="slug"
            [width]="size"
            [height]="size"
        />
    `
})
export class WeatherIconComponent implements OnInit {
    @Input({ required: true }) slug!: string;
    @Input() style: 'fill' | 'flat' | 'line' | 'monochrome' = 'fill';
    @Input() size = 64;

    src = '';

    async ngOnInit() {
        const mod = await import(`@meteocons/svg/${this.style}/${this.slug}.svg`);
        this.src = mod.default;
    }
}
```

--------------------------------

### Astro Lottie Animation with Client Islands

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/frameworks.mdx

Embed Lottie animations in Astro using a client-side framework island. This example uses a Vue component and `client:visible` to load the animation when it scrolls into view.

```astro
---
import WeatherLottieIcon from '../components/WeatherLottieIcon.vue';
---
<WeatherLottieIcon slug="rain" client:visible />
```

--------------------------------

### Import and Render SVG Icon with Bundler

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/getting-started.mdx

Import an SVG icon directly into your JavaScript code when using a bundler like Vite or Webpack. This example dynamically creates an `<img>` element and appends it to the document body.

```javascript
import clearDay from '@meteocons/svg/fill/clear-day.svg';

const img = document.createElement('img');
img.src = clearDay;
img.width = 64;
img.height = 64;
img.alt = 'Clear day';
document.body.appendChild(img);
```

--------------------------------

### Import Manifest

Source: https://github.com/basmilius/meteocons/blob/main/packages/svg-static/README.md

Import the `manifest.json` file to access metadata for all icons.

```javascript
import manifest from '@meteocons/svg-static/manifest.json';
```

--------------------------------

### Import Manifest File

Source: https://github.com/basmilius/meteocons/blob/main/packages/lottie/README.md

Import the manifest.json file to access metadata for all available icons.

```javascript
import manifest from '@meteocons/lottie/manifest.json';
```

--------------------------------

### Manifest Import

Source: https://github.com/basmilius/meteocons/blob/main/packages/svg/README.md

Import the manifest.json file to access metadata for all icons.

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

--------------------------------

### Angular Lottie Animation

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/frameworks.mdx

Use this component to display Lottie animations in Angular. Ensure you have installed `@meteocons/lottie` and `lottie-web`.

```typescript
import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import lottie from 'lottie-web';
import type { AnimationItem } from 'lottie-web';

@Component({
    selector: 'weather-lottie-icon',
    standalone: true,
    template: \
        <div
            #container
            [style.width.px]="size"
            [style.height.px]="size"
        ></div>\
    
})
export class WeatherLottieIconComponent implements OnInit, OnDestroy {
    @ViewChild('container', { static: true }) container!: ElementRef<HTMLElement>;
    @Input({ required: true }) slug!: string;
    @Input() style: 'fill' | 'flat' | 'line' | 'monochrome' = 'fill';
    @Input() size = 64;

    private animation?: AnimationItem;

    async ngOnInit() {
        const mod = await import(`@meteocons/lottie/${this.style}/${this.slug}.json`);

        this.animation = lottie.loadAnimation({
            container: this.container.nativeElement,
            renderer: 'svg',
            loop: true,
            autoplay: true,
            animationData: mod.default
        });
    }

    ngOnDestroy() {
        this.animation?.destroy();
    }
}
```

--------------------------------

### Next.js SVG Icon with Image Component

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/frameworks.mdx

Integrate SVG icons into Next.js applications using the `next/image` component. Ensure `@meteocons/svg` is installed.

```tsx
import Image from 'next/image';
import clearDay from '@meteocons/svg/fill/clear-day.svg';

export default function Weather() {
    return (
        <Image
            src={clearDay}
            alt="Clear day"
            width={64}
            height={64}
        />
    );
}
```

--------------------------------

### Import SVG and Lottie Manifests

Source: https://github.com/basmilius/meteocons/blob/main/packages/meteocons/README.md

Import the manifest objects for both SVG and Lottie icons from the meteocons package.

```javascript
import { svgManifest, lottieManifest } from 'meteocons';
```

--------------------------------

### Access Lottie Animation Files by Style

Source: https://github.com/basmilius/meteocons/blob/main/packages/lottie/README.md

Import Lottie animation JSON files directly from the package, specifying the desired style (fill, flat, line, monochrome).

```text
@meteocons/lottie/fill/clear-day.json
@meteocons/lottie/flat/clear-day.json
@meteocons/lottie/line/clear-day.json
@meteocons/lottie/monochrome/clear-day.json
```

--------------------------------

### Importing Manifest File

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/api.mdx

Demonstrates importing the manifest JSON file, which contains metadata about the icons, using Node.js subpath exports.

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

--------------------------------

### Nuxt.js SVG Icon with Vite Import

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/frameworks.mdx

Use SVG icons in Nuxt.js with Vite's built-in SVG import handling. Requires `@meteocons/svg` to be installed.

```vue
<script setup lang="ts">
import clearDay from '@meteocons/svg/fill/clear-day.svg';
</script>

<template>
    <img :src="clearDay" alt="Clear day" width="64" height="64" />
</template>
```

--------------------------------

### Vue: Lottie Animation Component

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/frameworks.mdx

Integrate Lottie animations into your Vue application. This component loads and plays a specified Lottie animation. Ensure `lottie-web` and `@meteocons/lottie` are installed.

```vue
<script setup lang="ts">
import lottie from 'lottie-web';
import type { AnimationItem } from 'lottie-web';
import { onMounted, onUnmounted, ref } from 'vue';

const props = defineProps({
    slug: String,
    style: String,
    size: Number
});

const container = ref<HTMLElement>();
let animation: AnimationItem;

onMounted(async () => {
    if (!container.value) {
        return;
    }

    const mod = await import(`@meteocons/lottie/${props.style ?? 'fill'}/${props.slug}.json`);

    animation = lottie.loadAnimation({
        container: container.value,
        renderer: 'svg',
        loop: true,
        autoplay: true,
        animationData: mod.default
    });
});

onUnmounted(() => animation?.destroy());
</script>

<template>
    <div
        ref="container"
        :style="{ width: `${size ?? 64}px`, height: `${size ?? 64}px` }"
    />
</template>
```

--------------------------------

### Astro Integration with SVG and Lottie

Source: https://context7.com/basmilius/meteocons/llms.txt

Demonstrates using static SVG imports in Astro and integrating a Vue component for Lottie animations, leveraging client-side rendering for islands.

```astro
---
// Static SVG import — works at build time
import clearDay from '@meteocons/svg/fill/clear-day.svg';
import WeatherLottieIcon from '../components/WeatherLottieIcon.vue';
---
<!-- SVG image -->
<img src={clearDay} alt="Clear day" width="64" height="64" />

<!-- Lottie via Vue island — loads only when visible in viewport -->
<WeatherLottieIcon slug="rain" client:visible />

```

--------------------------------

### Load Lottie Animation from CDN

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/cdn.mdx

Load a Lottie animation directly from the CDN using the lottie-web player. Ensure lottie-web is imported.

```javascript
import lottie from 'lottie-web';

const animation = lottie.loadAnimation({
    container: document.getElementById('weather-icon'),
    path: 'https://cdn.meteocons.com/latest/lottie/fill/clear-day.json',
    renderer: 'svg',
    loop: true,
    autoplay: true,
});
```

--------------------------------

### Importing Type Definitions

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/api.mdx

Shows how to import TypeScript type definitions for icon manifests and entries, enabling better type checking in your project.

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

--------------------------------

### Importing Lottie JSON Icons

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/api.mdx

Illustrates importing Lottie JSON files for icons, which can be used with Lottie animation libraries. This method uses Node.js subpath exports.

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

--------------------------------

### Load Lottie Animation for Weather Icon

Source: https://github.com/basmilius/meteocons/blob/main/packages/meteocons/README.md

Import and load a Lottie animation for a weather icon using lottie-web. Ensure the target container element exists in the DOM.

```javascript
import lottie from 'lottie-web';
import clearDay from 'meteocons/lottie/fill/clear-day.json';

lottie.loadAnimation({
  container: document.getElementById('icon'),
  animationData: clearDay,
  loop: true,
  autoplay: true,
});
```

--------------------------------

### Load Lottie Animation with lottie-web

Source: https://github.com/basmilius/meteocons/blob/main/packages/lottie/README.md

Import and load a Lottie animation using the lottie-web library. Ensure the target container element exists in the DOM.

```javascript
import lottie from 'lottie-web';
import clearDay from '@meteocons/lottie/fill/clear-day.json';

lottie.loadAnimation({
  container: document.getElementById('icon'),
  animationData: clearDay,
  loop: true,
  autoplay: true,
});
```

--------------------------------

### Icon Styles

Source: https://github.com/basmilius/meteocons/blob/main/packages/svg/README.md

Icons are available in multiple styles. Access them by changing the directory name in the path.

```text
@meteocons/svg/fill/clear-day.svg
@meteocons/svg/flat/clear-day.svg
@meteocons/svg/line/clear-day.svg
@meteocons/svg/monochrome/clear-day.svg
```

--------------------------------

### React: Static Lottie Animation Import

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/frameworks.mdx

Import Lottie animation JSON files directly for static bundling at build time. This is suitable when the animation is known beforehand.

```tsx
import Lottie from 'lottie-react';
import rainAnimation from '@meteocons/lottie/fill/rain.json';

function RainIcon() {
    return (
        <Lottie
            animationData={rainAnimation}
            loop
            autoplay
            style={{ width: 64, height: 64 }}
        />
    );
}
```

--------------------------------

### Icon Styles

Source: https://github.com/basmilius/meteocons/blob/main/packages/svg-static/README.md

Icons are available in multiple styles. Access them by specifying the style in the path.

```text
@meteocons/svg-static/fill/clear-day.svg
@meteocons/svg-static/flat/clear-day.svg
@meteocons/svg-static/line/clear-day.svg
@meteocons/svg-static/monochrome/clear-day.svg
```

--------------------------------

### Meteocons Package Structure

Source: https://context7.com/basmilius/meteocons/llms.txt

All Meteocons packages share a consistent directory layout, including subdirectories for different icon styles (fill, flat, line, monochrome) and a manifest file for icon metadata.

```bash
@meteocons/svg/
├── fill/              # Colorful gradient icons
│   ├── clear-day.svg
│   ├── rain.svg
│   └── thunderstorms-day-rain.svg
├── flat/              # Solid colors, no gradients
├── line/              # Outline/stroke-only icons
├── monochrome/        # currentColor — adapts to parent text color
├── manifest.json      # Icon metadata and categories
└── index.d.ts         # TypeScript type definitions

# @meteocons/svg-static  — same layout, .svg files without SMIL animations
# @meteocons/lottie      — same layout, .json Lottie files instead of .svg
```

--------------------------------

### Accessing Manifest Data

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/api.mdx

Import and access the manifest.json file to retrieve metadata about all icons, including styles and categories.

```typescript
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`);
}
```

--------------------------------

### Dynamic Icon Loading and Rendering

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/usage.mdx

Map weather conditions to icon slugs and generate dynamic icon URLs for real-time weather displays. Supports SVG and Lottie formats.

```typescript
const CONDITION_MAP: Record<string, string> = {
    sunny: 'clear-day',
    clear: 'clear-day',
    'clear-night': 'clear-night',
    cloudy: 'overcast',
    'partly-cloudy': 'partly-cloudy-day',
    rainy: 'rain',
    'heavy-rain': 'extreme-rain',
    snowy: 'snow',
    stormy: 'thunderstorms-day-rain',
    windy: 'wind',
    foggy: 'fog-day',
    hail: 'hail',
};

function getIconUrl(condition: string, style = 'fill', format: 'svg' | 'json' = 'svg'): string {
    const slug = CONDITION_MAP[condition] ?? 'not-available';
    const type = format === 'json' ? 'lottie' : 'svg';
    return `https://cdn.meteocons.com/latest/${type}/${style}/${slug}.${format}`;
}

// Example: render weather for a city
function renderWeather(condition: string, temp: number) {
    const iconUrl = getIconUrl(condition);

    return `
        <div class="weather">
            <img src="${iconUrl}" alt="${condition}" width="64" height="64" />
            <span>${temp}°C</span>
        </div>
    `;
}
```

--------------------------------

### Play Lottie Animations on iOS with lottie-ios

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/usage.mdx

Integrate Lottie animations on iOS using the `lottie-ios` library. Initialize an `LottieAnimationView`, set its properties, and add it to the view hierarchy.

```swift
import Lottie

let animationView = LottieAnimationView(name: "rain")
animationView.frame = CGRect(x: 0, y: 0, width: 64, height: 64)
animationView.loopMode = .loop
animationView.play()
view.addSubview(animationView)
```

--------------------------------

### Importing Animated SVG Icons

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/api.mdx

Demonstrates how to import animated SVG icon files directly using Node.js subpath exports. Ensure the correct path for the desired icon and format.

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

--------------------------------

### React: Import SVG as Image

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/frameworks.mdx

Import an SVG file directly and render it as an `<img>` tag. This is the simplest method for displaying icons.

```tsx
import clearDay from '@meteocons/svg/fill/clear-day.svg';

function WeatherIcon() {
    return <img src={clearDay} alt="Clear day" width={64} height={64} />;
}
```

--------------------------------

### React: Dynamic Lottie Icon Loading

Source: https://context7.com/basmilius/meteocons/llms.txt

Dynamically imports Lottie animations based on slug and style. Requires `lottie-react` and is SSR-safe with Next.js using dynamic imports.

```tsx
// Lottie — dynamic import (SSR-safe with Next.js: use dynamic(() => import('lottie-react'), { ssr: false }))
function WeatherLottieIcon({ slug, style = 'fill', size = 64 }: WeatherIconProps) {
    const [animationData, setAnimationData] = useState(null);

    useEffect(() => {
        import(`@meteocons/lottie/${style}/${slug}.json`).then(
            (mod) => setAnimationData(mod.default)
        );
    }, [slug, style]);

    if (!animationData) return <div style={{ width: size, height: size }} />;
    return (
        <Lottie
            animationData={animationData}
            loop
            autoplay
            style={{ width: size, height: size }}
        />
    );
}

// Usage
export default function App() {
    return (
        <>
            <WeatherIcon slug="rain" />
            <WeatherIcon slug="snow" style="line" size={48} />
            <WeatherLottieIcon slug="thunderstorms-day-rain" />
        </>
    );
}
```

--------------------------------

### Next.js Lottie Animation with Dynamic Import

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/frameworks.mdx

Implement Lottie animations in Next.js using dynamic imports with `ssr: false` to ensure browser-only API usage. Requires `@meteocons/lottie` and `lottie-react`.

```tsx
'use client';

import dynamic from 'next/dynamic';
import rainAnimation from '@meteocons/lottie/fill/rain.json';

const Lottie = dynamic(() => import('lottie-react'), { ssr: false });

export default function RainIcon() {
    return (
        <Lottie
            animationData={rainAnimation}
            loop
            autoplay
            style={{ width: 64, height: 64 }}
        />
    );
}
```

--------------------------------

### TypeScript Types and Manifest for Meteocons

Source: https://context7.com/basmilius/meteocons/llms.txt

Import typed interfaces and the manifest.json for full icon metadata. This allows for type-safe filtering, searching, and mapping of icons.

```typescript
import type { IconManifest, IconCategory, IconEntry } from '@meteocons/svg';
import manifest from '@meteocons/svg/manifest.json';

// manifest.styles → ["fill", "flat", "line", "monochrome"]
// manifest.categories → IconCategory[]

// Flatten all icons
const allIcons: IconEntry[] = manifest.categories.flatMap(c => c.icons);
console.log(`Total icons: ${allIcons.length}`);

// Filter rain-related icons
const rainIcons = allIcons.filter(icon => icon.slug.includes('rain'));
// → ["rain", "drizzle", "overcast-rain", "thunderstorms-rain", ...]

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

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

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

// Build slug → category lookup map
const categoryBySlug = new Map<string, string>();
for (const category of manifest.categories) {
    for (const icon of category.icons) {
        categoryBySlug.set(icon.slug, category.name);
    }
}
console.log(categoryBySlug.get('clear-day')); // "Standard"
```

--------------------------------

### Importing Static SVG Icons

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/api.mdx

Shows how to import static SVG icon files, which do not include SMIL animations, using Node.js subpath exports.

```typescript
// Static SVG files (no SMIL animations)
import clearDayStatic from '@meteocons/svg-static/fill/clear-day.svg';
```

--------------------------------

### Load and control Lottie animation with lottie-web

Source: https://context7.com/basmilius/meteocons/llms.txt

Load a Lottie animation using lottie-web, with options for playback control. Ensure the target container element exists in the DOM.

```javascript
import lottie from 'lottie-web';
import rainAnimation from '@meteocons/lottie/fill/rain.json';

const animation = lottie.loadAnimation({
    container: document.getElementById('weather-icon'),
    animationData: rainAnimation,  // bundled import
    // OR: path: 'https://cdn.meteocons.com/latest/lottie/fill/rain.json',
    renderer: 'canvas',   // 'canvas' for performance, 'svg' for CSS access
    loop: true,
    autoplay: true
});

// Playback control
animation.setSpeed(0.5);           // half speed
animation.setDirection(-1);         // play in reverse
animation.goToAndStop(30, true);    // jump to frame 30 and pause
animation.pause();
animation.play();
animation.destroy();                // clean up when element is removed
```

--------------------------------

### Responsive SVG Sizing with CSS

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/usage.mdx

Apply CSS classes to control the size of icons, enabling responsive design. Icons scale cleanly from their 128x128 canvas.

```css
/* Fixed size */
.icon-sm { width: 32px; height: 32px; }
.icon-md { width: 64px; height: 64px; }
.icon-lg { width: 128px; height: 128px; }

/* Fluid — scales with parent */
.icon-fluid {
    width: 100%;
    height: auto;
    max-width: 128px;
}
```

--------------------------------

### React: Dynamic Lottie Animation Import

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/frameworks.mdx

Load Lottie animation JSON files dynamically at runtime using `import()`. This is useful when the animation slug is a prop and needs to be loaded on demand.

```tsx
import { useEffect, useState } from 'react';
import Lottie from 'lottie-react';

// Assuming WeatherIconProps is defined elsewhere or similar to the previous example
interface WeatherIconProps {
    slug: string;
    style?: 'fill' | 'flat' | 'line' | 'monochrome';
    size?: number;
}

function DynamicWeatherIcon({ slug, style = 'fill', size = 64 }: WeatherIconProps) {
    const [animationData, setAnimationData] = useState(null);

    useEffect(() => {
        import(`@meteocons/lottie/${style}/${slug}.json`).then(
            (mod) => setAnimationData(mod.default)
        );
    }, [slug, style]);

    if (!animationData) {
        return <div style={{ width: size, height: size }} />;
    }

    return (
        <Lottie
            animationData={animationData}
            loop
            autoplay
            style={{ width: size, height: size }}
        />
    );
}
```

--------------------------------

### Import TypeScript Types

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/api.mdx

Import the necessary TypeScript types from the @meteocons/svg package into your project.

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

--------------------------------

### Svelte Component for Lottie Animations

Source: https://context7.com/basmilius/meteocons/llms.txt

A Svelte component to dynamically load and display Lottie animations based on slug and style. Requires lottie-web.

```svelte
<script lang="ts">
    import lottie from 'lottie-web';

    let { slug, style = 'fill', size = 64 }: { 
        slug: string;
        style?: 'fill' | 'flat' | 'line' | 'monochrome';
        size?: number;
    } = $props();

    let container: HTMLElement;

    $effect(() => {
        import(`@meteocons/lottie/${style}/${slug}.json`).then((mod) => {
            const animation = lottie.loadAnimation({
                container,
                renderer: 'svg',
                loop: true,
                autoplay: true,
                animationData: mod.default
            });
            return () => animation.destroy();
        });
    });
</script>

<div bind:this={container} style="width: {size}px; height: {size}px" />

```

--------------------------------

### Lazy load Lottie animations with IntersectionObserver

Source: https://context7.com/basmilius/meteocons/llms.txt

Defer loading Lottie animations until their container elements enter the viewport to improve initial page load performance. The `rootMargin` option defines a buffer zone.

```html
<div class="lottie-icon" data-src="https://cdn.meteocons.com/latest/lottie/fill/rain.json"   style="width:64px;height:64px"></div>
<div class="lottie-icon" data-src="https://cdn.meteocons.com/latest/lottie/fill/snow.json"   style="width:64px;height:64px"></div>
<div class="lottie-icon" data-src="https://cdn.meteocons.com/latest/lottie/fill/wind.json"   style="width:64px;height:64px"></div>
```

```javascript
import lottie from 'lottie-web';

const observer = new IntersectionObserver((entries) => {
    for (const entry of entries) {
        if (!entry.isIntersecting) continue;

        lottie.loadAnimation({
            container: entry.target,
            renderer: 'canvas',
            loop: true,
            autoplay: true,
            path: entry.target.dataset.src
        });

        observer.unobserve(entry.target);
    }
}, { rootMargin: '200px' });

document.querySelectorAll('.lottie-icon').forEach(el => observer.observe(el));
```

--------------------------------

### Respect Reduced Motion Preference for Lottie Animations

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/usage.mdx

Check the `prefers-reduced-motion` media query and pause Lottie animations by going to the first frame if the user prefers reduced motion.

```javascript
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

const animation = lottie.loadAnimation({
    container: el,
    path: 'https://cdn.meteocons.com/latest/lottie/fill/rain.json',
    loop: !prefersReducedMotion,
    autoplay: !prefersReducedMotion
});

if (prefersReducedMotion) {
    animation.goToAndStop(0, true);
}
```

--------------------------------

### Angular Component for Lottie Animations

Source: https://context7.com/basmilius/meteocons/llms.txt

An Angular component to display Lottie animations. It dynamically imports animation data and uses lottie-web. Requires `lottie-web`.

```typescript
import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
import lottie from 'lottie-web';
import type { AnimationItem } from 'lottie-web';

@Component({
    selector: 'weather-lottie-icon',
    standalone: true,
    template: `
        <div #container [style.width.px]="size" [style.height.px]="size"></div>
    `
})
export class WeatherLottieIconComponent implements OnInit, OnDestroy {
    @ViewChild('container', { static: true }) container!: ElementRef<HTMLElement>;
    @Input({ required: true }) slug!: string;
    @Input() style: 'fill' | 'flat' | 'line' | 'monochrome' = 'fill';
    @Input() size = 64;

    private animation?: AnimationItem;

    async ngOnInit() {
        const mod = await import(`@meteocons/lottie/${this.style}/${this.slug}.json`);
        this.animation = lottie.loadAnimation({
            container: this.container.nativeElement,
            renderer: 'svg',
            loop: true,
            autoplay: true,
            animationData: mod.default
        });
    }

    ngOnDestroy() { this.animation?.destroy(); }
}

```

--------------------------------

### Use Lottie Animation with lottie-web

Source: https://github.com/basmilius/meteocons/blob/main/README.md

Integrate Lottie JSON weather animations into your web page using the lottie-web library. Import the animation data and configure the lottie.loadAnimation function.

```javascript
import lottie from 'lottie-web';
import clearDay from '@meteocons/lottie/fill/clear-day.json';

lottie.loadAnimation({
    container: document.getElementById('icon'),
    animationData: clearDay,
    loop: true,
    autoplay: true,
});
```

--------------------------------

### Pinning CDN Version for Production

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/cdn.mdx

Pin a specific version of an icon in production to prevent unexpected changes when new versions are released. Avoid using 'latest'.

```html
<!-- Good: pinned version -->
<img src="https://cdn.meteocons.com/1.0.0/svg/fill/clear-day.svg" alt="Clear day" />

<!-- Avoid: latest may change without notice -->
<img src="https://cdn.meteocons.com/latest/svg/fill/clear-day.svg" alt="Clear day" />
```

--------------------------------

### Lazy Load Lottie Animations with IntersectionObserver

Source: https://github.com/basmilius/meteocons/blob/main/packages/docs/src/pages/docs/usage.mdx

Implement manual lazy loading for Lottie animations using `IntersectionObserver`. This ensures animations are only loaded when they enter the viewport, improving initial page load performance.

```javascript
import lottie from 'lottie-web';

const observer = new IntersectionObserver((entries) => {
    for (const entry of entries) {
        if (!entry.isIntersecting) {
            continue;
        }

        lottie.loadAnimation({
            container: entry.target,
            renderer: 'canvas',
            loop: true,
            autoplay: true,
            path: entry.target.dataset.src
        });

        observer.unobserve(entry.target);
    }
}, { rootMargin: '200px' });

document.querySelectorAll('.lottie-icon').forEach(el => observer.observe(el));
```

```html
<div class="lottie-icon" data-src="https://cdn.meteocons.com/latest/lottie/fill/rain.json" style="width: 64px; height: 64px"></div>
<div class="lottie-icon" data-src="https://cdn.meteocons.com/latest/lottie/fill/snow.json" style="width: 64px; height: 64px"></div>
<div class="lottie-icon" data-src="https://cdn.meteocons.com/latest/lottie/fill/wind.json" style="width: 64px; height: 64px"></div>
```