SVG Themed

A React component that wraps SVG content and automatically resolves theme tokens (like $colors_core_text_primary) to actual theme values, enabling theme-aware custom SVG graphics.

Installation

npm install @xsolla/xui-svg-themed
# or
yarn add @xsolla/xui-svg-themed

Demo

Basic Usage

import * as React from 'react';
import { SvgThemed } from '@xsolla/xui-svg-themed';

export default function BasicSvg() {
  return (
    <SvgThemed width={24} height={24} viewBox="0 0 24 24">
      <circle
        cx={12}
        cy={12}
        r={10}
        fill="$colors_core_text_primary"
      />
    </SvgThemed>
  );
}

With Theme Tokens

import * as React from 'react';
import { SvgThemed } from '@xsolla/xui-svg-themed';

export default function ThemedIcon() {
  return (
    <SvgThemed width={32} height={32} viewBox="0 0 32 32">
      <rect
        x={4}
        y={4}
        width={24}
        height={24}
        rx={4}
        fill="$colors_control_faint_bg"
      />
      <path
        d="M16 8L20 16H12L16 8Z"
        fill="$colors_core_text_brand"
      />
    </SvgThemed>
  );
}

Anatomy

import { SvgThemed } from '@xsolla/xui-svg-themed';

<SvgThemed
  width={24}
  height={24}
  viewBox="0 0 24 24"
  // All standard SVG props
>
  <path fill="$colors_core_text_primary" d="..." />
  <circle stroke="$colors_core_text_brand" />
</SvgThemed>

Examples

Custom Status Icon

import * as React from 'react';
import { SvgThemed } from '@xsolla/xui-svg-themed';

export default function StatusIcon() {
  return (
    <SvgThemed width={24} height={24} viewBox="0 0 24 24">
      <circle
        cx={12}
        cy={12}
        r={10}
        fill="$colors_core_text_success"
      />
      <path
        d="M8 12L11 15L16 9"
        stroke="#fff"
        strokeWidth={2}
        fill="none"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </SvgThemed>
  );
}

Illustration with Multiple Colors

import * as React from 'react';
import { SvgThemed } from '@xsolla/xui-svg-themed';

export default function Illustration() {
  return (
    <SvgThemed width={100} height={100} viewBox="0 0 100 100">
      {/* Background */}
      <rect
        width={100}
        height={100}
        rx={12}
        fill="$colors_control_faint_bg"
      />
      {/* Primary shape */}
      <circle
        cx={50}
        cy={40}
        r={20}
        fill="$colors_core_text_brand"
      />
      {/* Secondary shape */}
      <rect
        x={30}
        y={65}
        width={40}
        height={20}
        rx={4}
        fill="$colors_core_text_secondary"
      />
    </SvgThemed>
  );
}

Badge with Gradient

import * as React from 'react';
import { SvgThemed } from '@xsolla/xui-svg-themed';

export default function GradientBadge() {
  return (
    <SvgThemed width={48} height={48} viewBox="0 0 48 48">
      <defs>
        <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="$colors_core_text_brand" />
          <stop offset="100%" stopColor="$colors_core_text_success" />
        </linearGradient>
      </defs>
      <circle cx={24} cy={24} r={20} fill="url(#grad)" />
      <text
        x={24}
        y={24}
        textAnchor="middle"
        dominantBaseline="central"
        fill="#fff"
        fontSize={16}
        fontWeight="bold"
      >
        XP
      </text>
    </SvgThemed>
  );
}

API Reference

SvgThemed

SvgThemedProps:

Extends all standard SVG element attributes plus:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | children | ReactNode | - | SVG content with theme tokens. | | width | number \| string | - | SVG width. | | height | number \| string | - | SVG height. | | viewBox | string | - | SVG viewBox attribute. |

Supported Theme Tokens

Use these token strings prefixed with $ for theme-aware colors:

| Token | Theme Path | | :---- | :--------- | | $colors_core_text_primary | content.primary | | $colors_core_text_secondary | content.secondary | | $colors_core_text_tertiary | content.tertiary | | $colors_core_text_brand | content.brand.primary | | $colors_core_text_success | content.success.primary | | $colors_core_text_warning | content.warning.primary | | $colors_core_text_alert | content.alert.primary | | $colors_core_text_neutral | content.neutral.primary | | $colors_control_faint_bg | control.mono.secondary.bg |

Themeable Properties

The following SVG properties are automatically resolved:

• fill
• stroke
• stopColor
• color

Use Cases

• Custom icons not available in icon packages
• Theme-aware illustrations
• Dynamic SVG graphics that adapt to light/dark modes
• Brand-specific visual elements
• Decorative graphics with theme integration

How It Works

1. SvgThemed wraps your SVG content
2. It recursively processes all child elements
3. Properties starting with $ are matched against token map
4. Tokens are replaced with actual theme color values
5. Result is a fully themed SVG that updates with theme changes