get_platform_usage

Instructions

Implementation Reference

• src/index.ts:334-360 (handler)

  The main handler function for the get_platform_usage tool. It validates the input platform, retrieves the corresponding usage data from PLATFORM_USAGE, and returns it as JSON text content.

  private async handleGetPlatformUsage(args: any) {
    try {
      const platform = this.validatePlatform(args);
      const usage = PLATFORM_USAGE[platform];
  
      if (!usage) {
        throw new McpError(
          ErrorCode.InvalidRequest,
          `Platform '${platform}' is not supported`
        );
      }
  
      return {
        content: [
          {
            type: "text",
            text: JSON.stringify(usage, null, 2),
          },
        ],
      };
    } catch (error) {
      throw new McpError(
        ErrorCode.InternalError,
        `Failed to get platform usage: ${error instanceof Error ? error.message : "Unknown error"}`
      );
    }
  }

• src/index.ts:97-107 (schema)

  Input schema for the get_platform_usage tool, defining the required 'platform' parameter with an enum of supported platforms.

  inputSchema: {
    type: "object",
    properties: {
      platform: {
        type: "string",
        description: "Platform name (react, vue, angular, svelte, react-native, flutter, html)",
        enum: ["react", "vue", "angular", "svelte", "react-native", "flutter", "html"]
      },
    },
    required: ["platform"],
  },

• src/index.ts:94-108 (registration)

  Registration of the get_platform_usage tool in the ListToolsRequestSchema response, including name, description, and input schema.

  {
    name: "get_platform_usage",
    description: "Get platform-specific usage instructions for Hugeicons",
    inputSchema: {
      type: "object",
      properties: {
        platform: {
          type: "string",
          description: "Platform name (react, vue, angular, svelte, react-native, flutter, html)",
          enum: ["react", "vue", "angular", "svelte", "react-native", "flutter", "html"]
        },
      },
      required: ["platform"],
    },
  },

• src/index.ts:424-444 (helper)

  Helper function validatePlatform used by the handler to validate and normalize the platform input against supported keys in PLATFORM_USAGE.

  /**
   * Validate the platform argument
   */
  private validatePlatform(args: any): Platform {
    if (!args || typeof args.platform !== "string" || !args.platform.trim()) {
      throw new McpError(
        ErrorCode.InvalidRequest,
        "Platform must be a non-empty string"
      );
    }
  
    const platform = args.platform.trim().toLowerCase() as Platform;
    if (!Object.keys(PLATFORM_USAGE).includes(platform)) {
      throw new McpError(
        ErrorCode.InvalidRequest,
        `Invalid platform. Supported platforms are: ${Object.keys(PLATFORM_USAGE).join(', ')}`
      );
    }
  
    return platform;
  }

