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

#javascript #typescript #webdev #opensource

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>

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>

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 {}

Svelte:

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

<dirham-price amount="1250"></dirham-price>

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" />

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