@spot-care/icons — React Icon Library

A modern, flexible React icon library for SpotCare applications.

📥 Installation

npm install @spot-care/icons
# or
yarn add @spot-care/icons
# or
pnpm add @spot-care/icons

🚀 Quick Usage

1. Import the Icon component

import { Icon } from "@spot-care/icons";

2. Render an Icon

<Icon name="hair-dryer" size={32} color="black" />

| Prop | Type | Default | Description | |:---|:---|:---|:---| | name | string | — | Name of the icon (based on filename, kebab-case) | | size | number | 24 | Size of the icon in pixels | | color | string | "currentColor" | Fill color of the icon (CSS color value) |

🔍 Icon Names

The name prop matches your SVG filenames (converted to kebab-case):

| SVG Filename | name to use | |:---|:---| | Hair Dryer.svg | hair-dryer | | Hot Tub.svg | hot-tub | | Host Greets.svg | host-greets | | Chef's Kitchens.svg | chefs-kitchens |

✅ Spaces, apostrophes, and special characters are replaced with hyphens (-).

📖 Full API

<Icon />

| Prop | Type | Description | |------------|------------------------------|---------------------------------------------------------| | name | string | (Required) Icon name (kebab-case) | | size | number | (Optional) Width/height in pixels. Default: 24 | | color | string | (Optional) Fill color (CSS color value). Default: "currentColor" |

📈 Advanced Usage

Custom Styling

Since it's a native <svg>, you can style it using normal CSS or style props:

<Icon 
  name="hot-tub" 
  size={50} 
  color="#123456" 
  style={{ border: "1px solid gray", borderRadius: "8px" }}
/>

⚡ Example Full Integration

import { Icon } from "@spot-care/icons";

function HomePage() {
  return (
    <div>
      <h1>Welcome to SpotCare</h1>
      <Icon name="hot-tub" size={64} color="dodgerblue" />
      <Icon name="hair-dryer" size={48} color="crimson" />
    </div>
  );
}

🛠 Development Notes (For Maintainers)

If you want to add new icons:

1. Add .svg files into src/icons/.
2. Run:

npm run generate-icons
npm run build

3. Publish a new version:

npm version patch
npm publish --access public