open-index/open-npm huggingface dataset:
npm package: @leodamours/ds-icons
Description: Vue 3 SVG icon components for the design system. Each icon is a single-file component that renders an inline SVG, supports `currentColor`, and scales with the parent's font size.
Latest version: 0.3.1

# @leodamours/ds-icons

Vue 3 SVG icon components for the design system. Each icon is a single-file component that renders an inline SVG, supports `currentColor`, and scales with the parent's font size.

## Install

```bash
npm install @leodamours/ds-icons
```

**Peer dependency:** `vue ^3.5.0`

## Usage

```vue
<script setup>
import { DsIconSearch, DsIconTrash } from '@leodamours/ds-icons'
</script>

<template>
  <DsIconSearch class="w-5 h-5" />
  <DsIconTrash class="w-4 h-4 text-red-500" />
</template>
```

Icons use `currentColor` for fill/stroke, so they inherit the parent's text color. Size them with utility classes or CSS.

## Available icons

| Icon | Component |
|---|---|
| Arrow right | `DsIconArrowRight` |
| Check | `DsIconCheck` |
| Chevron down | `DsIconChevronDown` |
| Chevron up | `DsIconChevronUp` |
| Info | `DsIconInfo` |
| Lock | `DsIconLock` |
| Mail | `DsIconMail` |
| Plus | `DsIconPlus` |
| Search | `DsIconSearch` |
| Sort | `DsIconSort` |
| Trash | `DsIconTrash` |
| Warning | `DsIconWarning` |
| X (close) | `DsIconX` |

## With ds-components

Icons are used as the `iconLeft` / `iconRight` props on components like `DsButton` and `DsInput`:

```vue
<script setup>
import { DsButton } from '@leodamours/ds-components'
import { DsIconPlus } from '@leodamours/ds-icons'
</script>

<template>
  <DsButton label="Add item" :iconLeft="DsIconPlus" />
</template>
```