### Install Project Dependencies

Source: https://github.com/pheralb/svgl/blob/main/README.md

Install project dependencies using pnpm. This includes installing pnpm globally if it's not already present, followed by installing the project's specific dependencies.

```bash
# Install pnpm globally if you don't have it:
npm install -g pnpm

# and install dependencies:
pnpm install
```

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

### Install API Dependencies

Source: https://github.com/pheralb/svgl/blob/main/README.md

Install project dependencies using pnpm. Navigate to the 'api-routes' directory before running this command.

```bash
cd api-routes
pnpm install
```

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

### Run Development Server

Source: https://github.com/pheralb/svgl/blob/main/README.md

Start the local development server for the API using pnpm.

```bash
pnpm dev
```

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

### Example Prompt for Multiple SVG Additions

Source: https://github.com/pheralb/svgl/blob/main/src/docs/shadcn-ui.md

An example prompt to request multiple SVGs ('React', 'Svelte', 'Vue') from the SVGL registry using the MCP server.

```plaintext
Please add React, Svelte and Vue SVGs from SVGL registry.
```

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

### Example Prompt for Single SVG Addition

Source: https://github.com/pheralb/svgl/blob/main/src/docs/shadcn-ui.md

An example prompt to request a specific SVG ('GitHub') from the SVGL registry using the MCP server.

```plaintext
Can you add the "GitHub" SVG from SVGL registry?
```

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

### Full Logo Example with All Properties

Source: https://github.com/pheralb/svgl/blob/main/README.md

An example of a comprehensive data structure in `src/data/svgs.ts` that includes light and dark modes for both the logo and its wordmark, along with title, category, and website URL.

```typescript
{
  title: 'Title',
  category: 'Category',
  route: {
    light: '/library/your_logo_light.svg',
    dark: '/library/your_logo_dark.svg'
  },
  wordmark: {
    light: '/library/your_logo_wordmark_light.svg',
    dark: '/library/your_logo_wordmark_dark.svg'
  },
  url: 'Website'
}
```

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

### Initialize MCP Server with VSCode Client

Source: https://github.com/pheralb/svgl/blob/main/src/docs/shadcn-ui.md

Prepare the shadcn MCP server for VSCode integration. This involves running the init command and then starting the server via `.vscode/mcp.json`.

```bash
pnpm dlx shadcn@latest mcp init --client vscode
```

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

### Add Multiple SVGs using shadcn/ui CLI

Source: https://github.com/pheralb/svgl/blob/main/src/docs/shadcn-ui.md

Install multiple SVG components from the SVGL registry simultaneously using pnpm.

```bash
pnpm dlx shadcn@latest add @svgl/sanity @svgl/github @svgl/supabase @svgl/vercel
```

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

### Add SVGL Registry to components.json

Source: https://github.com/pheralb/svgl/blob/main/src/docs/shadcn-ui.md

Configure your project to use the SVGL registry with shadcn/ui. This is a one-time setup.

```json
{
  "registries": {
    "@svgl": "https://svgl.app/r/{name}.json"
  }
}
```

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

### Get all SVGs

Source: https://github.com/pheralb/svgl/blob/main/src/docs/api.md

Retrieves a list of all available SVGs in the repository.

```APIDOC
## GET /

### Description
Retrieves a list of all available SVGs in the repository.

### Endpoint
`https://api.svgl.app`

### Response
#### Success Response (200)
- **Array of SVG objects**: Each object contains details like id, title, category, route, and url.

### Response Example
```json
[
  {
    "id": 0,
    "title": "Discord",
    "category": "Software",
    "route": "https://svgl.app/discord.svg",
    "url": "https://discord.com/"
  },
  ...
]
```
```

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

### Get SVGs by Category

Source: https://github.com/pheralb/svgl/blob/main/src/docs/api.md

Retrieves SVGs belonging to a specific category. Replace 'software' with the desired category name.

```bash
https://api.svgl.app/category/software
```

```json
// Returns:
[
  {
    "id": 0,
    "title": "Discord",
    "category": "Software",
    "route": "https://svgl.app/discord.svg",
    "url": "https://discord.com/"
  },
  ...
]
```

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

### Get the list of categories

Source: https://github.com/pheralb/svgl/blob/main/src/docs/api.md

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 in each.

### Endpoint
`https://api.svgl.app/categories`

### Response
#### Success Response (200)
- **Array of category objects**: Each object contains the category name and the total number of SVGs.

