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

Convert extracted SVG icons to React components by wrapping them in functional components that accept React.SVGProps<SVGSVGElement> and forwarding those props to the <svg> element, then export them from src/components/icons.tsx for use throughout your application.

The AI Website Cloner Template stores all icon assets in src/components/icons.tsx, where each SVG is exposed as a typed React component. Converting extracted SVGs into reusable components allows you to leverage the template's Tailwind CSS integration and Shadcn UI component system while maintaining type safety and tree-shaking benefits.

Understanding the Icon Architecture

The template follows a centralized icon pattern. According to the project structure, src/components/icons.tsx serves as the single source of truth for all iconography. This file contains named exports for each icon, implemented as functional components that wrap raw SVG markup.

The icon components in this repository implement a specific interface: they accept React.SVGProps<SVGSVGElement> and forward these props directly to the underlying <svg> element. This architecture enables parent components to control size, color, stroke width, and event handlers without modifying the base icon definition.

Key files in the icon system include:

• src/components/icons.tsx – Central registry where all SVG icons live as React components
• src/components/ui/button.tsx – Demonstrates how the button component automatically styles child SVGs using the [&_svg]:size-4 Tailwind selector
• src/lib/utils.ts – Provides the cn() utility for merging Tailwind class names when you need custom icon styling

Converting Raw SVG to React Components

When you extract an SVG from a target website during the cloning process, you must transform it into a component that matches the template's patterns.

Define the Component Interface

Each icon component should accept the standard SVG props interface:

// 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>
);

Forward Props to the SVG Element

The spread operator {...props} ensures that className, style, onClick, and other standard SVG attributes pass through to the rendered element. This forwarding mechanism is critical for allowing Tailwind utility classes to modify the icon's appearance from parent components.

When creating the component:

1. Preserve the original viewBox from the extracted SVG to maintain aspect ratio
2. Set stroke to "currentColor" (or fill, depending on the icon type) to enable color inheritance from parent text colors
3. Spread props after default attributes so that consumer-defined props can override defaults

Integrating with the Template's Styling System

The AI Website Cloner Template uses Tailwind CSS for styling, with specific conventions for icon sizing.

Default Sizing Patterns

The button component in src/components/ui/button.tsx applies automatic sizing to child SVGs through the [&_svg]:size-4 Tailwind selector. When you place an icon inside a button, it inherits a default 1rem (16px) size without requiring explicit classes:

import { HomeIcon } from '@/components/icons';
import { Button } from '@/components/ui/button';

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

Using the cn() Utility for Custom Classes

For custom icon styling, import the cn() utility from src/lib/utils.ts. This function merges Tailwind classes and handles conditional logic:

import { cn } '@/lib/utils';

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

Usage Examples with Shadcn UI

Icons in this template integrate seamlessly with Shadcn UI components through the props-forwarding pattern.

Inside Form Buttons

Place icons directly inside Button components to leverage automatic sizing:

import { SearchIcon, ArrowRightIcon } from '@/components/icons';
import { Button } from '@/components/ui/button';

function SearchForm() {
  return (
    <div className="flex gap-2">
      <Button>
        <SearchIcon className="mr-2" />
        Search
      </Button>
      
      <Button variant="secondary">
        Next
        <ArrowRightIcon className="ml-2" />
      </Button>
    </div>
  );
}

Custom Sizes and Colors

Override default sizing by passing explicit Tailwind classes:

// Large icon with custom color
<HomeIcon className="size-8 text-blue-500" />

// Small icon with hover state
<SearchIcon className="size-3 hover:text-gray-600" />

Because the component forwards all props, you can also attach event handlers directly:

<HomeIcon 
  className="cursor-pointer"
  onClick={() => router.push('/')}
/>

Summary

• Centralize icons in src/components/icons.tsx using named exports for each React component
• Forward props using React.SVGProps<SVGSVGElement> and the spread operator {...props} to enable full styling control from parent components
• Use currentColor for strokes and fills to allow text color inheritance through Tailwind classes
• Leverage automatic sizing in Shadcn UI components that target [&_svg]:size-4, or override with explicit size-* classes
• Utilize the cn() utility from src/lib/utils.ts when merging default and consumer-provided Tailwind classes

Frequently Asked Questions

Where should I place new SVG components in the repository?

Add new icon components to src/components/icons.tsx alongside existing exports. This centralizes all iconography for the application, making imports predictable and enabling easy updates. If you have many related icons, you can group them in the same file using clear naming conventions like LeftArrowIcon and RightArrowIcon.

How do I handle custom colors or sizes for specific icons?

Pass Tailwind utility classes directly through the className prop. The props-forwarding pattern ensures these classes merge with any defaults. For colors, use stroke-current or fill-current in the component definition, then control the actual color via text-red-500 or similar classes on the component instance.

Why must I forward props to the SVG element?

Forwarding props maintains the component's flexibility without requiring prop-drilling or context providers. It allows parent components to pass aria-label attributes for accessibility, onClick handlers for interactivity, and style overrides for animations while preserving the base SVG geometry defined in src/components/icons.tsx.

Can I use these icons outside of Shadcn UI buttons?

Yes. The React.SVGProps<SVGSVGElement> interface ensures compatibility with any React component or HTML element. Use them in navigation menus, cards, or standalone decorative elements. Just remember to include explicit sizing classes like size-4 or size-6 when not using the button component's automatic sizing.

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