SVG Sprite System

What is an SVG sprite?

An SVG sprite a collection of SVG symbols that you can reuse throughout your app. It's like having a sheet of stickers where you define each sticker once and then use it anywhere. there are different ways to do this but in this guide we will use the inline Sprite method, Given an svg below

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 56 56"><path fill="
#FFFFFF" d="M15.555 53.125h24.89c4.852 0 7.266-2.461 7.266-7.336V24.508H30.742c-3 0-4.406-1.43-4.406-4.43V2.875H15.555c-4.828 0-7.266 2.484-7.266 7.36v35.554c0 4.898 2.438 7.336 7.266 7.336m15.258-31.828h16.64c-.164-.961-.844-1.899-1.945-3.047L32.57 5.102c-1.078-1.125-2.062-1.805-3.047-1.97v16.9c0 .843.446 1.265 1.29 1.265M28 47.172c-.445 0-.82-.164-1.312-.586l-6.493-6c-.375-.328-.586-.727-.586-1.266c0-.914.703-1.593 1.664-1.593c.446 0 .915.187 1.266.515l1.969 2.016l1.875 1.898l-.164-3.539V30.72c0-.938.82-1.735 1.781-1.735c.984 0 1.805.797 1.805 1.735v7.898l-.164 3.54l1.851-1.9l1.992-2.015a1.8 1.8 0 0 1 1.243-.515c.96 0 1.664.68 1.664 1.593c0 .54-.188.914-.586 1.266l-6.492 6c-.47.422-.868.586-1.313.586"/></svg>

// Step 1: Create the Symbol Library with your download icon
const IconLibrary = () => {
  return (
    <svg style={{ display: 'none' }} xmlns="http://www.w3.org/2000/svg">
      <defs>
        {/* Your download icon converted to a symbol */}
        <symbol id="download" viewBox="0 0 56 56">
          <path fill="currentColor" d="M15.555 53.125h24.89c4.852 0 7.266-2.461 7.266-7.336V24.508H30.742c-3 0-4.406-1.43-4.406-4.43V2.875H15.555c-4.828 0-7.266 2.484-7.266 7.36v35.554c0 4.898 2.438 7.336 7.266 7.336m15.258-31.828h16.64c-.164-.961-.844-1.899-1.945-3.047L32.57 5.102c-1.078-1.125-2.062-1.805-3.047-1.97v16.9c0 .843.446 1.265 1.29 1.265M28 47.172c-.445 0-.82-.164-1.312-.586l-6.493-6c-.375-.328-.586-.727-.586-1.266c0-.914.703-1.593 1.664-1.593c.446 0 .915.187 1.266.515l1.969 2.016l1.875 1.898l-.164-3.539V30.72c0-.938.82-1.735 1.781-1.735c.984 0 1.805.797 1.805 1.735v7.898l-.164 3.54l1.851-1.9l1.992-2.015a1.8 1.8 0 0 1 1.243-.515c.96 0 1.664.68 1.664 1.593c0 .54-.188.914-.586 1.266l-6.492 6c-.47.422-.868.586-1.313.586"/>
        </symbol>
        
        {/* Let's add a few more icons for demonstration */}
        <symbol id="upload" viewBox="0 0 24 24">
          <path fill="currentColor" d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
          <path fill="currentColor" d="M12,11L16,15H13V19H11V15H8L12,11Z"/>
        </symbol>
        
        <symbol id="file" viewBox="0 0 24 24">
          <path fill="currentColor" d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
        </symbol>
      </defs>
    </svg>
  );
};

// Step 2: Create the Icon Component
const Icon = ({ name, size = 24, color = "currentColor", className = "", ...props }) => {
  return (
    <svg
      width={size}
      height={size}
      fill={color}
      className={className}
      {...props}
    >
      <use href={#${name}} />
    </svg>
  );
};

// Step 3: Demo App using the symbols
const App = () => {
  return (
    <div className="min-h-screen bg-gray-100 p-8">
      {/* Include the icon library once */}
      <IconLibrary />
      
      <div className="max-w-4xl mx-auto">
        <h1 className="text-3xl font-bold text-center mb-8 text-gray-800">
          SVG Symbol Example
        </h1>
        
    
        {/* Practical usage in buttons */}
        <div className="bg-white rounded-lg shadow-md p-6 mb-8">
          <h2 className="text-xl font-semibold mb-4 text-gray-700">Practical Usage</h2>
          <div className="flex gap-4 flex-wrap">
            <button className="flex items-center gap-2 bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors">
              <Icon name="download" size={16} />
              Download File
            </button>
            
            <button className="flex items-center gap-2 bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition-colors">
              <Icon name="upload" size={16} />
              Upload File
            </button>
            
            <button className="flex items-center gap-2 bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition-colors">
              <Icon name="file" size={16} />
              View File
            </button>
          </div>
        </div>
        
        {/* Using currentColor to inherit text color */}
        <div className="bg-white rounded-lg shadow-md p-6 mb-8">
          <h2 className="text-xl font-semibold mb-4 text-gray-700">Inheriting Text Color</h2>
          <div className="space-y-2">
            <p className="text-red-600 flex items-center gap-2">
              <Icon name="download" size={20} />
              This icon inherits the red text color
            </p>
            <p className="text-blue-600 flex items-center gap-2">
              <Icon name="download" size={20} />
              This icon inherits the blue text color
            </p>
            <p className="text-green-600 flex items-center gap-2">
              <Icon name="download" size={20} />
              This icon inherits the green text color
            </p>
          </div>
        </div>
        
        {/* Interactive example */}
        <div className="bg-white rounded-lg shadow-md p-6">
          <h2 className="text-xl font-semibold mb-4 text-gray-700">Interactive Example</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="p-4 border rounded-lg hover:bg-gray-50 cursor-pointer transition-colors">
              <Icon name="download" size={48} color="#3B82F6" className="mx-auto mb-2" />
              <p className="text-center text-gray-600">Download Document</p>
            </div>
            <div className="p-4 border rounded-lg hover:bg-gray-50 cursor-pointer transition-colors">
              <Icon name="upload" size={48} color="#10B981" className="mx-auto mb-2" />
              <p className="text-center text-gray-600">Upload File</p>
            </div>
            <div className="p-4 border rounded-lg hover:bg-gray-50 cursor-pointer transition-colors">
              <Icon name="file" size={48} color="#F59E0B" className="mx-auto mb-2" />
              <p className="text-center text-gray-600">View File</p>
            </div>
          </div>
        </div>
       
      </div>
    </div>
  );
};

export default App;