• src/utils/platform-usage.ts:42-236 (helper)

  Core data structure PLATFORM_USAGE containing platform-specific installation instructions, usage examples, and props for all supported platforms, used directly by the tool handler.

  export const PLATFORM_USAGE: Record<Platform, PlatformUsage> = {
    'react': {
      platform: 'react',
      installation: {
        core: 'npm install @hugeicons/react',
        packages: CORE_PACKAGES
      },
      basicUsage: `import { HugeiconsIcon } from '@hugeicons/react'
  // Using free icons (available by default)
  import { Notification03Icon } from '@hugeicons/core-free-icons'
  // Pro icons require authentication via .npmrc or similar config
  // import { Notification03Icon } from '@hugeicons-pro/core-stroke-rounded'
  
  function App() {
      return <HugeiconsIcon icon={Notification03Icon} size={24} color="currentColor" strokeWidth={1.5} />
  }`,
      props: [
        { name: 'icon', type: 'IconSvgObject', default: 'Required', description: 'The main icon component imported from an icon package' },
        { name: 'altIcon', type: 'IconSvgObject', description: 'Alternative icon component from an icon package for states, interactions, or animations' },
        { name: 'showAlt', type: 'boolean', default: 'false', description: 'When true, displays the altIcon instead of the main icon' },
        { name: 'size', type: 'number', default: '24', description: 'Icon size in pixels' },
        { name: 'color', type: 'string', default: 'currentColor', description: 'Icon color (CSS color value)' },
        { name: 'strokeWidth', type: 'number', default: '1.5', description: 'Width of the icon strokes (works with stroke-style icons)' },
        { name: 'className', type: 'string', description: 'Additional CSS classes' }
      ]
    },
    'vue': {
      platform: 'vue',
      installation: {
        core: 'npm install @hugeicons/vue',
        packages: CORE_PACKAGES
      },
      basicUsage: `<script setup>
  import { HugeiconsIcon } from '@hugeicons/vue'
  // Using free icons (available by default)
  import { Notification03Icon } from '@hugeicons/core-free-icons'
  // Pro icons require authentication via .npmrc or similar config
  // import { Notification03Icon } from '@hugeicons-pro/core-stroke-rounded'
  </script>
  
  <template>
      <HugeiconsIcon :icon="Notification03Icon" :size="24" color="currentColor" :strokeWidth="1.5" />
  </template>`,
      props: [
        { name: 'icon', type: 'IconSvgObject', default: 'Required', description: 'The main icon component imported from an icon package' },
        { name: 'altIcon', type: 'IconSvgObject', description: 'Alternative icon component from an icon package for states, interactions, or animations' },
        { name: 'showAlt', type: 'boolean', default: 'false', description: 'When true, displays the altIcon instead of the main icon' },
        { name: 'size', type: 'number', default: '24', description: 'Icon size in pixels' },
        { name: 'color', type: 'string', default: 'currentColor', description: 'Icon color (CSS color value)' },
        { name: 'strokeWidth', type: 'number', default: '1.5', description: 'Width of the icon strokes (works with stroke-style icons)' },
        { name: 'class', type: 'string', description: 'Additional CSS classes' }
      ]
    },
    'angular': {
      platform: 'angular',
      installation: {
        core: 'npm install @hugeicons/angular',
        packages: CORE_PACKAGES
      },
      basicUsage: `// your.component.ts
  import { Component } from '@angular/core'
  // Using free icons (available by default)
  import { Notification03Icon } from '@hugeicons/core-free-icons'
  // Pro icons require authentication via .npmrc or similar config
  // import { Notification03Icon } from '@hugeicons-pro/core-stroke-rounded'
  
  @Component({
      selector: 'app-example',
      template: \` <hugeicons-icon [icon]="notification03Icon" [size]="24" color="currentColor" [strokeWidth]="1.5"></hugeicons-icon> \`,
  })
  export class ExampleComponent {
      notification03Icon = Notification03Icon
  }`,
      props: [
        { name: 'icon', type: 'IconSvgObject', default: 'Required', description: 'The main icon component imported from an icon package' },
        { name: 'altIcon', type: 'IconSvgObject', description: 'Alternative icon component from an icon package for states, interactions, or animations' },
        { name: 'showAlt', type: 'boolean', default: 'false', description: 'When true, displays the altIcon instead of the main icon' },
        { name: 'size', type: 'number', default: '24', description: 'Icon size in pixels' },
        { name: 'color', type: 'string', default: 'currentColor', description: 'Icon color (CSS color value)' },
        { name: 'strokeWidth', type: 'number', default: '1.5', description: 'Width of the icon strokes (works with stroke-style icons)' },
        { name: 'class', type: 'string', description: 'Additional CSS classes' }
      ]
    },
    'svelte': {
      platform: 'svelte',
      installation: {
        core: 'npm install @hugeicons/svelte',
        packages: CORE_PACKAGES
      },
      basicUsage: `<script>
    import { HugeiconsIcon } from '@hugeicons/svelte'
    // Using free icons (available by default)
    import { Notification03Icon } from '@hugeicons/core-free-icons'
    // Pro icons require authentication via .npmrc or similar config
    // import { Notification03Icon } from '@hugeicons-pro/core-stroke-rounded'
  </script>
  
  <HugeiconsIcon icon={Notification03Icon} size={24} color="currentColor" strokeWidth={1.5} />`,
      props: [
        { name: 'icon', type: 'IconSvgObject', default: 'Required', description: 'The main icon component imported from an icon package' },
        { name: 'altIcon', type: 'IconSvgObject', description: 'Alternative icon component from an icon package for states, interactions, or animations' },
        { name: 'showAlt', type: 'boolean', default: 'false', description: 'When true, displays the altIcon instead of the main icon' },
        { name: 'size', type: 'number', default: '24', description: 'Icon size in pixels' },
        { name: 'color', type: 'string', default: 'currentColor', description: 'Icon color (CSS color value)' },
        { name: 'strokeWidth', type: 'number', default: '1.5', description: 'Width of the icon strokes (works with stroke-style icons)' },
        { name: 'class', type: 'string', description: 'Additional CSS classes' }
      ]
    },
    'react-native': {
      platform: 'react-native',
      installation: {
        core: 'npm install @hugeicons/react-native',
        packages: CORE_PACKAGES
      },
      basicUsage: `import { HugeiconsIcon } from '@hugeicons/react-native'
  // Using free icons (available by default)
  import { Notification03Icon } from '@hugeicons/core-free-icons'
  // Pro icons require authentication via .npmrc or similar config
  // import { Notification03Icon } from '@hugeicons-pro/core-stroke-rounded'
  
  export default function App() {
    return <HugeiconsIcon icon={Notification03Icon} size={24} color="#000000" strokeWidth={1.5} />
  }`,
      props: [
        { name: 'icon', type: 'IconSvgObject', default: 'Required', description: 'The main icon component imported from an icon package' },
        { name: 'altIcon', type: 'IconSvgObject', description: 'Alternative icon component from an icon package for states, interactions, or animations' },
        { name: 'showAlt', type: 'boolean', default: 'false', description: 'When true, displays the altIcon instead of the main icon' },
        { name: 'size', type: 'number', default: '24', description: 'Icon size in pixels' },
        { name: 'color', type: 'string', default: '#000000', description: 'Icon color (color string)' },
        { name: 'strokeWidth', type: 'number', default: '1.5', description: 'Width of the icon strokes (works with stroke-style icons)' }
      ]
    },
    'flutter': {
      platform: 'flutter',
      installation: {
        core: 'hugeicons: ^0.0.10',
        packages: []
      },
      basicUsage: `import 'package:hugeicons/hugeicons.dart';
  
  // Example usage in a widget
  HugeIcon(
    icon: HugeIcons.strokeRoundedHome01,
    color: Colors.red,
    size: 30.0,
  ),`,
      props: [
        { name: 'icon', type: 'HugeIcons', default: 'Required', description: 'The icon to display from HugeIcons collection' },
        { name: 'size', type: 'double', default: '24.0', description: 'Icon size in logical pixels' },
        { name: 'color', type: 'Color', default: 'Colors.black', description: 'Icon color from Flutter Colors' }
      ]
    },
    'html': {
      platform: 'html',
      installation: {
        core: 'CDN Link: https://use.hugeicons.com/font/icons.css',
        packages: []
      },
      basicUsage: `<!DOCTYPE html>
  <html>
      <head>
          <title>Hugeicons Example</title>
          <meta charset="UTF-8" />
          <link rel="stylesheet" href="https://use.hugeicons.com/font/icons.css" />
      </head>
      <body>
          <div class="icons">
              <ul>
                  <li>
                      <i class="hgi-stroke hgi-abacus"></i>
                      <p>abacus</p>
                  </li>
                  <li>
                      <i class="hgi-stroke hgi-absolute"></i>
                      <p>absolute</p>
                  </li>
                  <li>
                      <i class="hgi-stroke hgi-acceleration"></i>
                      <p>acceleration</p>
                  </li>
                  <li>
                      <i class="hgi-stroke hgi-access"></i>
                      <p>access</p>
                  </li>
              </ul>
          </div>
      </body>
  </html>`,
      props: [
        { name: 'class', type: 'string', default: 'hgi-stroke', description: 'Base CSS class for stroke-style icons' },
        { name: 'icon-name', type: 'string', default: 'Required', description: 'Specific icon class name (e.g., hgi-abacus, hgi-absolute)' },
        { name: 'style', type: 'CSS properties', description: 'Custom CSS styles for size, color, etc.' }
      ]
    }
  };