SVX Naming Conventions

The SVX framework follows strict naming conventions to ensure consistency and maintainability across all components and files.

File Naming

  • Kebab Case

    All file names use kebab-case (hyphenated lowercase)

    svx-core-header.tsx

  • Prefix Pattern

    Files are prefixed with their category and subcategory

    svx-core-header.tsx
    svx-html-button.tsx
Component Naming

  • PascalCase

    All component names use PascalCase (capitalized words with no spaces)

    SVXCoreHeader

  • Prefix Pattern

    Components are prefixed with SVX or SVX followed by their category

    SVXCoreHeader
    SVXHtmlButton
Props Interfaces

  • Component + Props

    Props interfaces are named with the component name followed by "Props"

    interface SVXCoreHeaderProps {
      sticky?: boolean;
      shrinkOnScroll?: boolean;
      }
Directory Structure

  • Category-Based

    Components are organized by category in separate directories

    /components/core/
    /components/html/
    /components/svg/
    /components/shape/
Naming Categories

Core Components

Foundational layout components

  • SVXCoreHeader
  • SVXCoreMain
  • SVXCoreFooter
  • SVXCoreWrapper
  • SVXCoreNav

HTML Components

HTML-based UI components

  • SVXHtmlButton
  • SVXHtmlIcon
  • SVXHtmlLogo
  • SVXShapeHTML

SVG Components

SVG-based UI components

  • SVXSvgButton
  • SVXSvgIcon
  • SVXSvgLogo
  • SVXShapeSVG

Shape Components

Shape rendering components

  • SVXShape
  • SVXShapeBase

Control Components

Interactive control components

  • SVXControlTheme
  • SVXControlBrandMode
  • SVXControlBrandColor

Utility Files

Utility and helper functions

  • svx-string.ts
  • svx-css.ts
  • svx-core.ts