{"id":13406056,"url":"https://github.com/pheralb/svgl","last_synced_at":"2025-05-13T23:07:49.083Z","repository":{"id":39695558,"uuid":"448688478","full_name":"pheralb/svgl","owner":"pheralb","description":"🧩 A beautiful library with SVG logos. Built with Sveltekit \u0026 Tailwind CSS.","archived":false,"fork":false,"pushed_at":"2025-04-08T22:22:46.000Z","size":11460,"stargazers_count":3899,"open_issues_count":145,"forks_count":547,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-04-10T02:11:29.781Z","etag":null,"topics":["hacktoberfest","logos","open-source","optimized","svelte","sveltekit","svg","svg-icons","svg-images","tailwindcss"],"latest_commit_sha":null,"homepage":"https://svgl.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pheralb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"pheralb"}},"created_at":"2022-01-16T22:27:26.000Z","updated_at":"2025-04-10T01:49:04.000Z","dependencies_parsed_at":"2024-04-15T11:46:48.667Z","dependency_job_id":"9742fb29-e922-41b4-9522-6117f1b706f0","html_url":"https://github.com/pheralb/svgl","commit_stats":{"total_commits":864,"total_committers":122,"mean_commits":7.081967213114754,"dds":"0.42939814814814814","last_synced_commit":"eacb10f4097fd11f39dc017d7a1515b105758069"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pheralb%2Fsvgl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pheralb%2Fsvgl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pheralb%2Fsvgl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pheralb%2Fsvgl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pheralb","download_url":"https://codeload.github.com/pheralb/svgl/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248142905,"owners_count":21054671,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hacktoberfest","logos","open-source","optimized","svelte","sveltekit","svg","svg-icons","svg-images","tailwindcss"],"created_at":"2024-07-30T19:02:19.729Z","updated_at":"2025-04-10T02:11:38.046Z","avatar_url":"https://github.com/pheralb.png","language":"TypeScript","funding_links":["https://github.com/sponsors/pheralb"],"categories":["TypeScript","hacktoberfest"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\u003ca href=\"https://svgl.app\"\u003e\n\u003cimg src=\"static/images/readme.png\"\u003e\n\u003c/a\u003e\n\u003cp\u003e\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://svgl.app\" target=\"_blank\"\u003e\n        Discover\n    \u003c/a\u003e\n    \u003cspan\u003e\u0026nbsp;✦\u0026nbsp;\u003c/span\u003e\n    \u003ca href=\"https://github.com/pheralb/svgl/issues/new?assignees=\u0026labels=request\u0026projects=\u0026template=request-svg.yml\u0026title=%5B%F0%9F%94%94+Request+SVG%5D%3A+\"\u003e\n        Request logo\n    \u003c/a\u003e\n    \u003cspan\u003e\u0026nbsp;✦\u0026nbsp;\u003c/span\u003e\n    \u003ca href=\"#-getting-started\"\u003e\n        Submit logo\n    \u003c/a\u003e\n    \u003cspan\u003e\u0026nbsp;✦\u0026nbsp;\u003c/span\u003e\n    \u003ca href=\"#-extensions\"\u003e\n        Extensions\n    \u003c/a\u003e\n    \u003cspan\u003e\u0026nbsp;✦\u0026nbsp;\u003c/span\u003e\n    \u003ca href=\"https://svgl.app/api\"\u003e\n        API\n    \u003c/a\u003e\n    \u003cspan\u003e\u0026nbsp;✦\u0026nbsp;\u003c/span\u003e\n    \u003ca href=\"#%EF%B8%8F-contributing\"\u003e\n        Contributing\n    \u003c/a\u003e\n\u003c/div\u003e\n\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n![Svelte Badge](https://img.shields.io/badge/Sveltekit-FF3E00?logo=svelte\u0026logoColor=fff\u0026style=flat)\n![Hono Badge](https://img.shields.io/badge/Hono-E36002?logo=hono\u0026logoColor=fff\u0026style=flat)\n[![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fpheralb%2Fsvgl%2Fbadge%3Fref%3Dmain\u0026style=flat)](https://actions-badge.atrox.dev/pheralb/svgl/goto?ref=main)\n![GitHub stars](https://img.shields.io/github/stars/pheralb/svgl)\n![GitHub issues](https://img.shields.io/github/issues/pheralb/svgl)\n![GitHub forks](https://img.shields.io/github/forks/pheralb/svgl)\n![GitHub PRs](https://img.shields.io/github/issues-pr/pheralb/svgl)\n\n\u003c/div\u003e\n\n## 🛠️ Stack\n\n- [**Sveltekit**](https://kit.svelte.dev/) - Web development, streamlined.\n- [**Typescript**](https://www.typescriptlang.org/) - JavaScript with syntax for types.\n- [**mdsvex**](https://mdsvex.com/) - Markdown for Svelte apps.\n- [**Shiki**](https://github.com/shikijs/shiki) - A beautiful Syntax Highlighter.\n- [**Tailwindcss**](https://tailwindcss.com/) - A utility-first CSS framework for rapidly building custom designs.\n- [**bits-ui**](https://www.bits-ui.com) - A collection of headless components for Svelte.\n- [**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.\n- [**Prettier**](https://prettier.io/) + [prettier-plugin-tailwindcss](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) - An opinionated code formatter.\n- [**Lucide Icons**](https://lucide.dev/) + [**phosphor-svelte**](https://github.com/haruaki07/phosphor-svelte) - A clean and friendly icons libraries.\n- [**svelte-sonner**](https://github.com/wobsoriano/svelte-sonner) - An opinionated toast component for Svelte.\n- [**@svgr/core**](https://react-svgr.com/) - Node.js utility to transform SVGs into React components.\n- [**@upstash/redis** + **@upstash/ratelimit**](https://upstash.com/) - Serverless Redis for developers.\n- [**Vitest**](https://vitest.dev/) - Blazing Fast Unit Test Framework.\n\n## 🚀 Getting Started\n\n\u003e [!IMPORTANT]\n\u003e 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.\n\nYou will need:\n\n- [Node.js 18+ (recommended 20 LTS)](https://nodejs.org/en/).\n- [Git](https://git-scm.com/).\n\n1. [Fork](https://github.com/pheralb/svgl/fork) this repository and clone it locally:\n\n```bash\ngit clone git@github.com:your_username/svgl.git\n```\n\n2. Install dependencies:\n\n```bash\n# Install pnpm globally if you don't have it:\nnpm install -g pnpm\n\n# and install dependencies:\npnpm install\n```\n\n3. Go to the [**`static/library`**](https://github.com/pheralb/svgl/blob/main/static/library) folder and add your `.svg` logo.\n\n\u003e [!WARNING]\n\u003e\n\u003e - Remember to optimize SVG for web, you can use [SVGOMG](https://jakearchibald.github.io/svgomg/).\n\u003e - When you optimize the SVG, make sure that the `viewBox` is not removed.\n\u003e - The size limit for each .svg is **20kb**.\n\n4. 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:\n\n- **Simple logo**:\n\n```json\n{\n  \"title\": \"Title\",\n  \"category\": \"Category\",\n  \"route\": \"/library/your_logo.svg\",\n  \"url\": \"Website\"\n}\n```\n\n- **Logo + wordmark** version:\n\n```json\n{\n  \"title\": \"Title\",\n  \"category\": \"Category\",\n  \"route\": \"/library/your_logo.svg\",\n  \"wordmark\": \"/library/your_logo_wordmark.svg\",\n  \"url\": \"Website\"\n}\n```\n\n- **Logo + wordmark** \u0026 **light + dark mode**:\n\n```json\n{\n  \"title\": \"Title\",\n  \"category\": \"Category\",\n  \"route\": {\n    \"light\": \"/library/your_logo_light.svg\",\n    \"dark\": \"/library/your_logo_dark.svg\"\n  },\n  \"wordmark\": {\n    \"light\": \"/library/your_wordmark-logo_light.svg\",\n    \"dark\": \"/library/your_wordmark-logo_dark.svg\"\n  },\n  \"url\": \"Website\"\n}\n```\n\n- **Add brand guidelines**:\n\n```json\n{\n  \"title\": \"Title\",\n  \"category\": \"Category\",\n  \"route\": \"/library/your_logo.svg\",\n  \"wordmark\": \"/library/your_logo_wordmark.svg\",\n  \"brandUrl\": \"https://assets.website.com/brand-guidelines\",\n  \"url\": \"Website\"\n}\n```\n\n\u003e [!NOTE]\n\u003e\n\u003e - 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.\n\u003e - You can add multiple categories to the same logo, for example: `\"category\": [\"Social\", \"Design\"]`.\n\nAnd create a pull request with your logo 🚀.\n\n5. (Optional) If you want to run the [API](https://svgl.app/api) locally, you will need to create a `.dev.vars` file in the [`/api-routes`](https://github.com/pheralb/svgl/tree/main/api-routes) folder with the following variables:\n\n- [Create a Upstash account](https://console.upstash.com/).\n- [Create a Upstash Redis Database](https://upstash.com/docs/redis/overall/getstarted).\n\n```bash\nSVGL_API_REQUESTS = 1\nUPSTASH_REDIS_URL = \"\"\nUPSTASH_REDIS_TOKEN = \"\"\n```\n\n## 📦 Extensions\n\nA list of extensions that use the [svgl API](https://svgl.app/api), created by the community:\n\n|                                                                                                            | Extension          | Description                                        | Created by                                             | Link                                                                                        |\n| ---------------------------------------------------------------------------------------------------------- | ------------------ | -------------------------------------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------- |\n| \u003cimg src=\"https://github.com/pheralb/svgl/blob/main/static/library/svgl.svg\" height=\"25\" /\u003e                | svgls              | A CLI for easily adding SVG icons to your project. | [sujjeee](https://twitter.com/sujjeeee)                | [GitHub Repository](https://github.com/sujjeee/svgls)                                       |\n| \u003cimg src=\"https://github.com/pheralb/svgl/blob/main/static/library/figma.svg\" height=\"25\" /\u003e               | 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)             |\n| \u003cimg src=\"https://github.com/pheralb/svgl/blob/main/static/library/raycast.svg\" height=\"25\" /\u003e             | SVGL for Raycast   | Search SVG logos via svgl.                         | [1weiho](https://twitter.com/1weiho)                   | [Raycast Store](https://www.raycast.com/1weiho/svgl)                                        |\n| \u003cimg src=\"https://github.com/pheralb/svgl/blob/main/static/library/vscode.svg\" height=\"25\" /\u003e              | SVGL for VSCode    | SVGL directly in your VSCode.                      | [girlazote](https://twitter.com/girlazote)             | [VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=EsteveSegura.svgl) |\n| \u003cimg src=\"https://svgl-badge.vercel.app/api/Library/Svgl?theme=light\" height=\"25\" /\u003e                       | SVGL Badge         | A beautiful badges with svgl SVG logos.            | [ridemountainpig](https://twitter.com/ridemountainpig) | [Website](https://svgl-badge.vercel.app/)                                                   |\n| \u003cimg src=\"https://github.com/serafimcloud/21st/blob/main/apps/web/public/icon.png?raw=true\" height=\"25\" /\u003e | Magic              | AI extension for Cursor \u0026 other IDEs               | [serafimcloud](https://x.com/serafimcloud)             | [Website](https://21st.dev/magic)                                                           |\n| \u003cimg src=\"https://github.com/pheralb/svgl/blob/main/static/library/powertoys.svg\" height=\"25\" /\u003e           | SVGL for PowerToys | Search \u0026 copy SVG logos in PowerToys Run.          | [SameerJS6](https://x.com/Sameerjs6)                   | [Website](https://svgl.sameerjs.com/)                                                       |\n\n## ✌️ Contributing\n\n\u003ca href=\"https://github.com/pheralb/svgl/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=pheralb/svgl\" /\u003e\n\u003c/a\u003e\n\n\u003cp\u003e\u003c/p\u003e\n\n## 🔑 License\n\n- [MIT](https://github.com/pheralb/svgl/blob/main/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpheralb%2Fsvgl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpheralb%2Fsvgl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpheralb%2Fsvgl/lists"}