get_platform_usage

Retrieve platform-specific implementation instructions for Hugeicons integration across React, Vue, Angular, Svelte, React Native, Flutter, and HTML frameworks.

Instructions

Get platform-specific usage instructions for Hugeicons

Input Schema

TableJSON Schema

Name	Required	Description	Default
`platform`	Yes	Platform name (react, vue, angular, svelte, react-native, flutter, html)

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.' }
    ]
  }
};

hugeicons-mcp