Integration Guides

// components/icons/HomeIcon.tsx
import React from 'react';

interface IconProps {
  size?: number;
  color?: string;
  className?: string;
}

export const HomeIcon: React.FC<IconProps> = ({ 
  size = 24, 
  color = "currentColor", 
  className = "" 
}) => (
  <svg 
    width={size} 
    height={size} 
    viewBox="0 0 24 24" 
    fill="none" 
    className={className}
    xmlns="http://www.w3.org/2000/svg"
  >
    <path 
      d="M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z" 
      stroke={color} 
      strokeWidth="2" 
      strokeLinecap="round" 
      strokeLinejoin="round"
    />
    <path 
      d="M9 22V12H15V22" 
      stroke={color} 
      strokeWidth="2" 
      strokeLinecap="round" 
      strokeLinejoin="round"
    />
  </svg>
);

// Usage
<HomeIcon size={32} color="#3B82F6" className="hover:scale-110" />

// components/Icon.tsx
import React from 'react';

const iconPaths = {
  home: "M3 9L12 2L21 9V20C21 20.5304 20.7893 21.0391 20.4142 21.4142C20.0391 21.7893 19.5304 22 19 22H5C4.46957 22 3.96086 21.7893 3.58579 21.4142C3.21071 21.0391 3 20.5304 3 20V9Z M9 22V12H15V22",
  search: "M11 11C11 16.5228 15.4772 21 21 21M21 21L16.65 16.65M21 21V13M21 21H13",
  user: "M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21 M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z"
};

interface IconProps {
  name: keyof typeof iconPaths;
  size?: number;
  color?: string;
  strokeWidth?: number;
  className?: string;
}

export const Icon: React.FC<IconProps> = ({
  name,
  size = 24,
  color = "currentColor",
  strokeWidth = 2,
  className = ""
}) => (
  <svg
    width={size}
    height={size}
    viewBox="0 0 24 24"
    fill="none"
    stroke={color}
    strokeWidth={strokeWidth}
    strokeLinecap="round"
    strokeLinejoin="round"
    className={className}
  >
    <path d={iconPaths[name]} />
  </svg>
);

// Usage
<Icon name="home" size={24} color="#10B981" />
<Icon name="search" className="text-blue-500 hover:text-blue-700" />
<Icon name="user" strokeWidth={1.5} />

// hooks/useIcon.ts
import { useState, useEffect } from 'react';

export const useIcon = (iconName: string) => {
  const [svgContent, setSvgContent] = useState<string>('');
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Simulate fetching from your SVG library
    const fetchIcon = async () => {
      try {
        // Replace with your actual SVG fetching logic
        const response = await fetch(`/api/icons/${iconName}`);
        const svg = await response.text();
        setSvgContent(svg);
      } catch (error) {
        console.error('Failed to load icon:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchIcon();
  }, [iconName]);

  return { svgContent, loading };
};

// Component using the hook
const DynamicIcon = ({ name }: { name: string }) => {
  const { svgContent, loading } = useIcon(name);

  if (loading) return <div className="w-6 h-6 bg-gray-200 animate-pulse rounded" />;

  return (
    <div 
      className="inline-block"
      dangerouslySetInnerHTML={{ __html: svgContent }} 
    />
  );
};