Skip to content
Twilight React Playground
ثيم رائدaren

CurrencySymbol

componentBeginnerserverbrowserlive demo

Shows the Saudi riyal icon for SAR and the plain currency code for any other currency.

import { CurrencySymbol } from '@salla.sa/twilight-theme-engine/components/common';

In plain words

The Saudi riyal has its own symbol, and it is not a normal letter you can type, so it comes from Salla's icon font. CurrencySymbol shows that icon when the currency is SAR and simply writes the code (USD, AED) for everything else.

Signature

const CurrencySymbol: LazyExoticComponent<(props: { currency: string }) => JSX.Element>

// currency 'SAR'  → <i className="sicon-sar" aria-hidden="true" />
// anything else   → <span>{currency}</span>

Try it live

CurrencySymbol next to a number, the way the product page shows a price: the riyal icon for SAR, the code as text otherwise.Try this: switch to USD: you get the letters USD, not a $ sign. For full formatting use useMoney.
Storefront canvas · en · LTR

250

Controls
What a theme writes
import { CurrencySymbol } from '@salla.sa/twilight-theme-engine/components/common';

export function PlainPrice() {
  return (
    <span className="price">
      {250} <CurrencySymbol currency={'SAR'} />
    </span>
  );
}

Example

app/components/Total.tsx
import { CurrencySymbol } from '@salla.sa/twilight-theme-engine/components/common';

export function Total({ amount, currency }: { amount: string; currency: string }) {
  return (
    <p className="total">
      {amount} <CurrencySymbol currency={currency} />
      {currency === 'SAR' && <span className="sr-only">SAR</span>}
    </p>
  );
}

How it behaves

  • The comparison is exact: only the string SAR gets the icon, so sar renders the text "sar".

  • The icon is a glyph of the sicon icon font the theme loads.

  • The engine's product details and add-to-cart form put it after the sale, regular and starting prices.

  • It is lazy (code-split).

Gotchas

  • The SAR icon is aria-hidden and has no text, so a screen reader reads "250" with no currency. Add visually hidden text next to it, as the example does.

  • It ignores the store setting use_sar_symbol, which the engine Header checks before showing the same icon. Read store.settings.use_sar_symbol yourself if the merchant's choice should apply.

  • It formats nothing: no decimals, digits or placement. For a formatted price use useMoney().format, which adds the riyal icon for SAR itself.

Related

useMoney

Formats prices in the page language (with the riyal icon for SAR), and parses or validates amounts.

Source and docs