Update icon (#135)

* Refactor code structure for improved readability and maintainability

* Add import statement for KangarooIcon in model-temperature documentation

Author: hannesrudolph

.vscode/settings.json

@@ -2,5 +2,8 @@
     "markdown.editor.filePaste.copyIntoWorkspace": "mediaFiles",
     "markdown.copyFiles.destination": {
       "**/*": "/static/img/${documentBaseName}/${documentBaseName}.${fileName/(.*)\\.(.*)/$2/}"
+    },
+    "files.associations": {
+      "*.mdx": "markdown"
     }
   }

docs/basic-usage/the-chat-interface.md

@@ -1,6 +1,8 @@
+import KangarooIcon from '@site/src/components/KangarooIcon';
+
 # The Chat Interface
 
-The Roo Code chat interface is your primary way of interacting with it. It's located in the Roo Code panel, which you can open by clicking the Roo Code icon (<Codicon name="rocket" />) in the VS Code Activity Bar.
+The Roo Code chat interface is your primary way of interacting with it. It's located in the Roo Code panel, which you can open by clicking the Roo Code icon (<KangarooIcon />) in the VS Code Activity Bar.
 
 ## Components of the Chat Interface
 

docs/faq.md

@@ -1,3 +1,5 @@
+import KangarooIcon from '@site/src/components/KangarooIcon';
+
 # Frequently Asked Questions
 
 This page answers some common questions about Roo Code.
@@ -77,7 +79,7 @@ Yes, Roo Code supports running models locally using [Ollama](/providers/ollama)
 ## Usage
 
 ### How do I start a new task?
-Open the Roo Code panel (<Codicon name="rocket" />) and type your task in the chat box. Be clear and specific about what you want Roo Code to do. See [Typing Your Requests](/basic-usage/typing-your-requests) for best practices.
+Open the Roo Code panel (<KangarooIcon />) and type your task in the chat box. Be clear and specific about what you want Roo Code to do. See [Typing Your Requests](/basic-usage/typing-your-requests) for best practices.
 
 ### What are modes in Roo Code?
 [Modes](/basic-usage/using-modes) are different personas that Roo Code can adopt, each with a specific focus and set of capabilities. The built-in modes are:

docs/features/model-temperature.md

@@ -1,3 +1,5 @@
+import KangarooIcon from '@site/src/components/KangarooIcon';
+
 # Model Temperature
 
 Temperature controls the randomness of AI model outputs. Adjusting this setting optimizes results for different tasks - from precise code generation to creative brainstorming. Temperature is one of the most powerful parameters for controlling AI behavior. A well-tuned temperature setting can dramatically improve the quality and appropriateness of responses for specific tasks.
@@ -40,7 +42,7 @@ These are starting points – it's important to [experiment with different setti
 
 ## How to Adjust Temperature
 
-1.  **Open the Roo Code Panel:** Click the Roo Code icon (<Codicon name="rocket" />) in the VS Code Activity Bar
+1.  **Open the Roo Code Panel:** Click the Roo Code icon (<KangarooIcon />) in the VS Code Activity Bar
 2.  **Open Settings:** Click the <Codicon name="gear" /> icon in the top right corner
 3.  **Find Temperature Control:** Navigate to the Providers section
 4.  **Enable Custom Temperature:** Check the "Use custom temperature" box

docs/getting-started/connecting-api-provider.md

@@ -1,6 +1,7 @@
 ---
 sidebar_label: Connecting To A Provider
 ---
+import KangarooIcon from '@site/src/components/KangarooIcon';
 
 # Connecting Your First AI Provider
 
@@ -67,7 +68,7 @@ For direct access to specific models from their original providers, with full ac
 
 Once you have your API key:
 
-1. Open the Roo Code sidebar by clicking the Roo Code icon (<Codicon name="rocket" />) in the VS Code Activity Bar
+1. Open the Roo Code sidebar by clicking the Roo Code icon (<KangarooIcon />) in the VS Code Activity Bar
 2. In the welcome screen, select your API provider from the dropdown
 3. Paste your API key into the appropriate field
 4. Select your model:

docs/getting-started/installing.mdx

@@ -1,6 +1,7 @@
 ---
 sidebar_label: Installing Roo Code
 ---
+import KangarooIcon from '@site/src/components/KangarooIcon';
 
 # Installing Roo Code
 
