IDE Autocomplete Feature #

The Houston Icons library is fully compatible with TypeScript, offering an enhanced development experience with the Autocomplete feature in Integrated Development Environments (IDEs). This feature speeds up your development process by providing quick access to icon names and properties directly within your code editor.

Overview #

When using Houston Icon with TypeScript in your IDE, the Autocomplete feature helps you to effortlessly browse and insert icons into your project. This functionality ensures that you can see available icons and their respective properties in real-time, reducing errors and improving code quality.

Benefits of TypeScript Compatibility #

• Type Safety: Enjoy the benefits of type safety for icons, ensuring that you use the correct properties and values.
• Development Speed: Quickly find the icons you need without leaving your IDE, thanks to immediate suggestions.
• Error Reduction: Minimize typing errors and property misuses with real-time feedback and suggestions.

How to Use Autocomplete with Houston Icons:#

To take advantage of the Autocomplete feature, ensure your project is set up with TypeScript and that you have @houstonicons/react, @houstonicons/react-native or @houstonicons/angular installed. Here's a simple guide:

1. Import an Icon: Start typing the import statement in your component file. The Autocomplete feature will suggest available icons from the Houston Icons library.
   

   import { Home01Icon } from '@houstonicons/react'
2. Insert an Icon Component: When typing out the icon component in your JSX, TSX or TS file, the Autocomplete will suggest properties and their expected values.
   

   <Home01Icon size={24} color="blue" /> 
3. Utilize Props: As you type the properties (props) for the icon, such as size or color, the Autocomplete will suggest available options and values, ensuring compatibility and correctness.

Example #

Here's an example showing how Autocomplete works when importing and using an icon in a React project:

• Typing import { Hwill prompt suggestion like Home01Icon, HeartIcon, etc.
• After selecting HomeIcon and using it in your JSX, typing <Home01Icon will prompt property suggestions like size, color, variant, etc.