Icon System (Icons.tsx)
Relevant source files
The following files were used as context for generating this wiki page:The icon system for this project is centralized within the components/Icons.tsx file. It provides a collection of SVG icons wrapped as individual React functional components. This approach ensures visual consistency across the application and allows for easy customization and reuse of icons in different UI components, such as the main application layout, the AI demonstration panel, and the chatbot interface.
Sources: components/Icons.tsx, App.tsx, components/AiDemo.tsx
Architecture and Implementation
Each icon is defined as a stateless React functional component (React.FC) that accepts a generic IconProps type. This allows developers to pass standard SVG attributes like className, width, and height directly to the underlying <svg> element, making the icons flexible and easy to style.
The core of the system is the IconProps type definition and the consistent component structure.
Sources: components/Icons.tsx:4-5
IconProps Type
A generic props type is defined to be applied to all icon components. It is an alias for React.SVGProps<SVGSVGElement>, which includes all valid attributes for an SVG element in React.
// components/Icons.tsx:4-5
type IconProps = React.SVGProps<SVGSVGElement>;
Sources: components/Icons.tsx:4-5
Icon Component Structure
Each icon component follows the same pattern: it's a React.FC<IconProps> that returns an <svg> element with its paths. The ...props are spread onto the SVG element, enabling customization.
// components/Icons.tsx:7-10
export const UserGroupIcon: React.FC<IconProps> = (props) => (
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
<path strokeLinecap="round" strokeLinejoin="round" d="..." />
</svg>
);
Sources: components/Icons.tsx:7-10
The following diagram illustrates the relationship between the props, the React component, and a specific icon implementation.
This diagram shows that IconProps is a type alias for React.SVGProps, and the UserGroupIcon component implements React.FC and uses IconProps for its properties.
Sources: components/Icons.tsx:4-10
Available Icons and Usage
The Icons.tsx file exports a variety of icons used throughout the application's user interface. The table below lists the available icons and where they are primarily used.
| Icon Component Name | Primary Use Case / Component | Source File(s) |
|---|---|---|
UserGroupIcon | "Benefits to Government" section in the main app page. | App.tsx:8, 80-82 |
BeakerIcon | "Benefits to Private Sector" section in the main app page. | App.tsx:8, 89-91 |
ShieldCheckIcon | "Benefits to Community" section in the main app page. | App.tsx:8, 98-100 |
CheckCircleIcon | Not directly used in the provided files, but available. | components/Icons.tsx:28-31, components/Timeline.tsx:3 (Note: CheckCircleIcon is imported but not rendered in Timeline.tsx) |
BoltIcon | AI Analysis Dashboard: "Incident Type". | components/AiDemo.tsx:5, 140 |
MapPinIcon | AI Analysis Dashboard: "Location". | components/AiDemo.tsx:5, 141 |
ShieldExclamationIcon | AI Analysis Dashboard: "Recommended Action". | components/AiDemo.tsx:5, 142 |
ClipboardDocumentListIcon | AI Analysis Dashboard: "Structured Data" header. | components/AiDemo.tsx:5, 143 |
SparklesIcon | AI Analysis Dashboard header and Chatbot "Thinking Mode". | components/AiDemo.tsx:5, 126, components/Chatbot.tsx:4, 237 |
ChatBubbleLeftRightIcon | Chatbot open button. | components/Chatbot.tsx:4, 196 |
PaperAirplaneIcon | Chatbot message send button. | components/Chatbot.tsx:4, 258 |
XMarkIcon | Chatbot close button (both main and floating). | components/Chatbot.tsx:4, 196, 203 |
MagnifyingGlassIcon | Chatbot "Search" toggle. | components/Chatbot.tsx:4, 238 |
MapIcon | Chatbot "Maps" toggle. | components/Chatbot.tsx:4, 239 |
MicrophoneIcon | Chatbot "Start Recording" button. | components/Chatbot.tsx:4, 255 |
StopCircleIcon | Chatbot "Stop Recording" button. | components/Chatbot.tsx:4, 252 |
Sources: components/Icons.tsx, App.tsx, components/AiDemo.tsx, components/Chatbot.tsx, components/Timeline.tsx
Usage Pattern
To use an icon, a component must first import the desired icon component from components/Icons.tsx. The icon can then be rendered like any other React component, passing props such as className for styling.
The following flowchart illustrates the typical workflow for using an icon.
Sources: components/AiDemo.tsx:5, 140
Example
The AiDemo component uses several icons to build its "AI Analysis Dashboard". The AnalysisItem sub-component receives an icon as a React.ReactNode and renders it.
// components/AiDemo.tsx:5, 131-142
// Import statement at the top of the file
import { BoltIcon, MapPinIcon, ShieldExclamationIcon, ... } from './Icons';
// ... inside the AiDemo component render method
<AnalysisItem icon={<BoltIcon/>} label="Incident Type" value={analysis.incidentType} loading={isAnalyzing} />
<AnalysisItem icon={<MapPinIcon/>} label="Location" value={analysis.location} loading={isAnalyzing} />
<AnalysisItem icon={<ShieldExclamationIcon/>} label="Recommended Action" value={analysis.recommendedAction} loading={isAnalyzing} />
// ... definition of AnalysisItem
const AnalysisItem: React.FC<{ icon: React.ReactNode; ... }> = ({ icon, ... }) => (
<div className="flex items-start ...">
<div className="flex-shrink-0 w-8 h-8 text-brand-primary">{icon}</div>
{/* ... */}
</div>
);
This example demonstrates how icons are imported and passed as props to be rendered within other components, with styling applied via parent div elements.
Sources: components/AiDemo.tsx:5, 112-120, 140-142
Conclusion
The Icons.tsx file establishes a simple yet powerful and centralized system for managing SVG icons within the application. By defining each icon as a customizable React component, the system promotes code reuse, simplifies maintenance, and ensures a consistent visual language across all features, from the main project information pages to the interactive AI demo and chatbot functionalities.
Sources: components/Icons.tsx