@devigner-ui/icons-vue

@devigner-ui/icons-vue

8,588 icons for Vue 3: 2,147 symbols, each in outline, twotone, bold and bulk. The same artwork as @devigner-ui/icons, rendered from it rather than redrawn, so the two cannot drift.

pnpm add @devigner-ui/icons-vue

Use

<script setup>
import { IconAdd, IconShoppingCart } from "@devigner-ui/icons-vue";
</script>

<template>
  <IconAdd class="size-6" />
  <IconShoppingCart variant="bulk" class="size-6 text-violet-600" />
</template>

Every icon is one module, so a bundler keeps only what you import.

Props

Everything else (class, style, id, @click, data-*, the aria attributes) falls through to the <svg>.

Strokes and fills are currentColor, so size and colour come from CSS:

<IconAdd class="size-5 text-slate-500" />

Accessibility

Icons are decorative by default: they render aria-hidden="true", because an icon sitting beside its own text label is otherwise read out twice. Naming one promotes it to an image:

<IconAdd aria-label="Add item" />

Licence

MIT for the code, CC-BY-4.0 for the artwork. See ATTRIBUTION.md.