Documentation
Vue
The same icons as components for Vue 3, generated from the same drawings.
Every icon is a named export. Import only what you use.
<script setup lang="ts">
import { Agent, VectorDatabase } from "@iconmind/vue";
</script>
<template>
<Agent />
<VectorDatabase variant="duotone" weight="bold" />
<Agent color="#5b4bde" :size="32" />
</template>Props
The same contract as every other framework package:
| Prop | Default | What it does |
|---|---|---|
size | 24 | Width and height, in px or any CSS length |
color | currentColor | Stroke colour |
variant | "outline" | "outline" or "duotone" |
weight | "regular" | "thin", "regular" or "bold" — each is its own drawing |
strokeWidth | per weight | Fine adjustment; picking a weight redraws instead |
absoluteStrokeWidth | false | Keeps the stroke looking the same weight as size changes |
Anything else you pass — class, aria-label, event handlers — falls through to the
<svg> element via Vue's attribute fallthrough.
Tree shaking
The package is ESM only with sideEffects: false. Importing three icons pulls in the
three icons, the shared runtime, and nothing else. Per-icon entry points exist too:
@iconmind/vue/icons/agent.
Accessibility
Icons are aria-hidden by default. Pass aria-label="…" and the icon becomes
role="img" with that label instead — one prop, both attributes handled.
Nuxt
Nothing special is required: the components are plain Vue components and SSR-render deterministically, so hydration never mismatches. Auto-import via a Nuxt module is planned; until then, import from the package directly.