### Response Example
```json
[
  {
    "category": "Software",
    "total": 97
  },
  {
    "category": "Library",
    "total": 25
  }
  //...
]
```
```

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

### Get List of Categories

Source: https://github.com/pheralb/svgl/blob/main/src/docs/api.md

Retrieves a list of all available categories along with the total count of SVGs in each category.

```bash
https://api.svgl.app/categories
```

```json
// Returns:
[
  {
    "category": "Software",
    "total": 97
  },
  {
    "category": "Library",
    "total": 25
  }
  //...
]
```

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

### Add Single SVG using shadcn/ui CLI

Source: https://github.com/pheralb/svgl/blob/main/src/docs/shadcn-ui.md

Install a single SVG component from the SVGL registry using your preferred package manager.

```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
```

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

### Get All SVGs with Limit

Source: https://github.com/pheralb/svgl/blob/main/src/docs/api.md

Retrieves a limited number of SVGs. Append the 'limit' query parameter to the base URL to specify the maximum number of results.

```bash
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 SVGs by category

Source: https://github.com/pheralb/svgl/blob/main/src/docs/api.md

Retrieves a list of SVGs belonging to a specific category.

```APIDOC
## GET /category/{category}

### Description
Retrieves a list of SVGs belonging to a specific category.

### Endpoint
`https://api.svgl.app/category/{category}`

### Parameters
#### Path Parameters
- **category** (string) - Required - The name of the category to filter by.

### Response
#### Success Response (200)
- **Array of SVG objects**: Each object contains details like id, title, category, route, and url.

### Response Example
```json
[
  {
    "id": 0,
    "title": "Discord",
    "category": "Software",
    "route": "https://svgl.app/discord.svg",
    "url": "https://discord.com/"
  },
  ...
]
```
```

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

### Get all SVGs with limit

Source: https://github.com/pheralb/svgl/blob/main/src/docs/api.md

Retrieves a list of SVGs, limited to a specified number of results.

```APIDOC
## GET /

### Description
Retrieves a list of SVGs, limited to a specified number of results.

### Endpoint
`https://api.svgl.app?limit={limit}`

### Query Parameters
- **limit** (integer) - Optional - The maximum number of SVGs to return.

### Response
#### Success Response (200)
- **Array of SVG objects**: Each object contains details like id, title, category, route, and url.

### Response Example
```json
[
  {
    "id": 0,
    "title": "Discord",
    "category": "Software",
    "route": "https://svgl.app/discord.svg",
    "url": "https://discord.com/"
  },
  ...
]
```
```

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

### Get All SVGs

Source: https://github.com/pheralb/svgl/blob/main/src/docs/api.md

Retrieves a list of all available SVGs from the API. The response is a JSON array of SVG objects.

```bash
https://api.svgl.app
```

```json
// Returns:
[
  {
    "id": 0,
    "title": "Discord",
    "category": "Software",
    "route": "https://svgl.app/discord.svg",
    "url": "https://discord.com/"
  },
  ...
]
```

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

### Get SVG Code (Optimized and Unoptimized)

Source: https://github.com/pheralb/svgl/blob/main/src/docs/api.md

Fetches the SVG code for a specific SVG by its filename. The 'no-optimize' query parameter can be used to retrieve the unoptimized version.

```bash
https://api.svgl.app/svg/adobe.svg
```

```bash
https://api.svgl.app/svg/adobe.svg?no-optimize
```

```html
<!-- 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 the SVG code

Source: https://github.com/pheralb/svgl/blob/main/src/docs/api.md

Retrieves the SVG code for a specific SVG file, with an option to disable optimization.

```APIDOC
## GET /svg/{filename}

### Description
Retrieves the SVG code for a specific SVG file. By default, the SVG is optimized using svgo. An option is available to disable this optimization.

### Endpoint
`https://api.svgl.app/svg/{filename}`

