Weather Icons

Vue 3 SVG icon components for Weather Web application.

Installation

npm install weatherly-icons

Usage

Import Individual Icons

<script setup>
import { Sunny, Dry } from "weatherly-icons";
</script>

<template>
  <div>
    <Sunny :size="24" />
    <Dry :size="32" color="blue" />
  </div>
</template>

Props

All icon components accept the following props:

• size: Number | String (default: 24) - Sets both width and height
• All other props are passed to the SVG element (class, style, @click, etc.)

Examples

Basic Usage

<Sunny />

Custom Size

<Sunny :size="48" />
<Sunny size="3rem" />

Custom Color

Icons use currentColor by default, so you can control color via CSS style attribute or class if you have Tailwind/Bootstrap installed:

<Sunny style="color: red;" />
<Sunny class="text-blue-500" />

With Click Handler

<Sunny @click="handleClick" />