From d17564a9f26759a6ab93021c15ba1ed4b112939c Mon Sep 17 00:00:00 2001
From: Luong NGUYEN <luongnv89@gmail.com>
Date: Sat, 8 Nov 2025 00:41:46 +0100
Subject: [PATCH] Add custom SVG logo to Claude How To project
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Created a professional SVG logo for the project featuring:
- Modern gradient design with code brackets symbol
- Book/guide icon representing learning and documentation
- "Claude How To" branding with subtitle
- Decorative elements and professional color scheme

Added logo to all major documentation files:
- README.md
- INDEX.md
- QUICK_REFERENCE.md
- claude_concepts_guide.md

The logo provides consistent branding across the project and improves visual appeal on GitHub and other markdown viewers.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 INDEX.md                 |  2 ++
 QUICK_REFERENCE.md       |  2 ++
 README.md                |  2 +-
 claude-howto-logo.svg    | 72 ++++++++++++++++++++++++++++++++++++++++
 claude_concepts_guide.md |  2 ++
 5 files changed, 79 insertions(+), 1 deletion(-)
 create mode 100644 claude-howto-logo.svg

diff --git a/INDEX.md b/INDEX.md
index 3459e4e..2dc2d91 100644
--- a/INDEX.md
+++ b/INDEX.md
@@ -1,3 +1,5 @@
+![Claude How To](claude-howto-logo.svg)
+
 # Claude Code Examples - Complete Index
 
 This document provides a complete index of all example files organized by feature type.
diff --git a/QUICK_REFERENCE.md b/QUICK_REFERENCE.md
index 04f5eb4..c74ad7d 100644
--- a/QUICK_REFERENCE.md
+++ b/QUICK_REFERENCE.md
@@ -1,3 +1,5 @@
+![Claude How To](claude-howto-logo.svg)
+
 # Claude Code Examples - Quick Reference Card
 
 ## 🚀 Installation Quick Commands
diff --git a/README.md b/README.md
index 07c84e2..c82dd63 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-<img src="claude-ai-icon.webp" alt="Claude Logo" width="13%"/>
+![Claude How To](claude-howto-logo.svg)
 
 # Claude How To
 
diff --git a/claude-howto-logo.svg b/claude-howto-logo.svg
new file mode 100644
index 0000000..9070f6b
--- /dev/null
+++ b/claude-howto-logo.svg
@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="800" height="200" viewBox="0 0 800 200" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background gradient -->
+  <defs>
+    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#1a1a2e;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#16213e;stop-opacity:1" />
+    </linearGradient>
+
+    <linearGradient id="iconGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#ff6b6b;stop-opacity:1" />
+      <stop offset="50%" style="stop-color:#ee5a6f;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#c44569;stop-opacity:1" />
+    </linearGradient>
+
+    <linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#4ecdc4;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#44a08d;stop-opacity:1" />
+    </linearGradient>
+
+    <filter id="glow">
+      <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
+      <feMerge>
+        <feMergeNode in="coloredBlur"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+
+  <!-- Background -->
+  <rect width="800" height="200" rx="20" fill="url(#bgGradient)"/>
+
+  <!-- Icon - Stylized book/guide with code symbol -->
+  <g transform="translate(40, 50)">
+    <!-- Book -->
+    <rect x="0" y="0" width="100" height="100" rx="8" fill="url(#iconGradient)" opacity="0.9"/>
+    <rect x="5" y="5" width="90" height="90" rx="6" fill="#1a1a2e" opacity="0.3"/>
+
+    <!-- Pages effect -->
+    <line x1="15" y1="25" x2="85" y2="25" stroke="#fff" stroke-width="2" opacity="0.3"/>
+    <line x1="15" y1="45" x2="85" y2="45" stroke="#fff" stroke-width="2" opacity="0.3"/>
+    <line x1="15" y1="65" x2="85" y2="65" stroke="#fff" stroke-width="2" opacity="0.3"/>
+
+    <!-- Code brackets -->
+    <text x="25" y="60" font-family="monospace" font-size="40" font-weight="bold" fill="#4ecdc4" filter="url(#glow)">&lt;/&gt;</text>
+
+    <!-- Sparkle -->
+    <circle cx="90" cy="15" r="4" fill="#ffd93d" opacity="0.8"/>
+    <circle cx="95" cy="10" r="2" fill="#ffd93d" opacity="0.6"/>
+  </g>
+
+  <!-- Text -->
+  <g transform="translate(170, 100)">
+    <!-- Main title -->
+    <text x="0" y="0" font-family="Arial, sans-serif" font-size="56" font-weight="bold" fill="url(#textGradient)">
+      Claude How To
+    </text>
+
+    <!-- Subtitle -->
+    <text x="2" y="35" font-family="Arial, sans-serif" font-size="20" fill="#a8b2d1" opacity="0.8">
+      Complete Guide to Claude Code Features
+    </text>
+  </g>
+
+  <!-- Decorative elements -->
+  <circle cx="750" cy="50" r="30" fill="#ff6b6b" opacity="0.1"/>
+  <circle cx="730" cy="150" r="20" fill="#4ecdc4" opacity="0.1"/>
+  <circle cx="770" cy="120" r="15" fill="#ffd93d" opacity="0.1"/>
+
+  <!-- Bottom accent line -->
+  <rect x="40" y="175" width="720" height="3" rx="1.5" fill="url(#textGradient)" opacity="0.5"/>
+</svg>
diff --git a/claude_concepts_guide.md b/claude_concepts_guide.md
index 7babc0f..0a5583c 100644
--- a/claude_concepts_guide.md
+++ b/claude_concepts_guide.md
@@ -1,3 +1,5 @@
+![Claude How To](claude-howto-logo.svg)
+
 # Complete Guide to Claude Concepts
 
 A comprehensive reference guide covering Slash Commands, Subagents, Memory, MCP Protocol, and Agent Skills with tables, diagrams, and practical examples.