dirham: UAE 디르함 심볼 (U+20C3)을 웹 폰트, CSS 유틸리티 및 React 컴포넌트

Source: Dev.to

소개

UAE 중앙은행은 2025년에 디르함을 위한 공식 통화 기호를 도입했습니다. 유니코드 기술 위원회는 이를 U+20C3 로 채택했으며 2026년 9월에 출시될 Unicode 18.0에 포함될 예정입니다. 대부분의 운영 체제와 폰트는 아직 이를 렌더링하지 못합니다.

dirham 은 npm 패키지로, 오늘날 프로덕션 환경에서 U+20C3 을 사용할 수 있게 해 주며, 네이티브 OS 지원이 도입될 때를 위한 명확한 마이그레이션 경로를 제공합니다.

• 실시간 데모 및 문서
• 지금 바로 올바른 코드포인트를 사용하고, 나중에 워크어라운드를 제거하세요

이 패키지는 심볼을 \u20C3 로 모든 곳(React 컴포넌트, CSS content 값, JS 유틸리티)에서 인코딩합니다. 현재는 커스텀 웹 폰트가 글리프를 제공합니다. 운영 체제가 Unicode 18.0 지원을 제공하면 폰트 임포트를 제거하기만 하면 되며, 모든 것이 그대로 작동합니다.

렌더링 옵션

설치

pnpm add dirham

React 컴포넌트

DirhamSymbol 은 인라인 SVG를 렌더링합니다. SSR‑호환이며 폰트 로딩이 필요 없습니다.

import { DirhamSymbol } from 'dirham/react';

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

Props

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