# How SVG Icons Are Converted to React Components in the AI Website Cloner Template

> Learn how the AI Website Cloner Template automatically converts SVG icons to React components using SVGR. Discover the efficient six-step pipeline for seamless integration.

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

---

**The JCodesMore/ai-website-cloner-template uses an automated six-step pipeline that extracts inline SVG elements from target websites, deduplicates them, and transforms them into type-safe React components using SVGR, ultimately writing them to [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx) for direct import.**

The conversion workflow is a core feature of the repository’s cloning automation, enabling any scraped website’s iconography to become reusable React code. According to the project documentation in [`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md), the [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx) file serves as the central registry for “Extracted SVG icons as React components”.

## The Six-Step SVG to React Conversion Pipeline

The automation script—powered by a browser-automation tool like Playwright—processes every `<svg>` element found on the target page through a deterministic pipeline.

### Step 1: Collect SVG Markup

The script queries the DOM for all vector graphics using `document.querySelectorAll('svg')`. This captures every inline SVG element present in the target website’s HTML, regardless of how they were originally implemented.

### Step 2: Deduplicate Icons

Each SVG’s `outerHTML` is hashed to identify identical symbols. The pipeline collapses duplicates so only one unique copy of each icon proceeds to generation, preventing component bloat in the final output.

### Step 3: Generate Component Names

The script derives human-readable, **PascalCase** names from the SVG’s visual purpose or context. For example, a magnifying glass becomes `SearchIcon`, while a right-pointing arrow becomes `ArrowRightIcon`. Every generated name follows the `Icon` suffix convention for consistency.

### Step 4: Transform with SVGR

The raw SVG string is fed to **SVGR**, the industry-standard tool for converting SVG markup into JSX. SVGR performs the following transformations:
- Strips unnecessary attributes
- Preserves essential properties like `viewBox` and `xmlns`
- Spreads remaining attributes onto the root `<svg>` tag via `...props`
- Adds a TypeScript parameter: `props: React.SVGProps<SVGSVGElement>`

This step ensures full type safety and allows runtime customization of size, color, and stroke width.

### Step 5: Write to [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx)

All generated components are concatenated into a single module at [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx). Each icon is exported as a named export:

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

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

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

```

### Step 6: Consume in UI Components

Other components import icons directly from the generated module. The spread props pattern allows Tailwind CSS utility classes to control styling:

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

export function SearchButton() {
  return (
    <button className="flex items-center gap-2">
      <SearchIcon className="size-4 text-blue-600" />
      Search
    </button>
  );
}

```

## Workflow Configuration and Source Files

The conversion logic is governed by two key documents in the repository:

- **[`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md)** – Defines the project structure and explicitly 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 step-by-step agent instructions: “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)”

These files ensure that the AI-driven cloning workflow consistently produces the same conversion output across different target websites.

## Summary

- **Browser automation** queries all `<svg>` elements from the target page using `document.querySelectorAll('svg')`.
- **Hash-based deduplication** eliminates redundant icons before conversion.
- **SVGR** transforms raw SVG markup into type-safe JSX with `React.SVGProps<SVGSVGElement>` typing.
- **PascalCase naming** with an `Icon` suffix generates consistent component names like `SearchIcon` and `ArrowRightIcon`.
- **Single-file output** at [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx) aggregates all icons as named exports for tree-shakable imports.
- **Tailwind compatibility** is achieved through the spread props pattern, allowing `className` customization.

## Frequently Asked Questions

### What tool converts the SVG markup into React components?

The pipeline uses **SVGR**, a specialized compiler that transforms SVG files into React components. SVGR handles attribute normalization, JSX conversion, and TypeScript type generation, outputting components that accept standard SVG props.

### Can I customize the size and color of the generated icons?

Yes. Every generated component accepts `props: React.SVGProps<SVGSVGElement>`, which means you can pass standard HTML attributes and Tailwind classes. For example, `<ArrowRightIcon className="size-6 text-red-500" />` overrides the default styling while preserving the vector paths.

### How does the script handle duplicate SVG icons found on the same page?

The script hashes each SVG’s `outerHTML` string to create a unique fingerprint. Identical hashes are collapsed, ensuring only one copy of each unique icon is converted to a React component, preventing file bloat.

### Where is the conversion logic documented in the repository?

The high-level specification appears in [`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md) under the project structure section, while the detailed workflow steps are defined in [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md). These documents instruct the automation agent to extract, deduplicate, and convert SVGs to the [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx) destination.