# How to Convert Extracted SVG Icons to React Components in the AI Website Cloner Template > Easily convert extracted SVG icons to React components using functional components and prop forwarding. Learn how to export and use them throughout your app from src/components/icons.tsx. - Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template) - Tags: how-to-guide - Published: 2026-07-09 --- **Convert extracted SVG icons to React components by wrapping them in functional components that accept `React.SVGProps` and forwarding those props to the `` element, then export them from [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx) for use throughout your application.** The AI Website Cloner Template stores all icon assets in [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx), where each SVG is exposed as a typed React component. Converting extracted SVGs into reusable components allows you to leverage the template's Tailwind CSS integration and Shadcn UI component system while maintaining type safety and tree-shaking benefits. ## Understanding the Icon Architecture The template follows a centralized icon pattern. According to the project structure, [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx) serves as the single source of truth for all iconography. This file contains named exports for each icon, implemented as functional components that wrap raw SVG markup. The icon components in this repository implement a specific interface: they accept `React.SVGProps` and forward these props directly to the underlying `` element. This architecture enables parent components to control **size**, **color**, **stroke width**, and **event handlers** without modifying the base icon definition. Key files in the icon system include: - [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx) – Central registry where all SVG icons live as React components - [`src/components/ui/button.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/ui/button.tsx) – Demonstrates how the button component automatically styles child SVGs using the `[&_svg]:size-4` Tailwind selector - [`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/utils.ts) – Provides the `cn()` utility for merging Tailwind class names when you need custom icon styling ## Converting Raw SVG to React Components When you extract an SVG from a target website during the cloning process, you must transform it into a component that matches the template's patterns. ### Define the Component Interface Each icon component should accept the standard SVG props interface: ```typescript // src/components/icons.tsx import * as React from 'react'; export const HomeIcon = (props: React.SVGProps) => ( ); ``` ### Forward Props to the SVG Element The spread operator `{...props}` ensures that **className**, **style**, **onClick**, and other standard SVG attributes pass through to the rendered element. This forwarding mechanism is critical for allowing Tailwind utility classes to modify the icon's appearance from parent components. When creating the component: 1. **Preserve the original viewBox** from the extracted SVG to maintain aspect ratio 2. **Set stroke to "currentColor"** (or fill, depending on the icon type) to enable color inheritance from parent text colors 3. **Spread props after default attributes** so that consumer-defined props can override defaults ## Integrating with the Template's Styling System The AI Website Cloner Template uses Tailwind CSS for styling, with specific conventions for icon sizing. ### Default Sizing Patterns The button component in [`src/components/ui/button.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/ui/button.tsx) applies automatic sizing to child SVGs through the `[&_svg]:size-4` Tailwind selector. When you place an icon inside a button, it inherits a default 1rem (16px) size without requiring explicit classes: ```tsx import { HomeIcon } from '@/components/icons'; import { Button } from '@/components/ui/button'; export default function Example() { return ( ); } ``` ### Using the cn() Utility for Custom Classes For custom icon styling, import the `cn()` utility from [`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/utils.ts). This function merges Tailwind classes and handles conditional logic: ```tsx import { cn } '@/lib/utils'; export const CustomIcon = (props: React.SVGProps) => { const { className, ...rest } = props; return ( ); }; ``` ## Usage Examples with Shadcn UI Icons in this template integrate seamlessly with Shadcn UI components through the props-forwarding pattern. ### Inside Form Buttons Place icons directly inside Button components to leverage automatic sizing: ```tsx import { SearchIcon, ArrowRightIcon } from '@/components/icons'; import { Button } from '@/components/ui/button'; function SearchForm() { return (
); } ``` ### Custom Sizes and Colors Override default sizing by passing explicit Tailwind classes: ```tsx // Large icon with custom color // Small icon with hover state ``` Because the component forwards all props, you can also attach event handlers directly: ```tsx router.push('/')} /> ``` ## Summary - **Centralize icons** in [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx) using named exports for each React component - **Forward props** using `React.SVGProps` and the spread operator `{...props}` to enable full styling control from parent components - **Use currentColor** for strokes and fills to allow text color inheritance through Tailwind classes - **Leverage automatic sizing** in Shadcn UI components that target `[&_svg]:size-4`, or override with explicit `size-*` classes - **Utilize the `cn()` utility** from [`src/lib/utils.ts`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/lib/utils.ts) when merging default and consumer-provided Tailwind classes ## Frequently Asked Questions ### Where should I place new SVG components in the repository? Add new icon components to [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx) alongside existing exports. This centralizes all iconography for the application, making imports predictable and enabling easy updates. If you have many related icons, you can group them in the same file using clear naming conventions like `LeftArrowIcon` and `RightArrowIcon`. ### How do I handle custom colors or sizes for specific icons? Pass Tailwind utility classes directly through the **className** prop. The props-forwarding pattern ensures these classes merge with any defaults. For colors, use `stroke-current` or `fill-current` in the component definition, then control the actual color via `text-red-500` or similar classes on the component instance. ### Why must I forward props to the SVG element? Forwarding props maintains the component's flexibility without requiring prop-drilling or context providers. It allows parent components to pass **aria-label** attributes for accessibility, **onClick** handlers for interactivity, and **style** overrides for animations while preserving the base SVG geometry defined in [`src/components/icons.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/components/icons.tsx). ### Can I use these icons outside of Shadcn UI buttons? Yes. The `React.SVGProps` interface ensures compatibility with any React component or HTML element. Use them in navigation menus, cards, or standalone decorative elements. Just remember to include explicit sizing classes like `size-4` or `size-6` when not using the button component's automatic sizing.