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

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 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, the 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

All generated components are concatenated into a single module at src/components/icons.tsx. Each icon is exported as a named export:

/* 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:

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 – Defines the project structure and explicitly lists src/components/icons.tsx as the destination for “Extracted SVG icons as React components”
• .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”

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 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 under the project structure section, while the detailed workflow steps are defined in .windsurf/workflows/clone-website.md. These documents instruct the automation agent to extract, deduplicate, and convert SVGs to the src/components/icons.tsx destination.

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