⃁ Riyal

Guide · 3 min read · Updated 2026-05-08

How to display the Saudi Riyal symbol (U+20C1) in Svelte 5

Native Svelte 5 components using runes for the official SAMA Saudi Riyal sign. RiyalPrice, RiyalInput with mask, and a rune-based useRiyalRate composable. Compiles directly with your Vite or SvelteKit bundler — no extra config.

Svelte 5 introduced runes ($state, $derived, $effect, $bindable) and broke compatibility with most older Svelte component libraries. The riyal/svelte entry was built rune-first, so it drops straight into Svelte 5 / SvelteKit projects without any runes-vs-stores juggling.

Install

pnpm add riyal svelte
# or npm install riyal svelte

svelte ≥ 5 is an optional peer dependency. The package ships .svelte source so your bundler (Vite, SvelteKit) compiles it natively.

Basic usage

<script lang="ts">
  import {
    RiyalSymbol, RiyalIcon, RiyalPrice,
    AnimatedRiyalPrice, RiyalInput, useRiyalRate,
  } from "riyal/svelte";

  let amount: number | "" = $state(2499.99);
  const usd = useRiyalRate("USD");
</script>

<RiyalSymbol size={24} />
<RiyalIcon width={32} height={32} />
<RiyalPrice amount={2499.99} locale="ar-SA" />
<AnimatedRiyalPrice amount={amount} durationMs={600} />
<RiyalInput bind:value={amount} mask />

{#if usd.rate}
  <span>{((amount as number) * usd.rate).toFixed(2)} USD</span>
{/if}

Masked input — paste-friendly

The mask prop on <RiyalInput> turns the field into a format-as-you-type input. Pasting any of these into the field yields a clean number plus a perfectly grouped display:

Two-way binding via bind:value exposes the parsed numeric value to your component state.

Live SAR exchange rate (rune-based)

useRiyalRate is a factory that returns read-only rune getters plus a refresh() method:

const usd = useRiyalRate("USD");
// usd.rate     → number | null  (read-only)
// usd.loading  → boolean
// usd.error    → Error | null
// usd.refresh() → void

The first invocation kicks off a 1-hour-cached fetch. Subsequent components share the same in-memory cache.

Next steps

Built by Pooya Golchian · riyal on npm · live demo