dirham：UAE 迪拉姆符号 (U+20C3) 作为 Web Font、CSS Utility 和 React Component

Source: Dev.to

介绍

阿联酋中央银行在 2025 年为迪拉姆引入了官方货币符号。Unicode 技术委员会已将其接受为 U+20C3，并计划在 2026 年 9 月的 Unicode 18.0 中发布。大多数操作系统和字体尚未渲染它。

dirham 是一个 npm 包，使 U+20C3 今天即可在生产环境中使用，并为原生 OS 支持到来时提供明确的迁移路径。

• 在线演示 & 文档
• 现在使用正确的代码点；以后再移除变通方案

该包在所有地方（React 组件、CSS content 值以及 JS 工具函数）都将符号编码为 \u20C3。自定义网页字体提供了当前的字形。当操作系统发布 Unicode 18.0 支持时，只需删除字体导入——一切仍然正常工作。

渲染选项

安装

pnpm add dirham

React 组件

DirhamSymbol 渲染内联 SVG。它兼容 SSR，且不需要加载字体。

import { DirhamSymbol } from 'dirham/react';

function Price() {
  return (
    <>
      100 
      
    
  );
}

属性

CSS / SCSS 用法

在项目中一次性导入 CSS（或 SCSS）：

import 'dirham/css';

@use 'dirham/scss';

然后通过一个简单的 “ 元素使用符号：

字体粗细选项

thin · extralight · light · regular · medium · semibold · bold · extrabold · black

JavaScript 实用函数

import { formatDirham, parseDirham } from 'dirham';

formatDirham(1234.5);                       // '\u20C3 1,234.50'
formatDirham(1234.5, { locale: 'ar-AE' }); // Arabic‑Indic numerals
formatDirham(100, { useCode: true });       // 'AED 100.00'

parseDirham('\u20C3 1,234.50');             // 1234.5

导出的包

• dirham – 核心实用函数和常量
• dirham/react – DirhamSymbol, DirhamIcon
• dirham/css – 包含 @font-face 的 CSS
• dirham/scss – 包含 @font-face 的 SCSS
• dirham/font/woff2 – 原始字体文件

仓库结构（Turborepo 单体仓库）

dirham/
├── apps/docs/          # Vite + React 演示站点
├── packages/
│   └── dirham-symbol/  # 已发布的 npm 包
└── turbo.json

链接

• GitHub
• npm
• Live Demo