# How SVG Icons Are Extracted and Converted to React Components in ai-website-cloner-template

> Learn how the ai-website-cloner-template extracts SVG icons from websites, deduplicates them, and converts them into React components using SVGR for efficient use in your projects.

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

---

**The automation script queries all inline `<svg>` elements from the target website, deduplicates them by hashing their outerHTML, converts them to JSX using SVGR, and writes them as named exports to [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx).**

The `ai-website-cloner-template` repository provides a workflow for converting any website into a React application. During the cloning process, inline SVG icons are automatically extracted and transformed into reusable React components that integrate with shadcn/ui and Tailwind CSS.

## The SVG Extraction Pipeline

The extraction process follows a six-step pipeline defined in the clone-website workflow ([`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md)) and outlined in [`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md).

### Querying SVG Elements from the DOM

The automation script uses a browser-automation tool (such as Playwright) to execute `document.querySelectorAll('svg')` against the target page. This captures every inline `<svg>` element present in the HTML markup.

### Deduplication via Hashing

To prevent duplicate icons, the script hashes each SVG's `outerHTML` string. Identical symbols are collapsed, ensuring only one copy of each unique icon proceeds to the conversion stage.

### Generating PascalCase Component Names

The script derives human-readable names based on the SVG's visual purpose. The naming convention follows **PascalCase** with an `Icon` suffix. For example, a magnifying glass becomes `SearchIcon`, while a right-pointing arrow becomes `ArrowRightIcon`.

## Converting SVG to React Components with SVGR

The raw SVG strings are processed by **SVGR**, the industry-standard tool for transforming SVG into JSX. According to the source configuration, SVGR performs three critical transformations:

1. **Strips unnecessary attributes** from the original markup
2. **Preserves remaining attributes** on the `<svg>` tag using the spread operator `{...props}`
3. **Adds a TypeScript props interface** `props: React.SVGProps<SVGSVGElement>` to enable type-safe customization of size, color, and stroke properties

## The Generated Output Structure

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

```

## Consuming Icons in Your Application

UI components import icons directly from the generated module and spread Tailwind CSS classes through the props interface:

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

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

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

```

The `className="size-4"` pattern passes through `{...props}` to style the SVG element, while `stroke="currentColor"` ensures the icon inherits the parent's text color.

## Summary

- The automation queries inline `<svg>` elements using `document.querySelectorAll('svg')` during the browser automation phase.
- Duplicate icons are eliminated by hashing each SVG's `outerHTML` string before processing.
- SVGR converts raw SVG markup into TypeScript React components with `React.SVGProps<SVGSVGElement>` typing.
- Generated 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 using PascalCase with an `Icon` suffix.
- Components accept Tailwind CSS classes through the spread props pattern, enabling size and color customization via `className` and `currentColor`.

## Frequently Asked Questions

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

The workflow uses **SVGR** (SVG React) to transform raw SVG strings into JSX components. SVGR handles attribute optimization and injects the `props` spread pattern to allow runtime customization of SVG properties.

### How does the script prevent duplicate icons from being generated?

The script hashes each SVG element's `outerHTML` string during the deduplication phase. Identical hashes indicate duplicate symbols, so only one instance of each unique icon proceeds to the component generation stage.

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

Yes. Each generated component accepts `React.SVGProps<SVGSVGElement>` through a `props` parameter. The components use `stroke="currentColor"` and spread `{...props}` onto the root `<svg>` element, allowing you to pass Tailwind classes like `className="size-4 text-blue-500"` to control dimensions and color.

### Where are the generated icon components stored?

All extracted SVG icons are written to [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx) as named exports. This file is referenced in the project structure documentation ([`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md)) as the location for "Extracted SVG icons as React components."