How SVG Icons Are Extracted and Used in the AI Website Cloner Template

TLDR: The AI Website Cloner Template extracts inline <svg> elements from target websites using document.querySelectorAll('svg'), deduplicates identical markup, and generates type-safe React components in src/components/icons.tsx that are automatically styled via Tailwind utilities in src/components/ui/button.tsx.

The JCodesMore/ai-website-cloner-template automates the conversion of static website graphics into reusable React components. During the cloning process, the system identifies how SVG icons are extracted and used to create a centralized icon library that integrates seamlessly with the project's UI components and styling utilities.

The Automated Extraction Pipeline

Browser-Based Discovery

According to the workflow defined in .windsurf/workflows/clone-website.md, the cloning agent executes a headless browser script that runs document.querySelectorAll('svg') to capture every inline SVG element from the target website (referenced at line 182). This DOM query ensures that embedded icons are collected regardless of their depth in the document tree.

Deduplication Logic

Once collected, identical SVG markup is collapsed to prevent redundant component generation. This deduplication step ensures that recurring icons—such as navigation arrows or social media logos—generate only a single React component, keeping the bundle size minimal and the codebase clean.

Component Generation and Storage

Creating React Components

Each unique SVG is transformed into a named function component within src/components/icons.tsx. The naming convention follows visual purpose, producing exports like SearchIcon or ArrowRightIcon. As documented in .opencode/commands/clone-website.md (line 185), this file serves as the central registry for all extracted graphics.

Type Safety Implementation

The generated components accept SVGProps<SVGSVGElement> from React, allowing standard SVG attributes to pass through while maintaining full TypeScript safety. This props interface ensures that className, onClick, and other standard attributes work without additional configuration.

Styling and Integration

Automatic Sizing with Tailwind CSS

The src/components/ui/button.tsx file implements automatic SVG sizing through Tailwind CSS arbitrary variants. Line 9 declares [&_svg]:shrink-0 and [&_svg:not([class*='size-'])]:size-4, which applies a default 1rem (16px) size to any SVG lacking an explicit size class while preventing unwanted scaling.

Class Name Merging

Icon components leverage the cn() helper from src/lib/utils.ts to merge default styles with consumer-provided classes. This utility ensures that Tailwind classes are combined efficiently without conflicts, maintaining consistent theming across the application.

Practical Implementation Examples

The following code demonstrates the structure of the generated icons.tsx file and its usage within a standard button component:

// src/components/icons.tsx – an automatically generated file
import { SVGProps } from "react";

export const SearchIcon = (props: SVGProps<SVGSVGElement>) => (
  <svg viewBox="0 0 24 24" fill="none" {...props}>
    <path d="M21 21l-4.35-4.35" stroke="currentColor" strokeWidth="2" />
    <circle cx="10" cy="10" r="6" stroke="currentColor" strokeWidth="2" />
  </svg>
);

// Example usage in a button
import { Button } from "@/components/ui/button";
import { SearchIcon } from "@/components/icons";

export const MySearchButton = () => (
  <Button size="icon" variant="default">
    <SearchIcon className="size-4" />
  </Button>
);

Key Files in the Extraction Workflow

• .windsurf/workflows/clone-website.md – Defines the browser-based extraction step and deduplication logic (line 182)
• .opencode/commands/clone-website.md – Mirrors extraction instructions for the OpenCode runtime (line 185)
• src/components/icons.tsx – Auto-generated destination for all SVG React components
• src/components/ui/button.tsx – Implements automatic SVG sizing via Tailwind utilities (line 9)
• src/lib/utils.ts – Provides the cn() class name merging utility

Summary

• Extraction occurs via document.querySelectorAll('svg') in a headless browser per .windsurf/workflows/clone-website.md
• Deduplication collapses identical SVG markup before component generation
• Generation creates type-safe React components in src/components/icons.tsx with SVGProps<SVGSVGElement>
• Styling is handled automatically by Tailwind utilities in src/components/ui/button.tsx using [&_svg]:size-4 when no explicit size class is present
• Integration uses the cn() utility from src/lib/utils.ts for consistent class name merging

Frequently Asked Questions

Where are extracted SVG icons stored in the project?

All extracted SVG icons are automatically generated and stored in src/components/icons.tsx as named React components, making them importable from any file in the application.

How does the template prevent duplicate icon components?

The extraction pipeline deduplicates identical SVG markup during the cloning process, ensuring that visually identical icons only generate one shared component to prevent bundle bloat.

What happens if an SVG doesn't have explicit sizing classes?

The button component automatically applies sizing via Tailwind CSS utilities [&_svg:not([class*='size-'])]:size-4, defaulting icons to 1rem (16px) unless they declare their own size class.

Can I manually add custom SVG icons to the generated file?

Yes, you can manually add custom SVG components to src/components/icons.tsx following the same pattern used by the automated extraction: export a function component that accepts SVGProps<SVGSVGElement> and returns an <svg> element with spread props.

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