Vue
Vue
Use Rivo Icons in your Vue project with @rivo-icons/vue.
Installation
npm install @rivo-icons/vueUsage
Import individual icons by name — only what you use gets bundled:
import { IconName } from '@rivo-icons/vue'<script setup>
import { Setting, Dollar, Clock } from '@rivo-icons/vue'
</script>
<template>
<!-- Default size: 24px -->
<Setting />
<!-- Custom size -->
<Dollar :size="32" />
<!-- Custom color -->
<Clock :size="20" color="#6366f1" />
</template>Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | string | 24 | Width and height in px |
color | string | currentColor | Stroke / fill color |
strokeWidth | number | string | 1.5 | Stroke width (outline icons) |
class | string | — | CSS class attribute |
TypeScript
All props are fully typed. Icon components extend a shared IconProps interface:
interface IconProps {
size?: number | string
color?: string
strokeWidth?: number | string
className?: string // React / Solid
}