dirham v1.3.0 — A Universal Web Component for the UAE Dirham Symbol

dirham v1.3.0 — A Universal Web Component for the UAE Dirham Symbol

# webdev# javascript# typescript# opensource
dirham v1.3.0 — A Universal Web Component for the UAE Dirham SymbolPooya Golchian

The UAE Dirham now has an official Unicode codepoint — U+20C3 — accepted for Unicode 18.0. But...

The UAE Dirham now has an official Unicode codepoint — U+20C3 — accepted for Unicode 18.0. But operating systems won't ship native font support until September 2026.

dirham bridges that gap. It maps the official glyph to U+20C3 via a custom web font, so your content is semantically correct today and future-proof for when native support arrives.

What's new in v1.3.0

The headline feature is <dirham-price> — a Web Component that formats and displays Dirham amounts in any framework, no wrappers needed.

<script type="module" src="https://cdn.jsdelivr.net/npm/dirham/dist/web-component/index.js"></script>

<dirham-price amount="1250"></dirham-price>
<dirham-price amount="5000000" notation="compact"></dirham-price>
<dirham-price amount="500" use-code></dirham-price>
Enter fullscreen mode Exit fullscreen mode

It supports 8 attributes: amount, locale, decimals, notation, use-code, symbol-size, weight, and currency.

Works everywhere

Vue:

<script setup>
import "dirham/web-component";
</script>

<template>
  <dirham-price amount="1250" />
  <dirham-price amount="5000000" notation="compact" />
</template>
Enter fullscreen mode Exit fullscreen mode

Angular:

import { CUSTOM_ELEMENTS_SCHEMA, Component } from "@angular/core";
import "dirham/web-component";

@Component({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `<dirham-price amount="1250"></dirham-price>`
})
export class AppComponent {}
Enter fullscreen mode Exit fullscreen mode

Svelte:

<script>
  import "dirham/web-component";
</script>

<dirham-price amount="1250"></dirham-price>
Enter fullscreen mode Exit fullscreen mode

React still has dedicated components with full TypeScript support:

import { DirhamPrice } from "dirham/react";

<DirhamPrice amount={1250} />
<DirhamPrice amount={750} className="text-emerald-400 text-2xl" />
Enter fullscreen mode Exit fullscreen mode

Full feature set

Feature How
React SVG component <DirhamSymbol size={24} weight="bold" />
React price component <DirhamPrice amount={1250} notation="compact" />
Web Component (any framework) <dirham-price amount="1250">
CSS web font <i class="dirham-symbol"></i>
JS formatting formatDirham(1234.5) → ℃ 1,234.50
Parsing parseDirham("℃ 1,234.50") → 1234.5
Clipboard await copyDirhamSymbol()
CLI npx dirham copy
CDN jsDelivr, zero install
9 weight variants thin → black
5 font variants sans, serif, mono, arabic, default
RTL support Arabic locale with correct symbol placement

Why U+20C3?

Other approaches use Private Use Area hacks or plain text substitution. This package uses the officially assigned codepoint, which means:

  • Your content is semantically correct — search engines, screen readers, and parsers understand it
  • When Unicode 18.0 ships natively (Sep 2026), the web font gracefully becomes unnecessary — zero migration
  • The symbol behaves like $, €, and £ — it's a real currency character

Links 

npm install dirham
Enter fullscreen mode Exit fullscreen mode