IDE Autocomplete Feature

Hugeicons provides comprehensive TypeScript support across all our packages, offering an enhanced development experience with IDE autocompletion. This feature accelerates your development process by providing intelligent suggestions for icon names, props, and types.

TypeScript Integration

Our TypeScript integration provides several benefits:

Type Safety: Full type checking for all icon components and props
Intelligent Suggestions: Real-time icon and prop suggestions
Error Prevention: Catch potential issues during development
Documentation: Inline documentation for props and components

Package-Specific Types

Each style package includes its own TypeScript definitions. You’ll need both the framework component and the icon package:


// Import the framework component
import { HugeiconsIcon } from '@hugeicons/react';
 
// Import icons from style packages
import { SearchIcon } from '@hugeicons-pro/core-stroke-rounded';
import { SearchIcon as SearchSolid } from '@hugeicons-pro/core-solid-rounded';
import { SearchIcon as SearchBulk } from '@hugeicons-pro/core-bulk-rounded';

Prop Type Checking

TypeScript provides automatic type checking for all icon props:


import { HugeiconsIcon } from '@hugeicons/react';
import { SearchIcon } from '@hugeicons-pro/core-stroke-rounded';
 
// TypeScript will enforce correct prop types
<HugeiconsIcon
  icon={SearchIcon}
  size={24}              // number
  color="currentColor"   // string
  strokeWidth={1.5}      // number (only for stroke variants)
/>

Autocomplete Features

1. Import Suggestions

As you type your import statements, your IDE will suggest available components and icons:


// Framework component suggestions
import { Huge... } from '@hugeicons/react';
// Suggests: HugeiconsIcon
 
// Icon suggestions
import { Sea... } from '@hugeicons-pro/core-stroke-rounded';
// Suggests: SearchIcon, SealIcon, SeaWavesIcon, etc.

2. Prop Suggestions

When using the HugeiconsIcon component, get suggestions for available props:


<HugeiconsIcon
  // Press Ctrl+Space to see available props:
  // - icon (required)
  // - altIcon
  // - showAlt
  // - size
  // - color
  // - strokeWidth
  // - className
/>

3. Value Type Hints

Get immediate feedback on prop value types:


<HugeiconsIcon
  icon={SearchIcon}     // ✓ Correct: IconSvgObject
  size={24}            // ✓ Correct: number
  size="24"           // ✗ Error: string not assignable to number
  color="#000"        // ✓ Correct: string
  strokeWidth={1.5}   // ✓ Correct: number
/>

Style-Specific Autocompletion

Different icon styles may have different available props:


import { HugeiconsIcon } from '@hugeicons/react';
 
// Stroke style icons include strokeWidth
import { SearchIcon } from '@hugeicons-pro/core-stroke-rounded';
<HugeiconsIcon icon={SearchIcon} strokeWidth={2} />
 
// Solid style icons don't have strokeWidth
import { SearchIcon as SearchSolid } from '@hugeicons-pro/core-solid-rounded';
<HugeiconsIcon icon={SearchSolid} /> // strokeWidth prop not recommended
 
// Special styles may have style-specific props
import { SearchIcon as SearchDuotone } from '@hugeicons-pro/core-duotone-rounded';
<HugeiconsIcon icon={SearchDuotone} />

Framework Integration

Our TypeScript support extends to all supported frameworks, each with their own component package:


// React
import { HugeiconsIcon } from '@hugeicons/react';
import { SearchIcon } from '@hugeicons-pro/core-stroke-rounded';
 
// Vue
import { HugeiconsIcon } from '@hugeicons/vue';
import { SearchIcon } from '@hugeicons-pro/core-stroke-rounded';
 
// Angular
import { HugeiconsIcon } from '@hugeicons/angular';
import { SearchIcon } from '@hugeicons-pro/core-stroke-rounded';
 
// Svelte
import { HugeiconsIcon } from '@hugeicons/svelte';
import { SearchIcon } from '@hugeicons-pro/core-stroke-rounded';
 
// React Native
import { HugeiconsIcon } from '@hugeicons/react-native';
import { SearchIcon } from '@hugeicons-pro/core-stroke-rounded';

IDE Support

Hugeicons’ TypeScript integration works with all major IDEs:

Visual Studio Code
WebStorm
Atom
Sublime Text (with TypeScript plugin)
Vim/Neovim (with TypeScript plugin)

Best Practices

Use TypeScript: Enable TypeScript in your project for the best development experience
Enable Editor Support: Ensure your IDE’s TypeScript and JavaScript language features are enabled
Keep Updated: Use the latest versions of our packages for the most accurate type definitions
Import Types: If needed, you can import types directly from our packages:


import type { IconProps } from '@hugeicons/react';