How SVG Icons Are Extracted and Converted to React Components in AI Website Cloner

The AI Website Cloner template automatically extracts inline <svg> elements from target websites, deduplicates them using hash-based comparison, and transforms them into type-safe React components using SVGR, outputting all icons to a single src/components/icons.tsx file.

The JCodesMore/ai-website-cloner-template repository provides an automated workflow that scrapes SVG icons from any website and converts them into reusable React components. This process eliminates manual copying and refactoring of SVG markup, instead generating a centralized icons.tsx module that integrates seamlessly with Tailwind CSS and shadcn/ui projects.

The Six-Step SVG Extraction Workflow

1. Collect SVG Markup from the Target Page

During the inspection phase, the automation script queries the DOM using document.querySelectorAll('svg') to capture every inline SVG element present on the cloned website.

2. Deduplicate Identical Icons

Each SVG's outerHTML is hashed to identify duplicates. Only unique icons are retained, preventing redundant components in the final output.

3. Generate PascalCase Component Names

The script derives human-readable names based on the SVG's visual purpose (e.g., a magnifying glass becomes SearchIcon, a right arrow becomes ArrowRightIcon). All names follow the PascalCase convention with an Icon suffix.

4. Convert SVG to React Using SVGR

The raw SVG strings are processed through SVGR, the industry-standard tool for SVG-to-JSX transformation. SVGR strips unnecessary attributes, preserves essential ones like viewBox, and injects a props parameter typed as React.SVGProps<SVGSVGElement> to enable customization of size, color, and other attributes.

5. Write to src/components/icons.tsx

All generated components are concatenated into a single file at src/components/icons.tsx. According to the project documentation in AGENTS.md, this file is designated as the repository's "Extracted SVG icons as React components" location.

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

6. Consume Icons in UI Components

Downstream components import icons directly from the generated module:

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

<button className="flex items-center gap-2">
  <SearchIcon className="size-4" />
  Search
</button>

Complete Implementation Example

Here's what the generated src/components/icons.tsx file looks like after processing:

/* src/components/icons.tsx – auto-generated */
import React from 'react';

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

And usage in a call-to-action component:

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

Configuration and Source References

The extraction workflow is defined in the repository's documentation:

• AGENTS.md: Lists src/components/icons.tsx as the destination for "Extracted SVG icons as React components"
• .windsurf/workflows/clone-website.md: Contains the explicit instruction to "find all inline <svg> elements on the page, deduplicate them, and save as named React components in src/components/icons.tsx"

Summary

• Automated Discovery: The script uses document.querySelectorAll('svg') to capture all inline SVG elements from the target website.
• Smart Deduplication: Hashing outerHTML ensures only unique icons are processed, eliminating redundant components.
• SVGR Transformation: Raw SVG markup is converted to JSX with proper TypeScript typing via React.SVGProps<SVGSVGElement>.
• Centralized Output: All icons are exported as named exports from src/components/icons.tsx, creating a single source of truth for icon assets.
• Tailwind Integration: Generated components accept className props, enabling direct use with Tailwind CSS utility classes like size-4 and text-current.

Frequently Asked Questions

How does the deduplication algorithm work?

The automation script hashes each SVG element's outerHTML string to create a unique fingerprint. Icons with identical markup are collapsed into a single entry, ensuring that repeated icons across different pages of a website only generate one React component in the final icons.tsx file.

What naming convention is used for the generated components?

Components follow PascalCase with an Icon suffix (e.g., SearchIcon, ArrowRightIcon). Names are derived from the SVG's visual purpose or contextual clues in the original HTML, making the API intuitive for developers importing from @/components/icons.

Can I customize the SVG attributes after conversion?

Yes. Each generated component accepts a props parameter typed as React.SVGProps<SVGSVGElement>, which spreads onto the root <svg> element. This allows you to override attributes like className, fill, stroke, and style when consuming the icon in your JSX.

Where is the extraction logic documented?

The workflow specification resides in .windsurf/workflows/clone-website.md within the repository, while the expected output structure is defined in AGENTS.md. These files describe how the browser automation tool identifies, processes, and transforms SVG elements during the cloning process.

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