svgl

https://svgl.app/docs
Admin
svgl is a curated library of 581+ SVG logos for popular software, frameworks, and services with...
Tokens:4,211
Snippets:34
Trust Score:8.6
Update:8 months ago
Show doc for...
Tokens:
Raw
### 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
<svg
  width="91"
  height="80"
  viewBox="0 0 91 80"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <g clip-path="url(#clip0_906_1839)">
    <path d="M56.9686 0H90.4318V80L56.9686 0Z" fill="#EB1000" />
    <path d="M33.4632 0H0V80L33.4632 0Z" fill="#EB1000" />
    <path
      d="M45.1821 29.4668L66.5199 80.0002H52.5657L46.1982 63.9461H30.6182L45.1821 29.4668Z"
      fill="#EB1000"
    />
  </g>
  <defs>
    <clipPath id="clip0_906_1839">
      <rect width="90.4318" height="80" fill="white" />
    </clipPath>
  </defs>
</svg>
```
```

--------------------------------

### 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
<!-- Returns: -->
<svg
  width="91"
  height="80"
  viewBox="0 0 91 80"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <g clip-path="url(#clip0_906_1839)">
    <path d="M56.9686 0H90.4318V80L56.9686 0Z" fill="#EB1000" />
    <path d="M33.4632 0H0V80L33.4632 0Z" fill="#EB1000" />
    <path
      d="M45.1821 29.4668L66.5199 80.0002H52.5657L46.1982 63.9461H30.6182L45.1821 29.4668Z"
      fill="#EB1000"
    />
  </g>
  <defs>
    <clipPath id="clip0_906_1839">
      <rect width="90.4318" height="80" fill="white" />
    </clipPath>
  </defs>
</svg>
```

--------------------------------

### 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/"
  }
]
```
Tokens:
Raw