@@ -32,9 +33,9 @@ Roo Code is a VS Code extension that brings AI-powered coding assistance directl
 4. Select "Roo Code" by RooVeterinaryInc and click **Install**
 5. Reload VS Code if prompted
 
-After installation, find the Roo Code icon (<Codicon name="rocket" />) in the Activity Bar to open the Roo Code panel.
+After installation, find the Roo Code icon (<KangarooIcon />) in the Activity Bar to open the Roo Code panel.
 
-<img src="/img/installing/installing.png" alt="VS Code marketplace with Roo Code extension ready to install" width="400" />
+<img src="/img/installing/installing-3.png" alt="VS Code marketplace with Roo Code extension ready to install" width="400" />
 *VS Code marketplace with Roo Code extension ready to install*
 
 ## Open VSX Registry
@@ -47,7 +48,7 @@ For VS Code-compatible editors without Marketplace access (like VSCodium and Win
 4. Select "Roo Code" by RooVeterinaryInc and click **Install**
 5. Reload if prompted
 
-<img src="/img/installing/installing-1.png" alt="Open VSX Registry with Roo Code extension ready to install" width="400" />
+<img src="/img/installing/installing-3.png" alt="Open VSX Registry with Roo Code extension ready to install" width="400" />
 *Open VSX Registry with Roo Code extension ready to install*
 ## Manual Installation from VSIX
 

docs/getting-started/your-first-task.md

@@ -1,14 +1,15 @@
 ---
 sidebar_label: Your First Task
 ---
+import KangarooIcon from '@site/src/components/KangarooIcon';
 
 # Starting Your First Task with Roo Code
 
 Now that you've [configured your AI provider and model](/getting-started/connecting-api-provider), you're ready to start using Roo Code! This guide walks you through your first interaction.
 
 ## Step 1: Open the Roo Code Panel
 
-Click the Roo Code icon (<Codicon name="rocket" />) in the VS Code Activity Bar (vertical bar on the side of the window) to open the chat interface. If you don't see the icon, verify the extension is installed and enabled.
+Click the Roo Code icon (<KangarooIcon />) in the VS Code Activity Bar (vertical bar on the side of the window) to open the chat interface. If you don't see the icon, verify the extension is installed and enabled.
 
 <img src="/img/your-first-task/your-first-task.png" alt="Roo Code icon in VS Code Activity Bar" width="800" />
 

docs/providers/ollama.md

@@ -1,6 +1,7 @@
 ---
 sidebar_label: Ollama
 ---
+import KangarooIcon from '@site/src/components/KangarooIcon';
 
 # Using Ollama With Roo Code
 
@@ -59,7 +60,7 @@ Roo Code supports running models locally using Ollama. This provides privacy, of
     ```
 
 4.  **Configure Roo Code:**
-    *   Open the Roo Code sidebar (<Codicon name="rocket" /> icon).
+    *   Open the Roo Code sidebar (<KangarooIcon /> icon).
     *   Click the settings gear icon (<Codicon name="gear" />).
     *   Select "ollama" as the API Provider.
     *   Enter the Model name from the previous step (e.g., `your_model_name`).

src/components/KangarooIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export default function KangarooIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      viewBox="0 0 96 96"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      width="20"
+      height="20"
+      style={{ display: 'inline', verticalAlign: 'text-bottom', marginRight: '4px' }}
+      {...props}
+    >
+      <path d="M78.99,21.9l-1.73,6.24c-.09.33-.44.52-.77.42l-28.11-8.71c-.19-.06-.41-.02-.56.11l-28.95,23.22c-.08.07-.18.11-.29.13l-17.25,2.66c-.31.05-.53.32-.52.63l.11,2.47c.01.31.26.56.57.58l20.08,1.23c.11,0,.22-.02.31-.06l14.64-7.4c.21-.11.46-.08.64.06l9.37,7.03c.16.12.25.3.24.49l-.09,11.65c0,.13.04.25.11.35l14.74,21.15c.11.16.3.26.5.26h5.03c.46,0,.76-.5.54-.9l-10.87-19.92c-.1-.18-.1-.4,0-.58l5.51-10.48c.06-.11.15-.2.26-.26l19.56-9.92c.2-.1.43-.09.62.04l5.6,3.73c.1.07.22.1.34.1h5.15c.48,0,.77-.52.52-.93l-14.2-23.52c-.28-.46-.97-.36-1.11.15Z" />
+    </svg>
+  );
+}