How SVG Icons Are Extracted and Transformed into React Components in icons.tsx

The ai-website-cloner-template repository automates the extraction of inline SVG elements from target websites, deduplicates them by hashing their markup, and transforms them into type-safe React components using SVGR, storing the generated output in src/components/icons.tsx for direct consumption across the UI.

The ai-website-cloner-template project provides a complete workflow for cloning website designs, including an automated pipeline that converts raw SVG markup into reusable React components. This process centers on src/components/icons.tsx, a generated module that exports named icon components derived from the original site's inline SVG assets. The transformation pipeline ensures visual fidelity while creating a maintainable, component-based icon system compatible with shadcn/ui and Tailwind CSS.

The SVG Extraction Pipeline

The cloning workflow treats any inline <svg> elements found on the target website as icon assets. During the inspection phase, a browser-automation tool such as Playwright executes a systematic extraction process.

Querying and Collecting SVG Markup

The automation script queries the DOM to locate all vector graphics. It executes document.querySelectorAll('svg') to capture every inline SVG element present on the page. The script then serializes each element using outerHTML to preserve the complete markup structure, including viewboxes, paths, and presentational attributes.

Deduplication Strategy

To prevent redundant components, the pipeline implements a hashing mechanism. Each SVG's outerHTML string is hashed to generate a unique fingerprint. Identical symbols are collapsed so only one copy of each unique icon remains. This deduplication step ensures that src/components/icons.tsx contains a lean set of distinct components rather than duplicate entries for repeated UI elements like arrows or social media logos.

Transforming SVG to React Components

Once unique SVG assets are isolated, the pipeline converts static markup into dynamic React components using industry-standard tooling.

SVGR Configuration and Conversion

The raw SVG string is fed to SVGR, the de-facto tool for transforming SVG into JSX. SVGR processes each icon by stripping unnecessary attributes and spreading the remaining props onto the <svg> tag. The transformation adds a typed parameter props: React.SVGProps<SVGSVGElement> to each component, enabling callers to customize size, color, stroke width, and other attributes through standard React props.

Component Naming Conventions

The script derives human-readable names from each SVG's visual purpose or context. The naming convention follows PascalCase with an Icon suffix. For example, a magnifying-glass becomes SearchIcon, while a right-pointing arrow becomes ArrowRightIcon. This predictable naming scheme allows developers to import icons intuitively without guessing cryptic identifiers.

The icons.tsx Output Structure

All generated components are concatenated into a single file at src/components/icons.tsx. Each component is exported as a named export, following this pattern:

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

According to the project documentation in AGENTS.md, this file is explicitly listed as containing "Extracted SVG icons as React components" and serves as the central registry for all vector assets cloned from the target website.

Consuming Generated Icons

Other UI components import the desired icon directly from the generated module. The spread operator ({...props}) allows Tailwind CSS utility classes to control sizing and coloring dynamically:

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

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

Similarly, the ArrowRightIcon can enhance call-to-action elements:

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

The clone-website workflow documented in .windsurf/workflows/clone-website.md explicitly instructs the automation agent to "find all inline <svg> elements on the page, deduplicate them, and save as named React components in src/components/icons.tsx".

Summary

• Extraction: The pipeline queries all <svg> elements using document.querySelectorAll('svg') and serializes them via outerHTML.
• Deduplication: Identical SVG markup is hashed and collapsed to prevent redundant components.
• Transformation: SVGR converts raw SVG strings into JSX components with typed React.SVGProps<SVGSVGElement> parameters.
• Naming: Components follow PascalCase with an Icon suffix (e.g., SearchIcon, ArrowRightIcon).
• Output: All components are written to src/components/icons.tsx as named exports for tree-shakeable imports.

Frequently Asked Questions

How does the deduplication process prevent duplicate icons in icons.tsx?

The automation script hashes each SVG element's outerHTML string to generate a unique fingerprint. When multiple identical SVGs appear on the source page (such as repeated social media icons), the hashing algorithm identifies them as duplicates and retains only one instance. This ensures the generated src/components/icons.tsx file contains a lean set of unique components rather than redundant copies.

What tool converts the SVG markup into React JSX?

The pipeline uses SVGR, a specialized transformation tool that takes raw SVG strings and outputs React components. SVGR handles attribute optimization, strips unnecessary metadata, and injects the {...props} spread operator to allow runtime customization of the generated components.

Can I customize the size and color of icons generated in icons.tsx?

Yes. Every component exported from src/components/icons.tsx accepts a props parameter typed as React.SVGProps<SVGSVGElement>. This allows you to pass standard SVG attributes and Tailwind CSS classes (such as className="size-4 text-blue-500") to control dimensions, stroke color, fill, and other presentational properties at the call site.

Where is the SVG extraction logic documented in the repository?

The workflow specification resides in .windsurf/workflows/clone-website.md, which details the step-by-step process for extracting inline SVGs. Additionally, AGENTS.md lists icons.tsx in the project structure section as "Extracted SVG icons as React components", confirming its role as the destination for transformed assets.

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