# How the AI Website Cloner Template Extracts Inline SVG Elements

> Discover how the AI Website Cloner template extracts inline SVG elements, deduplicates markup, and transforms vectors into typed React components for your projects.

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

---

**The template extracts inline SVG elements by scanning the rendered target page with browser automation, deduplicating identical markup, and transforming each unique vector into a typed React component saved to [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx).**

The `JCodesMore/ai-website-cloner-template` provides a structured workflow for AI agents to clone websites into Next.js applications. When processing visual assets, the template implements a specific pipeline to extract inline SVG elements and convert them into reusable React components. This approach ensures vector graphics from the source site are preserved as maintainable, named icon components rather than static HTML strings.

## The Extraction Pipeline

The extraction process is defined in the **clone-website** skill and workflow documents. According to the source configuration in [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md) (line 182), the AI agent follows a five-step pipeline when instructed to "Extract the actual text, images, videos, and SVGs … extract inline `<svg>` elements as React components":

1. **Scan the rendered page** – The agent uses browser automation (Playwright or Puppeteer) to execute `document.querySelectorAll('svg')` against the fully rendered target page.

2. **Collect SVG markup** – For each matched element, the outer HTML is captured as a raw string.

3. **Normalize and deduplicate** – Identical markup (after whitespace normalization) is collapsed to ensure each visual icon appears only once in the output.

4. **Generate React components** – Each unique SVG is wrapped in a function component declaration. The [`.github/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.github/skills/clone-website/SKILL.md) file (line 185) specifies that components must be named by visual function, such as `SearchIcon`, `ArrowRightIcon`, or `LogoIcon`.

5. **Write to disk** – 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), as documented in [`README.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/README.md) (line 117).

### Deduplication Strategy

The template explicitly requires deduplication during the extraction phase. The skill definition at [`.github/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.github/skills/clone-website/SKILL.md) (line 185) states: "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)." This prevents icon repetition when the same SVG appears multiple times across different sections of the source website.

### Component Naming Convention

Rather than using random or hash-based identifiers, the template derives component names from the SVG's visual purpose. The skill documentation mandates naming patterns like `SearchIcon` for magnifying glass graphics, `ArrowRightIcon` for directional indicators, or `LogoIcon` for brand marks, ensuring the generated code remains semantically meaningful.

## Source Configuration Files

The extraction behavior is controlled through the following configuration documents:

- **[`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md)** (line 182) – Defines the extraction step in the cloning workflow, instructing the AI to process inline SVGs as React components.

- **[`.github/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.github/skills/clone-website/SKILL.md)** (line 185) – Formalizes the AI skill instruction, specifying the deduplication logic and output location.

- **[`README.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/README.md)** (line 117) – Documents the expected output structure, noting that [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx) contains "Extracted SVG icons as React components."

## Implementation Examples

When the cloning agent runs, it generates a file similar to this example:

```tsx
import * as React from 'react';

export function SearchIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 24 24" {...props}>
      {/* … SVG path data … */}
    </svg>
  );
}

export function ArrowRightIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg viewBox="0 0 24 24" {...props}>
      {/* … SVG path data … */}
    </svg>
  );
}

/* …additional icons… */

```

These generated components are then imported throughout the cloned application like standard UI primitives:

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

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

```

## Summary

- The template does not ship with a built-in runtime scraper; instead, it defines the extraction process in the **clone-website** instruction set for AI agents.
- Browser automation queries (`document.querySelectorAll('svg')`) identify all inline SVG elements on the rendered target page.
- Duplicate SVG markup is normalized and collapsed to ensure each visual icon appears only once.
- Each unique SVG becomes a typed React component in [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx) with semantic naming based on visual function.
- The extraction workflow is documented in [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md) and [`.github/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.github/skills/clone-website/SKILL.md).

## Frequently Asked Questions

### How does the template identify which SVG elements to extract?

The template instructs the AI cloning agent to use browser automation tools like Playwright or Puppeteer to execute `document.querySelectorAll('svg')` on the fully rendered target page. This captures all inline `<svg>` elements present in the DOM after JavaScript execution.

### Where are the extracted SVG components stored?

All extracted SVG components are written to [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx) in the generated Next.js project. This location is specified in the skill documentation at [`.github/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.github/skills/clone-website/SKILL.md) (line 185) and confirmed in the project [`README.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/README.md) (line 117).

### How does the template handle identical SVGs found multiple times?

The template implements a deduplication step that normalizes whitespace in the SVG markup and collapses identical instances. According to [`.github/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.github/skills/clone-website/SKILL.md) (line 185), the agent must "deduplicate them" before saving, ensuring each unique visual icon generates only one React component regardless of how many times it appeared on the source site.

### What naming convention does the template use for generated icons?

Components are named according to their visual function rather than their position in the DOM. The skill definition requires names like `SearchIcon`, `ArrowRightIcon`, or `LogoIcon` to describe the icon's purpose, making the generated code self-documenting and easy to maintain.