Nuxt
Nuxt
Use Rivo Icons in your Nuxt project with @rivo-icons/nuxt.
Installation
npm install @rivo-icons/nuxtConfiguration
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@rivo-icons/nuxt'],
})Usage
The Nuxt module auto-imports all icons as global components. No import statement is needed anywhere. Icons are prefixed with Icon: e.g. Setting → <IconSetting />.
<!-- No import needed — all icons are auto-imported -->
<template>
<IconSetting />
<IconDollar :size="32" />
<IconClock :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
}