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

> Learn how the AI Website Cloner Template extracts SVG icons, deduplicates markup, and generates type-safe React components for seamless integration and styling with Tailwind CSS. Get started today!

- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: how-to-guide
- Published: 2026-07-11

---

**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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx) that are automatically styled via Tailwind utilities in [`src/components/ui/button.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx). The naming convention follows visual purpose, producing exports like `SearchIcon` or `ArrowRightIcon`. As documented in [`.opencode/commands/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/icons.tsx) file and its usage within a standard button component:

```tsx
// 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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md)** – Defines the browser-based extraction step and deduplication logic (line 182)
- **[`.opencode/commands/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.opencode/commands/clone-website.md)** – Mirrors extraction instructions for the OpenCode runtime (line 185)
- **[`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx)** – Auto-generated destination for all SVG React components
- **[`src/components/ui/button.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/ui/button.tsx)** – Implements automatic SVG sizing via Tailwind utilities (line 9)
- **[`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md)
- **Deduplication** collapses identical SVG markup before component generation
- **Generation** creates type-safe React components in [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx) with `SVGProps<SVGSVGElement>`
- **Styling** is handled automatically by Tailwind utilities in [`src/components/ui/button.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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.