# How SVG Icons Are Extracted and Converted to React Components in AI Website Cloner

> Discover how the AI website cloner extracts and converts SVG icons into type-safe React components automatically. See the process and output file.

- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: internals
- Published: 2026-07-10

---

**The AI Website Cloner template automatically extracts inline `<svg>` elements from target websites, deduplicates them using hash-based comparison, and transforms them into type-safe React components using SVGR, outputting all icons to a single [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx) file.**

The `JCodesMore/ai-website-cloner-template` repository provides an automated workflow that scrapes SVG icons from any website and converts them into reusable React components. This process eliminates manual copying and refactoring of SVG markup, instead generating a centralized [`icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/icons.tsx) module that integrates seamlessly with Tailwind CSS and shadcn/ui projects.

## The Six-Step SVG Extraction Workflow

### 1. Collect SVG Markup from the Target Page

During the inspection phase, the automation script queries the DOM using `document.querySelectorAll('svg')` to capture every inline SVG element present on the cloned website.

### 2. Deduplicate Identical Icons

Each SVG's `outerHTML` is hashed to identify duplicates. Only unique icons are retained, preventing redundant components in the final output.

### 3. Generate PascalCase Component Names

The script derives human-readable names based on the SVG's visual purpose (e.g., a magnifying glass becomes `SearchIcon`, a right arrow becomes `ArrowRightIcon`). All names follow the **PascalCase** convention with an `Icon` suffix.

### 4. Convert SVG to React Using SVGR

The raw SVG strings are processed through **SVGR**, the industry-standard tool for SVG-to-JSX transformation. SVGR strips unnecessary attributes, preserves essential ones like `viewBox`, and injects a `props` parameter typed as `React.SVGProps<SVGSVGElement>` to enable customization of size, color, and other attributes.

### 5. Write to src/components/icons.tsx

All generated components are concatenated into a single file at [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx). According to the project documentation in [`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md), this file is designated as the repository's "Extracted SVG icons as React components" location.

```tsx
export const SearchIcon = (props: React.SVGProps<SVGSVGElement>) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    {...props}
  >
    {/* path data */}
  </svg>
);

```

### 6. Consume Icons in UI Components

Downstream components import icons directly from the generated module:

```tsx
import { SearchIcon } from '@/components/icons';

<button className="flex items-center gap-2">
  <SearchIcon className="size-4" />
  Search
</button>

```

## Complete Implementation Example

Here's what the generated [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx) file looks like after processing:

```tsx
/* src/components/icons.tsx – auto-generated */
import React from 'react';

export const ArrowRightIcon = (
  props: React.SVGProps<SVGSVGElement>
) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    {...props}
  >
    <path d="M5 12h14M12 5l7 7-7 7" />
  </svg>
);

```

And usage in a call-to-action component:

```tsx
import { ArrowRightIcon } from '@/components/icons';

export function CallToAction() {
  return (
    <a
      href="/pricing"
      className="inline-flex items-center gap-1 font-medium"
    >
      Get started
      <ArrowRightIcon className="size-4" />
    </a>
  );
}

```

## Configuration and Source References

The extraction workflow is defined in the repository's documentation:

- **[`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md)**: Lists [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx) as the destination for "Extracted SVG icons as React components"
- **[`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md)**: Contains the explicit instruction to "find all inline `<svg>` elements on the page, deduplicate them, and save as named React components in [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx)"

## Summary

- **Automated Discovery**: The script uses `document.querySelectorAll('svg')` to capture all inline SVG elements from the target website.
- **Smart Deduplication**: Hashing `outerHTML` ensures only unique icons are processed, eliminating redundant components.
- **SVGR Transformation**: Raw SVG markup is converted to JSX with proper TypeScript typing via `React.SVGProps<SVGSVGElement>`.
- **Centralized Output**: All icons are exported as named exports from [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx), creating a single source of truth for icon assets.
- **Tailwind Integration**: Generated components accept `className` props, enabling direct use with Tailwind CSS utility classes like `size-4` and `text-current`.

## Frequently Asked Questions

### How does the deduplication algorithm work?

The automation script hashes each SVG element's `outerHTML` string to create a unique fingerprint. Icons with identical markup are collapsed into a single entry, ensuring that repeated icons across different pages of a website only generate one React component in the final [`icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/icons.tsx) file.

### What naming convention is used for the generated components?

Components follow **PascalCase** with an `Icon` suffix (e.g., `SearchIcon`, `ArrowRightIcon`). Names are derived from the SVG's visual purpose or contextual clues in the original HTML, making the API intuitive for developers importing from `@/components/icons`.

### Can I customize the SVG attributes after conversion?

Yes. Each generated component accepts a `props` parameter typed as `React.SVGProps<SVGSVGElement>`, which spreads onto the root `<svg>` element. This allows you to override attributes like `className`, `fill`, `stroke`, and `style` when consuming the icon in your JSX.

### Where is the extraction logic documented?

The workflow specification resides in [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md) within the repository, while the expected output structure is defined in [`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md). These files describe how the browser automation tool identifies, processes, and transforms SVG elements during the cloning process.