### Parameters
#### Path Parameters
- **filename** (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.

### Response
#### Success Response (200)
- **SVG code**: The SVG content as an HTML string.

### Response Example
```html
<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>
```
```

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

### Configure Environment Variables

Source: https://github.com/pheralb/svgl/blob/main/README.md

Create a .dev.vars file in the 'api-routes' folder to set necessary environment variables for the API. Ensure Upstash Redis is configured if needed.

```bash
# .dev.vars
SVGL_API_REQUESTS = 1
UPSTASH_REDIS_URL = ""
UPSTASH_REDIS_TOKEN = ""
```

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

### Initialize MCP Server with Cursor Client

Source: https://github.com/pheralb/svgl/blob/main/src/docs/shadcn-ui.md

Configure the shadcn MCP server for use with Cursor. After initialization, enable the MCP server in Cursor's settings.

```bash
pnpm dlx shadcn@latest mcp init --client cursor
```

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

### Initialize MCP Server with Claude Code Client

Source: https://github.com/pheralb/svgl/blob/main/src/docs/shadcn-ui.md

Set up the shadcn MCP server to work with Claude Code. This allows debugging the MCP server using the `/mcp` command.

```bash
pnpm dlx shadcn@latest mcp init --client claude
```

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

### Clone Svgl Repository

Source: https://github.com/pheralb/svgl/blob/main/README.md

Clone the Svgl repository locally using Git. Ensure you replace 'your_username' with your actual GitHub username.

```bash
git clone git@github.com:your_username/svgl.git
```

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

### Base URLs for SVGL API

Source: https://github.com/pheralb/svgl/blob/main/src/docs/api.md

These are the base URLs for accessing SVGL API resources. Use the first for general SVG retrieval and the second for categories.

```bash
https://api.svgl.app
```

```bash
https://api.svgl.app/categories
```

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

### Wordmark with Light and Dark Mode Routes

Source: https://github.com/pheralb/svgl/blob/main/README.md

Define the data structure for a wordmark that supports both light and dark modes in `src/data/svgs.ts`. The `wordmark` property is an object specifying paths for light and dark versions.

```typescript
{
  title: 'Title',
  category: 'Category',
  wordmark: {
    light: '/library/your_logo_light.svg',
    dark: '/library/your_logo_dark.svg'
  },
  url: 'Website'
}
```

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

### Search SVG by Title

Source: https://github.com/pheralb/svgl/blob/main/src/docs/api.md

Searches for SVGs by their title. Use the 'search' query parameter with the desired title.

```bash
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/"
  }
]
```

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

### Logo with Wordmark Data Structure

Source: https://github.com/pheralb/svgl/blob/main/README.md

Define the data structure for a logo that includes both the main logo and a wordmark version in `src/data/svgs.ts`. Both the logo and wordmark have a specified route.

```typescript
{
  title: 'Title',
  category: 'Category',
  route: '/library/your_logo.svg',
  wordmark: '/library/your_logo_wordmark.svg',
  url: 'Website'
}
```

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

### Adding Brand Guidelines URL

Source: https://github.com/pheralb/svgl/blob/main/README.md

Include a `brandUrl` property in the data structure in `src/data/svgs.ts` to link to external brand guidelines for a logo. This provides additional information on usage, colors, and fonts.

```typescript
{
  title: 'Title',
  category: 'Category',
  route: '/library/your_logo.svg',
  wordmark: '/library/your_logo_wordmark.svg',
  brandUrl: 'https://assets.website.com/brand-guidelines',
  url: 'Website'
}
```

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

### Logo with Light and Dark Mode Routes

Source: https://github.com/pheralb/svgl/blob/main/README.md

Define the data structure for a logo that supports both light and dark modes in `src/data/svgs.ts`. The `route` property is an object specifying paths for light and dark versions.

```typescript
{
  title: 'Title',
  category: 'Category',
  route: {
    light: '/library/your_logo_light.svg',
    dark: '/library/your_logo_dark.svg'
  },
  url: 'Website'
}
```

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

### Simple Logo Data Structure

Source: https://github.com/pheralb/svgl/blob/main/README.md

Define the data structure for a simple logo entry in `src/data/svgs.ts`. This includes the logo's title, category, route to the SVG file, and the website URL.

```typescript
{
  title: 'Title',
  category: 'Category',
  route: '/library/your_logo.svg',
  url: 'Website'
}
```

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

### Adding Loftlyy Brand URL

Source: https://github.com/pheralb/svgl/blob/main/README.md

Incorporate a `loftlyyUrl` property into the data structure in `src/data/svgs.ts` to link to a brand identity reference site like Loftlyy. This helps users find detailed brand information.

```typescript
{
  title: 'Title',
  category: 'Category',
  route: '/library/your_logo.svg',
  wordmark: '/library/your_logo_wordmark.svg',
  loftlyyUrl: 'https://www.loftlyy.com/en/brand-name',
  url: 'Website'
}
```

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

### Search SVG by title

Source: https://github.com/pheralb/svgl/blob/main/src/docs/api.md

Searches for SVGs by their title.

```APIDOC
## GET /

### Description
Searches for SVGs by their title.

### Endpoint
`https://api.svgl.app?search={query}`

### Query Parameters
- **search** (string) - Required - The search query for the SVG title.

### Response
#### Success Response (200)
- **Array of SVG objects**: Each object contains details like id, title, category, route, and url.

### 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://github.com/pheralb/svgl/blob/main/src/docs/api.md

Defines the structure of SVG data returned by the API, including properties like id, title, category, and route. Note that 'category' and 'route' can be strings or arrays/objects.

```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;
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.