06200f1752
* docs: revamp sidebar with icon grid components and language support - Merge Clients and Integrations sections into the developer sidebar (removed top-level SDKs navbar item) - Reorder sidebar: Architecture → API → Clients → Integrations → Hosting - Unify icon system using react-icons (LuXxx/SiXxx) via customProps.icon - Add uppercase section titles with increased spacing and reduced indentation - Rename Node.js → "JavaScript / TypeScript" with TypeScript icon - Add reusable IconGrid and SupportedGrids components (ClientsGrid, IntegrationsGrid, LLMProvidersGrid) - Use grids in FAQ, Models, Overview, and Quick Start pages - Convert developer/index.md, models.md, faq.md to MDX for JSX support * fix: use inline style for label color to prevent link color inheritance * fix: label visibility and rename JavaScript/TypeScript to TypeScript * feat: add HTTP client to grid and OpenAI Compatible to LLM providers grid |
||
|---|---|---|
| .. | ||
| crewai.png | ||
| crewai.svg | ||
| golang.png | ||
| litellm.png | ||
| mcp.png | ||
| nodejs.png | ||
| openclaw.png | ||
| package.svg | ||
| pydanticai.png | ||
| python.svg | ||
| README.md | ||
| skills.png | ||
| terminal.svg | ||
| typescript.png | ||
| vercel.png | ||
Sidebar Icons
This directory contains SVG icons for the sidebar navigation items.
Required Icons
Client Icons
python.svg- Python logo (download from https://www.python.org/community/logos/)nodejs.svg- Node.js logo (download from https://nodejs.org/en/about/branding)terminal.svg- Terminal/CLI iconpackage.svg- Package/box icon for Embedded SDK
Integration Icons
mcp.svg- MCP Server iconlitellm.svg- LiteLLM logo (download from https://github.com/BerriAI/litellm)openclaw.svg- OpenClaw logovercel.svg- Vercel triangle logo (download from https://vercel.com/design/brands)skills.svg- Skills/star icon
Specifications
- Format: SVG (preferred) or PNG
- Size: 16x16px or larger (will be scaled to 14x14px)
- Style: Monochrome or simple colors work best
- Color: Icons should work on both light and dark backgrounds
Alternative: Using Remote URLs
Instead of local files, you can use remote URLs directly in the CSS:
a.menu__link[href*="/sdks/python"]::before {
background-image: url('https://cdn.jsdelivr.net/npm/simple-icons@v10/icons/python.svg');
}
Popular icon CDNs:
- Simple Icons: https://simpleicons.org/
- cdnjs: https://cdnjs.com/
- jsDelivr: https://www.jsdelivr.com/
Creating Icons
If you need to create custom icons, use tools like:
- Figma (https://figma.com)
- Inkscape (https://inkscape.org)
- SVGOMG for optimization (https://jakearchibald.github.io/svgomg/)