@slatico/vue · v0.1.0
Vue 3 & Nuxt 3 Integration Guide
@slatico/vue provides first-class Vue 3 Composition API render-function components for all 27 Slatico icon families across all 7 official styles (189 total variants), with SSR-safe ID scoping via Vue's useId().
1. Installation
Terminal (npm / pnpm / yarn)
npm install @slatico/vue
# or
pnpm add @slatico/vue
# or
yarn add @slatico/vue2. Monochrome, Duotone & Dual-Color Usage (<script setup>)
DashboardToolbar.vue
<script setup lang="ts">
import {
BellIcon,
ShieldCheckDuotoneIcon,
WalletColorIcon
} from "@slatico/vue";
// Or import directly from a per-icon subpath for zero barrel overhead:
import { ArrowUpRightBoldIcon } from "@slatico/vue/icons/arrow-up-right";
</script>
<template>
<div class="flex items-center gap-4">
<!-- 1. Regular monochrome icon (defaults to size=24, color="currentColor") -->
<BellIcon variant="regular" :size="24" color="currentColor" />
<!-- 2. Customized sizing and explicit color -->
<ArrowUpRightBoldIcon :size="32" color="#010520" />
<!-- 3. Duotone icon with custom primary color, secondary-color & secondary-opacity -->
<ShieldCheckDuotoneIcon
:size="28"
color="#010520"
secondary-color="#FF6040"
:secondary-opacity="0.25"
title="Security Verified"
/>
<!-- 4. Color icon with default brand palette (#FF6040 primary + #000000 secondary) -->
<WalletColorIcon :size="28" />
<!-- 5. Color icon with two custom colors (color + secondary-color) -->
<BellIcon
variant="color"
:size="28"
color="#FF6040"
secondary-color="#010520"
title="Notifications"
/>
</div>
</template>3. Accessibility & Tree Shaking
All Vue components accept extra attributes via Vue's attrs fallthrough (class, data-*, event listeners). When title is omitted, aria-hidden="true" is applied automatically.
Subpath & Accessible Vue Usage
<script setup lang="ts">
import { MagnifyingGlassIcon } from "@slatico/vue/icons/magnifying-glass";
import { BellDuotoneIcon } from "@slatico/vue/icons/bell";
</script>
<template>
<!-- Decorative icon inside button -->
<button type="button" class="inline-flex items-center gap-2">
<MagnifyingGlassIcon :size="18" />
<span>Search</span>
</button>
<!-- Standalone accessible icon -->
<BellDuotoneIcon :size="24" title="Notifications" />
</template>4. Complete Props Reference (SlaticoVueIconProps)
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | SlaticoStyle | "regular" | Visual style (thin, light, regular, bold, fill, duotone, color). |
| size | number | string | 24 | Width and height of the <svg> element in pixels or CSS units. |
| color | string | "currentColor" | Primary color for monochrome/Duotone icons, or --slatico-primary-color override (default #FF6040) for color icons. |
| secondaryColor / secondary-color | string | undefined | Secondary tone color (--slatico-secondary-color) for duotone and color (default #000000) icons. |
| secondaryOpacity / secondary-opacity | number | string | 0.2 (in SVG) | Secondary layer opacity (--slatico-secondary-opacity) for duotone icons. |
| title | string | undefined | Accessible label (role="img" + aria-label + <title>). When omitted, sets aria-hidden="true". |