### Initialize MCP Server for VSCode Source: https://svgl.app/docs/shadcn-ui This command initializes the shadcn MCP server with the 'vscode' client. Following this, you should open .vscode/mcp.json and click 'Start' next to the shadcn server. ```bash pnpm dlx shadcn@latest mcp init --client vscode ``` -------------------------------- ### Get all SVGs Source: https://svgl.app/docs/api Retrieves a list of all SVGs available in the repository. ```APIDOC ## GET / ### Description Retrieves a list of all SVGs available in the repository. ### Method GET ### Endpoint / ### Parameters #### Query Parameters - **limit** (integer) - Optional - The maximum number of SVGs to return. ### Request Example ```json { "example": "GET https://api.svgl.app" } ``` ### Response #### Success Response (200) - **id** (integer) - The unique identifier of the SVG. - **title** (string) - The title of the SVG. - **category** (string or array of strings) - The category or categories the SVG belongs to. - **route** (string or object) - The route to the SVG file, or an object with light and dark theme routes. - **url** (string) - The URL associated with the SVG. - **wordmark** (string or object) - Optional. The route to the wordmark, or an object with light and dark theme routes. - **brandUrl** (string) - Optional. The brand URL associated with the SVG. #### Response Example ```json [ { "id": 0, "title": "Discord", "category": "Software", "route": "https://svgl.app/discord.svg", "url": "https://discord.com/" } ] ``` ``` -------------------------------- ### Get the list of categories Source: https://svgl.app/docs/api Retrieves a list of all available categories and the total count of SVGs in each. ```APIDOC ## GET /categories ### Description Retrieves a list of all available categories and the total count of SVGs within each category. ### Method GET ### Endpoint /categories ### Parameters None ### Request Example ```json { "example": "GET https://api.svgl.app/categories" } ``` ### Response #### Success Response (200) - **category** (string) - The name of the category. - **total** (integer) - The total number of SVGs in that category. #### Response Example ```json [ { "category": "Software", "total": 97 }, { "category": "Library", "total": 25 } ] ``` ``` -------------------------------- ### Get All SVGs Endpoint Source: https://svgl.app/docs/api Retrieves a list of all available SVGs from the repository. The response is a JSON array of SVG objects. ```http https://api.svgl.app ``` ```json // Returns: [ { "id": 0, "title": "Discord", "category": "Software", "route": "https://svgl.app/discord.svg", "url": "https://discord.com/" }, ... ] ``` -------------------------------- ### Get SVGs by category Source: https://svgl.app/docs/api Retrieves a list of SVGs filtered by a specific category. ```APIDOC ## GET /category/{categoryName} ### Description Retrieves a list of SVGs filtered by a specific category. ### Method GET ### Endpoint /category/{categoryName} ### Parameters #### Path Parameters - **categoryName** (string) - Required - The name of the category to filter by. ### Request Example ```json { "example": "GET https://api.svgl.app/category/software" } ``` ### Response #### Success Response (200) - **id** (integer) - The unique identifier of the SVG. - **title** (string) - The title of the SVG. - **category** (string or array of strings) - The category or categories the SVG belongs to. - **route** (string or object) - The route to the SVG file, or an object with light and dark theme routes. - **url** (string) - The URL associated with the SVG. - **wordmark** (string or object) - Optional. The route to the wordmark, or an object with light and dark theme routes. - **brandUrl** (string) - Optional. The brand URL associated with the SVG. #### Response Example ```json [ { "id": 0, "title": "Discord", "category": "Software", "route": "https://svgl.app/discord.svg", "url": "https://discord.com/" } ] ``` ``` -------------------------------- ### Get All SVGs with Limit Endpoint Source: https://svgl.app/docs/api Fetches a specified number of SVGs from the repository. A 'limit' query parameter controls the number of results returned in the JSON array. ```http https://api.svgl.app?limit=10 ``` ```json // Returns: [ { "id": 0, "title": "Discord", "category": "Software", "route": "https://svgl.app/discord.svg", "url": "https://discord.com/" }, ... ] ``` -------------------------------- ### Get List of Categories Endpoint Source: https://svgl.app/docs/api Retrieves a list of all available categories for SVGs. The response is a JSON array, where each object contains the category name and the total count of SVGs within that category. ```http https://api.svgl.app/categories ``` ```json // Returns: [ { "category": "Software", "total": 97 }, { "category": "Library", "total": 25 } //... ] ``` -------------------------------- ### Get the SVG code Source: https://svgl.app/docs/api Retrieves the SVG code for a specific SVG, with an option to disable optimization. ```APIDOC ## GET /svg/{svgName} ### Description Retrieves the SVG code for a specific SVG. By default, the SVG is optimized using svgo. Append `?no-optimize` to get the unoptimized version. ### Method GET ### Endpoint /svg/{svgName} ### Parameters #### Path Parameters - **svgName** (string) - Required - The name of the SVG file (e.g., `adobe.svg`). #### Query Parameters - **no-optimize** (boolean) - Optional - If present, the SVG will not be optimized. ### Request Example ```json { "example": "GET https://api.svgl.app/svg/adobe.svg?no-optimize" } ``` ### Response #### Success Response (200) - Returns the SVG code as an XML string. #### Response Example ```xml ``` ``` -------------------------------- ### Get SVG Code Endpoint Source: https://svgl.app/docs/api Fetches the SVG code for a specific SVG file. By default, the SVG is optimized using svgo. An optional 'no-optimize' query parameter can be added to retrieve the unoptimized version. ```http https://api.svgl.app/svg/adobe.svg ``` ```http https://api.svgl.app/svg/adobe.svg?no-optimize ``` ```xml ``` -------------------------------- ### Get SVGs by Category Endpoint Source: https://svgl.app/docs/api Retrieves a list of SVGs belonging to a specific category. The category name is appended to the base URL, and the response is a JSON array of matching SVG objects. ```http https://api.svgl.app/category/software ``` ```json // Returns: [ { "id": 0, "title": "Discord", "category": "Software", "route": "https://svgl.app/discord.svg", "url": "https://discord.com/" }, ... ] ``` -------------------------------- ### Initialize MCP Server for Cursor Source: https://svgl.app/docs/shadcn-ui This command initializes the shadcn MCP server with the 'cursor' client. After execution, you need to enable the MCP server within Cursor's settings. ```bash pnpm dlx shadcn@latest mcp init --client cursor ``` -------------------------------- ### Initialize MCP Server for Claude Code Source: https://svgl.app/docs/shadcn-ui This command initializes the shadcn MCP server with the 'claude' client. After running this, you need to restart Claude Code and can then use the /mcp command for debugging. ```bash pnpm dlx shadcn@latest mcp init --client claude ``` -------------------------------- ### Add Multiple SVGs using shadcn/ui CLI Source: https://svgl.app/docs/shadcn-ui Shows how to add multiple SVGs from the SVGL registry simultaneously using the shadcn/ui CLI with pnpm. This is useful for adding several icons at once. ```bash pnpm dlx shadcn@latest add @svgl/sanity @svgl/github @svgl/supabase @svgl/vercel ``` -------------------------------- ### Add Single SVG using shadcn/ui CLI Source: https://svgl.app/docs/shadcn-ui Demonstrates how to add a single SVG from the SVGL registry to your project using the shadcn/ui CLI. This command can be executed with npm, yarn, bun, or pnpm. ```bash npx shadcn@latest add @svgl/sanity ``` ```bash pnpm dlx shadcn@latest add @svgl/sanity ``` ```bash yarn dlx shadcn@latest add @svgl/sanity ``` ```bash bunx shadcn@latest add @svgl/sanity ``` -------------------------------- ### Add SVGL Registry to shadcn/ui Source: https://svgl.app/docs/shadcn-ui This JSON snippet shows how to add the SVGL registry to your shadcn/ui components.json file. This is a prerequisite for using the shadcn/ui CLI to add SVGs from the SVGL registry. ```json { "registries": { "@svgl": "https://svgl.app/r/{name}.json" } } ``` -------------------------------- ### Search SVG by title Source: https://svgl.app/docs/api Searches for SVGs by their title. ```APIDOC ## GET / ### Description Searches for SVGs by their title. This endpoint uses the same base URL as getting all SVGs, but with a `search` query parameter. ### Method GET ### Endpoint / ### Parameters #### Query Parameters - **search** (string) - Required - The title or part of the title to search for. - **limit** (integer) - Optional - The maximum number of SVGs to return. ### Request Example ```json { "example": "GET https://api.svgl.app?search=axiom" } ``` ### Response #### Success Response (200) - **id** (integer) - The unique identifier of the SVG. - **title** (string) - The title of the SVG. - **category** (string or array of strings) - The category or categories the SVG belongs to. - **route** (string or object) - The route to the SVG file, or an object with light and dark theme routes. - **url** (string) - The URL associated with the SVG. - **wordmark** (string or object) - Optional. The route to the wordmark, or an object with light and dark theme routes. - **brandUrl** (string) - Optional. The brand URL associated with the SVG. #### Response Example ```json [ { "id": 267, "title": "Axiom", "category": "Software", "route": { "light": "https://svgl.app/axiom-light.svg", "dark": "https://svgl.app/axiom-dark.svg" }, "url": "https://axiom.co/" } ] ``` ``` -------------------------------- ### TypeScript Types for SVG Responses Source: https://svgl.app/docs/api Defines the structure for SVG data returned by the API, including properties like id, title, category, route, and URL. It also includes types for theme options and an interface for the SVG object itself. ```typescript export type ThemeOptions = { dark: string; light: string; }; export interface SVG { id: number; title: string; category: string | string[]; route: string | ThemeOptions; url: string; wordmark?: string | ThemeOptions; brandUrl?: string; } ``` -------------------------------- ### Search SVG by Title Endpoint Source: https://svgl.app/docs/api Searches for SVGs based on their title. The search term is provided as a 'search' query parameter, and the response is a JSON array of matching SVG objects. ```http https://api.svgl.app?search=axiom ``` ```json // Returns: [ { "id": 267, "title": "Axiom", "category": "Software", "route": { "light": "https://svgl.app/axiom-light.svg", "dark": "https://svgl.app/axiom-dark.svg" }, "url": "https://axiom.co/" } ] ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.