@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

npm install @leodamours/ds-icons

Peer dependency: vue ^3.5.0

Usage

<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:

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

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