# How SVG Icons Are Extracted and Transformed into React Components in icons.tsx

> Learn how ai-website-cloner-template extracts SVG icons from websites and transforms them into type-safe React components in icons.tsx using SVGR for easy UI integration.

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

---

**The ai-website-cloner-template repository automates the extraction of inline SVG elements from target websites, deduplicates them by hashing their markup, and transforms them into type-safe React components using SVGR, storing the generated output in [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx) for direct consumption across the UI.**

The `ai-website-cloner-template` project provides a complete workflow for cloning website designs, including an automated pipeline that converts raw SVG markup into reusable React components. This process centers on [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx), a generated module that exports named icon components derived from the original site's inline SVG assets. The transformation pipeline ensures visual fidelity while creating a maintainable, component-based icon system compatible with shadcn/ui and Tailwind CSS.

## The SVG Extraction Pipeline

The cloning workflow treats any inline `<svg>` elements found on the target website as **icon assets**. During the inspection phase, a browser-automation tool such as Playwright executes a systematic extraction process.

### Querying and Collecting SVG Markup

The automation script queries the DOM to locate all vector graphics. It executes `document.querySelectorAll('svg')` to capture every inline SVG element present on the page. The script then serializes each element using `outerHTML` to preserve the complete markup structure, including viewboxes, paths, and presentational attributes.

### Deduplication Strategy

To prevent redundant components, the pipeline implements a hashing mechanism. Each SVG's `outerHTML` string is hashed to generate a unique fingerprint. Identical symbols are collapsed so only one copy of each unique icon remains. This deduplication step ensures that [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx) contains a lean set of distinct components rather than duplicate entries for repeated UI elements like arrows or social media logos.

## Transforming SVG to React Components

Once unique SVG assets are isolated, the pipeline converts static markup into dynamic React components using industry-standard tooling.

### SVGR Configuration and Conversion

The raw SVG string is fed to **SVGR**, the de-facto tool for transforming SVG into JSX. SVGR processes each icon by stripping unnecessary attributes and spreading the remaining props onto the `<svg>` tag. The transformation adds a typed parameter `props: React.SVGProps<SVGSVGElement>` to each component, enabling callers to customize size, color, stroke width, and other attributes through standard React props.

### Component Naming Conventions

The script derives human-readable names from each SVG's visual purpose or context. The naming convention follows **PascalCase** with an `Icon` suffix. For example, a magnifying-glass becomes `SearchIcon`, while a right-pointing arrow becomes `ArrowRightIcon`. This predictable naming scheme allows developers to import icons intuitively without guessing cryptic identifiers.

## The icons.tsx Output Structure

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). Each component is exported as a named export, following this pattern:

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

```

According to the project documentation in [`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md), this file is explicitly listed as containing "Extracted SVG icons as React components" and serves as the central registry for all vector assets cloned from the target website.

## Consuming Generated Icons

Other UI components import the desired icon directly from the generated module. The spread operator (`{...props}`) allows Tailwind CSS utility classes to control sizing and coloring dynamically:

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

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

```

Similarly, the `ArrowRightIcon` can enhance call-to-action elements:

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

```

The **clone-website** workflow documented in [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md) explicitly instructs the automation agent 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

- **Extraction**: The pipeline queries all `<svg>` elements using `document.querySelectorAll('svg')` and serializes them via `outerHTML`.
- **Deduplication**: Identical SVG markup is hashed and collapsed to prevent redundant components.
- **Transformation**: SVGR converts raw SVG strings into JSX components with typed `React.SVGProps<SVGSVGElement>` parameters.
- **Naming**: Components follow PascalCase with an `Icon` suffix (e.g., `SearchIcon`, `ArrowRightIcon`).
- **Output**: All components are written to [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx) as named exports for tree-shakeable imports.

## Frequently Asked Questions

### How does the deduplication process prevent duplicate icons in icons.tsx?

The automation script hashes each SVG element's `outerHTML` string to generate a unique fingerprint. When multiple identical SVGs appear on the source page (such as repeated social media icons), the hashing algorithm identifies them as duplicates and retains only one instance. This ensures the generated [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx) file contains a lean set of unique components rather than redundant copies.

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

The pipeline uses **SVGR**, a specialized transformation tool that takes raw SVG strings and outputs React components. SVGR handles attribute optimization, strips unnecessary metadata, and injects the `{...props}` spread operator to allow runtime customization of the generated components.

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

Yes. Every component exported from [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx) accepts a `props` parameter typed as `React.SVGProps<SVGSVGElement>`. This allows you to pass standard SVG attributes and Tailwind CSS classes (such as `className="size-4 text-blue-500"`) to control dimensions, stroke color, fill, and other presentational properties at the call site.

### Where is the SVG extraction logic documented in the repository?

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), which details the step-by-step process for extracting inline SVGs. Additionally, [`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md) lists [`icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/icons.tsx) in the project structure section as "Extracted SVG icons as React components", confirming its role as the destination for transformed assets.