base on 🧩 A beautiful library with SVG logos. Built with Sveltekit & Tailwind CSS. <div align="center"> <a href="https://svgl.app"> <img src="static/images/readme.png"> </a> <p></p> </div> <div align="center"> <a href="https://svgl.app" target="_blank"> Discover </a> <span>&nbsp;✦&nbsp;</span> <a href="https://github.com/pheralb/svgl/issues/new?assignees=pheralb&labels=request&projects=&template=request-svg-.md&title=%5BRequest%5D%3A"> Request logo </a> <span>&nbsp;✦&nbsp;</span> <a href="#-getting-started"> Submit logo </a> <span>&nbsp;✦&nbsp;</span> <a href="#-extensions"> Extensions </a> <span>&nbsp;✦&nbsp;</span> <a href="https://svgl.app/api"> API </a> <span>&nbsp;✦&nbsp;</span> <a href="#%EF%B8%8F-contributing"> Contributing </a> </div> </p> <div align="center">   [](https://actions-badge.atrox.dev/pheralb/svgl/goto?ref=main)     </div> ## 🛠️ Stack - [**Sveltekit**](https://kit.svelte.dev/) - Web development, streamlined. - [**Typescript**](https://www.typescriptlang.org/) - JavaScript with syntax for types. - [**mdsvex**](https://mdsvex.com/) - Markdown for Svelte apps. - [**Shiki**](https://github.com/shikijs/shiki) - A beautiful Syntax Highlighter. - [**Tailwindcss**](https://tailwindcss.com/) - A utility-first CSS framework for rapidly building custom designs. - [**bits-ui**](https://www.bits-ui.com) - A collection of headless components for Svelte. - [**clsx**](https://github.com/lukeed/clsx) + [**tailwind-merge**](https://github.com/dcastil/tailwind-merge) inspired by [shadcn/ui](https://ui.shadcn.com) - A tiny utility for constructing `className` strings conditionally. - [**Prettier**](https://prettier.io/) + [prettier-plugin-tailwindcss](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) - An opinionated code formatter. - [**Lucide Icons**](https://lucide.dev/) + [**phosphor-svelte**](https://github.com/haruaki07/phosphor-svelte) - A clean and friendly icons libraries. - [**svelte-sonner**](https://github.com/wobsoriano/svelte-sonner) - An opinionated toast component for Svelte. - [**@svgr/core**](https://react-svgr.com/) - Node.js utility to transform SVGs into React components. - [**@upstash/redis** + **@upstash/ratelimit**](https://upstash.com/) - Serverless Redis for developers. - [**Vitest**](https://vitest.dev/) - Blazing Fast Unit Test Framework. ## 🚀 Getting Started > [!IMPORTANT] > Before submitting the SVG, **make sure that you have permission** or that the license of the SVG allows you to add it to svgl. If you are not sure, please contact the company or author. You will need: - [Node.js 18+ (recommended 20 LTS)](https://nodejs.org/en/). - [Git](https://git-scm.com/). 1. [Fork](https://github.com/pheralb/svgl/fork) this repository and clone it locally: ```bash git clone [email protected]:your_username/svgl.git ``` 2. Install dependencies: ```bash # 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/main/static/library) folder and add your `.svg` logo. > [!WARNING] > > - Remember to optimize SVG for web, you can use [SVGOMG](https://jakearchibald.github.io/svgomg/). > - When you optimize the SVG, make sure that the `viewBox` is not removed. > - The size limit for each .svg is **20kb**. 4. Go to the [**`src/data/svgs.ts`**](https://github.com/pheralb/svgl/blob/main/src/data/svgs.ts) and add the information about your logo, following the structure: - **Simple logo**: ```json { "title": "Title", "category": "Category", "route": "/library/your_logo.svg", "url": "Website" } ``` - **Logo + wordmark** version: ```json { "title": "Title", "category": "Category", "route": "/library/your_logo.svg", "wordmark": "/library/your_logo_wordmark.svg", "url": "Website" } ``` - **Logo + wordmark** & **light + dark mode**: ```json { "title": "Title", "category": "Category", "route": { "light": "/library/your_logo_light.svg", "dark": "/library/your_logo_dark.svg" }, "wordmark": { "light": "/library/your_wordmark-logo_light.svg", "dark": "/library/your_wordmark-logo_dark.svg" }, "url": "Website" } ``` > [!NOTE] > > - The list of categories is here: [`src/types/categories.ts`](https://github.com/pheralb/svgl/blob/main/src/types/categories.ts). You can add a new category if you need it. > - You can add multiple categories to the same logo, for example: `"category": ["Social", "Design"]`. And create a pull request with your logo 🚀. 5. (Optional) If you want to run the [API](https://svgl.app/api) locally, you will need to create a `.env` file in the root of the project with the following variables: - [Create a Upstash account](https://console.upstash.com/). - [Create a Upstash Redis Database](https://upstash.com/docs/redis/overall/getstarted). ```bash SVGL_API_REQUESTS = 1 UPSTASH_REDIS_URL = "" UPSTASH_REDIS_TOKEN = "" ``` ## 📦 Extensions A list of extensions that use the [svgl API](https://svgl.app/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" /> | svgls | A CLI for easily adding SVG icons to your project. | [sujjeee](https://twitter.com/sujjeeee) | [GitHub Repository](https://github.com/sujjeee/svgls) | | <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](https://twitter.com/quillzhou) | [Figma Plugin](https://www.figma.com/community/plugin/1320306989350693206/svgl) | | <img src="https://github.com/pheralb/svgl/blob/main/static/library/raycast.svg" height="25" /> | SVGL for Raycast | Search SVG logos via svgl. | [1weiho](https://twitter.com/1weiho) | [Raycast Store](https://www.raycast.com/1weiho/svgl) | | <img src="https://github.com/pheralb/svgl/blob/main/static/library/vscode.svg" height="25" /> | SVGL for VSCode | SVGL directly in your VSCode. | [girlazote](https://twitter.com/girlazote) | [VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=EsteveSegura.svgl) | | <img src="https://svgl-badge.vercel.app/api/Library/Svgl?theme=light" height="25" /> | SVGL Badge | A beautiful badges with svgl SVG logos. | [ridemountainpig](https://twitter.com/ridemountainpig) | [Svgl Badge](https://svgl-badge.vercel.app/) | ## ✌️ Contributing <a href="https://github.com/pheralb/svgl/graphs/contributors"> <img src="https://contrib.rocks/image?repo=pheralb/svgl" /> </a> <p></p> ## 🔑 License - [MIT](https://github.com/pheralb/svgl/blob/main/LICENSE). ", Assign "at most 3 tags" to the expected json: {"id":"6047","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"