Svgl

<div align="center"> <a href="https://svgl.app"> <img src="static/images/screenshot_dark.png"> </a> <p></p> </div> <div align="center"> <a href="https://svgl.app" target="_blank"> Explore </a> <span>&nbsp;✦&nbsp;</span> <a href="https://github.com/sponsors/pheralb"> Sponsor this project </a> <span>&nbsp;✦&nbsp;</span> <a href="#-getting-started"> Getting Started </a> <span>&nbsp;✦&nbsp;</span> <a href="https://svgl.app/extensions" target="_blank"> Extensions </a> <span>&nbsp;✦&nbsp;</span> <a href="#️-stack"> Stack </a> <span>&nbsp;✦&nbsp;</span> <a href="#️-contributing"> Contributing </a> <span>&nbsp;✦&nbsp;</span> <a href="#️-license"> License </a> </div> </p> <div align="center">

</div>

📦 Extensions

A list of extensions that use the SVGL API, created by the community:

| | Extension | Description | Created by | Link | | ---------------------------------------------------------------------------------------------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | | <img src="https://github.com/pheralb/svgl/blob/main/static/library/svgl.svg" height="25" /> | SVGL CLI | A CLI for easily adding SVG icons to your project. | sujjeee | GitHub Repository | | <img src="https://github.com/pheralb/svgl/blob/main/static/library/framer_dark.svg" height="25" /> | SVGL for Framer | Our SVGL plugin for Framer simplifies the use of SVG-based colourful logos. Easily import and easy to use. | Krishna Singh | Framer Marketplace | | <img src="https://github.com/pheralb/svgl/blob/main/static/library/react_light.svg" height="25" /> | SVGL for React | An open-source NPM package that offers a SVGL Logos for React. | ridemountainpig | GitHub Repository | | <img src="https://github.com/pheralb/svgl/blob/main/static/library/vue.svg" height="25" /> | SVGL for Vue | An open-source NPM package that offers a SVGL Logos for Vue. | selemondev | GitHub Repository | | <img src="https://github.com/pheralb/svgl/blob/main/static/library/svelte.svg" height="25" /> | SVGL for Svelte | An open-source NPM package that offers a SVGL Logos for Svelte. | selemondev | GitHub Repository | | <img src="https://github.com/pheralb/svgl/blob/main/static/library/figma.svg" height="25" /> | SVGL for Figma | Add svgs from svgl to your Figma project. | quilljou | Figma Plugin | | <img src="https://github.com/pheralb/svgl/blob/main/static/library/powertoys.svg" height="25" /> | SVGL for PowerToys | Search & copy SVG logos in PowerToys Run. | SameerJS6 | Website | | <img src="https://github.com/pheralb/svgl/blob/main/static/library/raycast.svg" height="25" /> | SVGL for Raycast | Search SVG logos via svgl. | 1weiho | Raycast Store | | <img src="https://github.com/pheralb/svgl/blob/main/static/library/vscode.svg" height="25" /> | SVGL for VSCode | SVGL directly in your VSCode. | girlazote | VSCode Marketplace | | <img src="https://svgl-badge.vercel.app/api/Library/Svgl?theme=light" height="25" /> | SVGL Badge | A beautiful badges with svgl SVG logos. | ridemountainpig | Website | | <img src="https://github.com/serafimcloud/21st/blob/main/apps/web/public/icon.png?raw=true" height="25" /> | Magic | AI extension for Cursor & other IDEs | serafimcloud | Website | | <img src="/static/library/powershell.svg" height="25" /> | SVGL for PowerShell | PowerShell extension to quickly get svgl logos anywhere | Bart Spaans | GitHub Repository | | <img src="/static/library/FlowLauncher.svg" height="25"> | SVGL for Flow Launcher | Search & copy SVG logos in Flow Launcher | AF_Askar | GitHub Repository |

🛠️ Stack

• Sveltekit + Svelte 5 - Web development, streamlined.
• Typescript - JavaScript with syntax for types.
• Content-Collections - Transform your content into type-safe data collections and say goodbye to manual data fetching and parsing.
• Shiki - A beautiful Syntax Highlighter.
• Tailwind CSS - A utility-first CSS framework for rapidly building custom designs.
• bits-ui - A collection of headless components for Svelte.
• clsx + tailwind-merge inspired by shadcn/ui - A tiny utility for constructing className strings conditionally.
• Prettier + prettier-plugin-tailwindcss - An opinionated code formatter.
• Lucide Icons - Beautiful & consistent icons.
• svelte-sonner - An opinionated toast component for Svelte.
• Hono - Fast, lightweight, built on Web Standards. Support for any JavaScript runtime.
• @upstash/redis + @upstash/ratelimit - Serverless Redis for developers.

🚀 Getting Started

[!IMPORTANT] Before submitting an SVG, ensure you have the right to use it and that its license permits adding it to svgl. If you are uncertain, please contact the author or the company.

You will need:

• Node.js 20+.
• Git.

1. Fork this repository and clone it locally:

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

2. Install dependencies:

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

# and install dependencies:
pnpm install

3. Go to the [static/library](https://github.com/pheralb/svgl/blob/