How to Convert Extracted SVG Icons to React Components in the AI Website Cloner Template

The AI Website Cloner Template centralizes all icon assets in src/components/icons.tsx, where each extracted SVG is wrapped as a React component that forwards props for full styling control.

The JCodesMore/ai-website-cloner-template stores every extracted icon asset in a single TypeScript file. When you need to convert extracted SVG icons to React components, you follow a standardized pattern that makes them compatible with the template's Shadcn UI components. This approach leverages the cn() utility from src/lib/utils.ts and ensures consistent Tailwind CSS styling across your application.

The Architecture of src/components/icons.tsx

According to the repository structure, src/components/icons.tsx serves as the central registry where all extracted SVGs are transformed into reusable React components. This file is automatically generated during the cloning process, but you can manually edit it to add custom icons or modify existing ones. Keeping all icons in one location ensures tree-shakeable imports and maintains type safety throughout the application.

Step-by-Step Conversion Process

1. Create the Component Wrapper

Convert your raw SVG markup into a function component that accepts standard SVG props. Use the React.SVGProps<SVGSVGElement> type to ensure full TypeScript support.

// src/components/icons.tsx
import * as React from 'react';

export const HomeIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    {...props}
  >
    <path d="M12 2L2 12h3v8h6v-6h2v6h6v-8h3z" />
  </svg>
);

2. Forward Props for Styling Flexibility

The spread operator {...props} forwards all received attributes to the root <svg> element. This allows parent components to override default attributes like className, style, or onClick handlers.

3. Export from the Central Registry

Add the new component as a named export in src/components/icons.tsx. This centralization allows other files to import icons using clean, destructured syntax.

// Adding multiple icons to the registry
export const SearchIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" {...props}>
    <circle cx="11" cy="11" r="8" />
    <line x1="21" y1="21" x2="16.65" y2="16.65" />
  </svg>
);

4. Import and Use in UI Components

Reference the icon in your JSX using the named import. The component works seamlessly with Shadcn UI components like Button.

// src/components/ui/button.tsx usage example
import { HomeIcon } from '@/components/icons';

export default function Navigation() {
  return (
    <Button variant="primary">
      <HomeIcon className="mr-2" />
      Go Home
    </Button>
  );
}

Integration with Shadcn UI and Tailwind CSS

The template uses Tailwind CSS for all styling. The Button component in src/components/ui/button.tsx includes the [&_svg]:size-4 selector, which automatically applies a default size to any embedded SVG. When you need custom sizing, pass Tailwind classes through the className prop.

The cn() utility in src/lib/utils.ts merges Tailwind class names intelligently. While primarily used for UI components, you can use this utility inside your icon components if you need complex default styling logic.

// Custom sizing example
<Button variant="secondary">
  <HomeIcon className="size-6 text-blue-500" />
  Larger Home
</Button>

Summary

• The src/components/icons.tsx file serves as the central registry for all SVG icons in the AI Website Cloner Template.
• Convert extracted SVG icons to React components by wrapping them in functions that accept React.SVGProps<SVGSVGElement> and forward props via {...props}.
• Always export icons as named exports to enable tree-shaking and clean imports.
• Icons automatically inherit default sizing from Shadcn UI components via the [&_svg]:size-4 Tailwind rule.
• Override styles by passing Tailwind classes to the className prop, which merges with defaults.

Frequently Asked Questions

Where does the AI Website Cloner Template store SVG icons?

All extracted and custom SVG icons live in src/components/icons.tsx. This centralized approach simplifies imports and ensures consistent typing across the application.

How do I handle custom sizes for icons in this template?

Pass Tailwind size classes like size-6 or w-4 h-4 through the className prop. The forwarded props pattern ensures these classes override any defaults set by parent components like Button.

Can I modify the icons.tsx file after generation?

Yes. While the file is generated during the cloning process, you can manually edit it to add new icons, modify existing paths, or adjust default attributes. The component structure remains compatible with the rest of the template.

Why forward props to the SVG element instead of hardcoding attributes?

Forwarding props via {...props} allows the component to accept any valid SVG attribute, including event handlers, ARIA labels, and style overrides. This makes the icon fully reusable across different contexts without creating multiple variants.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}