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:
-
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> );
-
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.
-
Import Icons in Components:
import { MenuOpenIcon } from '@/modules/Icons';
-
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:
-
Outline Icons (24x24):
- Import from
@heroicons/react/24/outline
- Import from
-
Solid Icons (24x24):
- Import from
@heroicons/react/24/solid
- Import from
-
Solid Icons (20x20):
- Import from
@heroicons/react/20/solid
- Import from
-
Solid Icons (16x16):
- Import from
@heroicons/react/16/solid
- Import from
How to Use Heroicons:
-
Browse Available Icon Names:
- You can browse the full list of icon names here (opens in a new tab).
-
Import and Use an Icon:
import { BeakerIcon } from '@heroicons/react/24/solid' function MyComponent() { return ( <> <BeakerIcon className="h-6 w-6 text-blue-500" /> </> ) }
-
Additional Information:
- For more detailed information on basic usage, refer to the Heroicons GitHub repository (opens in a new tab).
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.