direct-currency

Currency icons for Nuxt / Vue / Quasar / plain HTML. Saudi Riyal uses the U+20C1 glyph from the Saudi Riyal Font and falls back to an SVG when the browser can’t draw it.

Live controls

SHOW_CURRENCY_SYMBOL (symbol ⇄ text) lower-case codes in text mode SAR rendering:

mode: … U+20C1 glyph: … DirectCurrency.text('SAR') → …

Playground — tweak and see it live

Currency Amount Position Font size 40px Font weight 700 Text colour Background Font family Gap (em) 0.25 Letter spacing 0px Direction Mode SAR rendering italic parent underline parent text-shadow outline icon box

Generated snippet

Basic usage

<link rel="stylesheet" href="https://assets.directksa.com/currency-utils/direct-currency.css">
<script src="https://assets.directksa.com/currency-utils/direct-currency.umd.js"></script>
<script>DirectCurrency.init();</script>

<i class="direct-currency cur-sar"></i>
<i class="direct-currency cur-usd"></i>
<i class="direct-currency cur-eur"></i>
<i class="direct-currency cur-pkr"></i>

Prices — inherits size, weight and colour from the surrounding text

1,250.00 1,250.00 1,250.00 1,250 normal weight 499 ١٬٢٥٠٫٠٠

Order summary (symbol before / after amount)

Item	Price
Hosting – 12 months	1,188.00
Domain .sa	120.00
Stripe fee	4.20
Freelancer payout	35,000
Total	1,312.20

All registered currencies

JavaScript API

DirectCurrency.text('SAR')            // "⃁"  or "SAR" in text mode
DirectCurrency.format(1250.5, 'SAR')  // "1,250.50 ⃁"
DirectCurrency.format(99, 'USD', { position: 'prefix', space: false })  // "$99.00"
DirectCurrency.html('EUR')            // '<i class="direct-currency cur-eur" ...></i>'
DirectCurrency.svg('SAR')             // standalone inline <svg> of the riyal glyph
DirectCurrency.setShowSymbol(false)   // switch mode at runtime
DirectCurrency.sarRender              // "font" | "svg"
DirectCurrency.codes()                // ["SAR","AED",...]

Standalone SVG via DirectCurrency.svg('SAR'):

Unknown codes & dynamic content

A code that is not registered (e.g. cur-xyz) simply prints its code: . Icons added later are picked up automatically when init({ observe: true }) is used: