How the AI Website Cloner Template Extracts Inline SVG Elements

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.

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 (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 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, as documented in 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 (line 185) states: "Find all inline <svg> elements on the page, deduplicate them, and save as named React components in 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 (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 (line 185) – Formalizes the AI skill instruction, specifying the deduplication logic and output location.

• README.md (line 117) – Documents the expected output structure, noting that 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:

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:

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 with semantic naming based on visual function.
• The extraction workflow is documented in .windsurf/workflows/clone-website.md and .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 in the generated Next.js project. This location is specified in the skill documentation at .github/skills/clone-website/SKILL.md (line 185) and confirmed in the project 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 (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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}