open-index/open-npm huggingface dataset:
npm package: @spot-care/icons
Description: Custom icon set for SpotCare apps
Latest version: 1.0.2


# `@spot-care/icons` — React Icon Library

A modern, flexible React icon library for SpotCare applications.

---

## 📥 Installation

```bash
npm install @spot-care/icons
# or
yarn add @spot-care/icons
# or
pnpm add @spot-care/icons
```

---

## 🚀 Quick Usage

### 1. Import the Icon component

```tsx
import { Icon } from "@spot-care/icons";
```

---

### 2. Render an Icon

```tsx
<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:

```tsx
<Icon 
  name="hot-tub" 
  size={50} 
  color="#123456" 
  style={{ border: "1px solid gray", borderRadius: "8px" }}
/>
```

---

## ⚡ Example Full Integration

```tsx
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:

```bash
npm run generate-icons
npm run build
```

3. Publish a new version:

```bash
npm version patch
npm publish --access public
```

---
npm package: @spot-it/angular-firestore-odm
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.1.1.
Latest version: 0.0.2

# AngularFirestore

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.1.1.

## Code scaffolding

Run `ng generate component component-name --project angular-firestore-odm` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project angular-firestore-odm`.
> Note: Don't forget to add `--project angular-firestore-odm` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build angular-firestore-odm` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build angular-firestore-odm`, go to the dist folder `cd dist/angular-firestore-odm` and run `npm publish`.

## Running unit tests

Run `ng test angular-firestore-odm` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).