Docs
Native Modules
Icons

Icon Components

Overview

The Icons module provides a collection of SVG-based icon components that can be seamlessly integrated into your application. These icons are lightweight and fully customizable using standard CSS classes, making them versatile for a variety of design needs.

Location

The source code for the Icons module is located in the /modules/native/Icons.js file.

Usage

The Icons.js file serves as a central repository for storing and managing SVG icon components, making them easily accessible throughout your codebase.

Example Usage

To use an icon from the Icons module, you can import it as follows:

import { IconName } from '@/modules/native/Icons';

Adding New Icons

To add new icons to the Icons.js file, follow these steps:

  1. Create a New Named Export Function: Define a new function for your icon as a named export.
  2. Return the SVG Content: Inside the function, return the SVG content for the icon.
  3. Use Descriptive Names: Ensure the function name is descriptive and follows the existing naming conventions in the module.
  4. Example: This is how you add a new FacebookIcon:
export const FacebookIcon = () => (
    <svg
        xmlns="http://www.w3.org/2000/svg"
        width="20"
        height="20"
        viewBox="0 0 24 24"
        fill="currentColor"
        className="block h-6 w-6"
    >
        <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
    </svg>
);

For detailed instructions on how to use these icon components and guidelines for incorporating icons into your StartupBolt projects, refer to the Icons Documentation.

Conclusion

The Icons module provides a simple and efficient way to incorporate icons into your StartupBolt applications. For more information on usage and customization, please visit the Icons Documentation.

FeatureTabsLoginButton