Managing Icons in StartupBolt

There are two ways to manage icons in StartupBolt. This guide provides a convenient overview of both methods.

1. Using Components from Icons.js

The first method involves using the components from the Icons.js file located in modules/Icons.js. This file provides convenient components to store and access various SVG icons in your codebase.

Steps to Export and Use Icons:

1. Export Icons: In modules/Icons.js, export your SVG icons as React components:

   export const MenuOpenIcon = () => (
       <svg className="block h-6 w-6" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" aria-hidden="true">
           <path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
       </svg>
   );

2. Source SVG Icons:

   • You can obtain SVG icons from several websites such as Heroicons (opens in a new tab).
   • Alternatively, you can generate them using tools like Claude, Gemini, or ChatGPT.

3. Import Icons in Components:

   import { MenuOpenIcon } from '@/modules/Icons';

4. Render the Icon:

   <MenuOpenIcon />

2. Using Heroicons React Package

The second method utilizes the Heroicons React package. Heroicons are SVG icons designed by the makers of Tailwind CSS, and the @heroicons/react package is preinstalled in StartupBolt.

Types of Heroicons:

1. Outline Icons (24x24):

   • Import from @heroicons/react/24/outline

2. Solid Icons (24x24):

   • Import from @heroicons/react/24/solid

3. Solid Icons (20x20):

   • Import from @heroicons/react/20/solid

4. Solid Icons (16x16):

   • Import from @heroicons/react/16/solid

How to Use Heroicons:

1. Browse Available Icon Names:

   • You can browse the full list of icon names here (opens in a new tab).

2. Import and Use an Icon:

   import { BeakerIcon } from '@heroicons/react/24/solid'
    
   function MyComponent() {
     return (
       <>
         <BeakerIcon className="h-6 w-6 text-blue-500" />
       </>
     )
   }

3. Additional Information:

   • For more detailed information on basic usage, refer to the Heroicons GitHub repository (opens in a new tab).

3. Using Lucide React Package

The Lucide React package offers a broad variety of icons with a focus on simplicity and performance. Lucide icons are highly customizable and easy to integrate into React applications.

How to Use Lucide Icons:

1. Browse the Lucide Icon Set:

   • The full list of available icons can be found on the Lucide website (opens in a new tab) or in the GitHub repository (opens in a new tab)
   • Copy JSX

2. Importing Lucide Icons:

   • Lucide allows individual imports, which helps reduce bundle size.
   • Example of importing a specific icon:

     import { Camera } from 'lucide-react';
      
     function MyComponent() {
       return (
         <Camera className="h-6 w-6 text-green-500" />
       );
     }

3. Icon Size and Styling:

   • You can customize the size, color, and styling by applying Tailwind or standard CSS classes to the icon.

     <Camera className="h-8 w-8 text-purple-600 hover:text-purple-800" />

By following these methods, you can efficiently manage and use icons in your StartupBolt application, enhancing both the visual appeal and functionality of your application.