Start
Vue
Use Kineticons in Vue 3 and Nuxt: named icon components, the KineticIcon component and props.
Install
shell
npm install @kineticons/vueUsage
vue
<script setup lang="ts">
import { Bell, Trash } from "@kineticons/vue";
</script>
<template>
<button class="ki-trigger">
<Bell variant="duotone" :size="20" /> Notifications
</button>
</template>Props
The same props as React (in templates, :stroke-width or :strokeWidth), plus any attribute for the <svg>.
| Prop | Type | Default | What it does |
|---|---|---|---|
| variant | "outline" | "duotone" | "filled" | "outline" | The style. |
| size | number | string | 24 | Width and height, in pixels (or any CSS length as a string). |
| strokeWidth | number | 1.75 | Stroke in 24-grid units; the same visual weight at any size. |
| trigger | "hover" | "manual" | "loop" | "none" | "hover" | When the icon moves. |
| active | boolean | false | With trigger "manual": plays while true. |
| loopEvery | number | 1800 | With trigger "loop": one beat, in milliseconds. |
| title | string | An accessible name: the icon is then announced as an image. |
Icons chosen at runtime
vue
<script setup lang="ts">
import { KineticIcon } from "@kineticons/vue";
import { bell, mail } from "@kineticons/vue/icons";
const icon = props.unread ? mail : bell;
</script>
<template>
<KineticIcon :icon="icon" variant="duotone" />
</template>Nuxt
Import components where you use them, as above. On the server the icon renders as SVG; its motion CSS is added when the page loads in the browser.
Something unclear or missing? Open an issue.