Svelte

Svelte

Use Rivo Icons in your Svelte project with @rivo-icons/svelte.


Installation

npm install @rivo-icons/svelte

Usage

Import individual icons by name — only what you use gets bundled:

import { IconName } from '@rivo-icons/svelte'
<script>
  import { Setting, Dollar, Clock } from '@rivo-icons/svelte'
</script>

<Setting size={24} />

<Dollar size={32} />

<Clock size={20} color="#6366f1" />

Props

PropTypeDefaultDescription
sizenumber | string24Width and height in px
colorstringcurrentColorStroke / fill color
strokeWidthnumber | string1.5Stroke width (outline icons)

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
}