Brand Configuration

Type Definition

interface BrandConfig {
  /**
   * Application name (can be i18n key or plain text)
   */
  name: string;

  /**
   * Logo component
   */
  logo?: ComponentType<{ className?: string }>;

  /**
   * Version string
   */
  version?: string;
}

Basic Configuration

brand: {
  name: 'My App',
  version: 'v1.0.0',
}

Using i18n Keys

If internationalization is enabled, you can use i18n keys as the app name:

brand: {
  name: 'app.name',  // i18n key
  version: `v${__APP_VERSION__}`,
},

i18n: {
  resources: {
    en: {
      app: { name: 'My App' },
    },
    zh: {
      app: { name: '我的应用' },
    },
  },
},

The app name will automatically switch based on the current language.

Dynamic Version Number

Use the Vite-defined __APP_VERSION__ variable to automatically read the version from package.json:

brand: {
  name: 'My App',
  version: `v${__APP_VERSION__}`,
}

Configuration in vite.config.ts:

import { readFileSync } from 'fs';
import { resolve } from 'path';

const pkg = JSON.parse(readFileSync(resolve(__dirname, 'package.json'), 'utf-8'));

export default defineConfig({
  define: {
    '__APP_VERSION__': JSON.stringify(pkg.version),
  },
  // ...
});

Custom Logo

Create a Logo component and pass it to the configuration:

// src/components/Logo.tsx
export function MyLogo({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="currentColor">
      {/* SVG paths */}
    </svg>
  );
}

// src/config.ts
import { MyLogo } from './components/Logo';

brand: {
  name: 'My App',
  logo: MyLogo,
  version: `v${__APP_VERSION__}`,
}

The Logo component receives a className prop for controlling size and color.

Display Locations

Brand information is displayed in the following locations:

Location	Content
Title bar	Logo + App name
Settings > About	App name + Version

Complete Example

import { MyLogo } from './components/Logo';

export const config = {
  brand: {
    name: 'app.name',
    logo: MyLogo,
    version: `v${__APP_VERSION__}`,
  },

  i18n: {
    defaultLanguage: 'zh',
    supportedLanguages: ['zh', 'en'],
    resources: {
      en: {
        app: {
          name: 'My Desktop App',
        },
      },
      zh: {
        app: {
          name: '我的桌面应用',
        },
      },
    },
  },
};