[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-71380":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":25,"hasPages":23,"topics":26,"createdAt":10,"pushedAt":10,"updatedAt":37,"readmeContent":38,"aiSummary":39,"trendingCount":16,"starSnapshotCount":16,"syncStatus":40,"lastSyncTime":41,"discoverSource":42},71380,"svgl","pheralb\u002Fsvgl","pheralb","🧩 A beautiful library with SVG logos. Built with Sveltekit & Tailwind CSS.","https:\u002F\u002Fsvgl.app",null,"TypeScript",6112,836,14,165,0,17,34,114,51,39.77,"MIT License",false,"main",true,[27,28,29,30,31,32,33,34,35,36],"hacktoberfest","logos","open-source","optimized","svelte","sveltekit","svg","svg-icons","svg-images","tailwindcss","2026-06-12 02:02:51","\u003Cdiv align=\"center\">\n\u003Ca href=\"https:\u002F\u002Fsvgl.app\">\n\u003Cimg src=\"static\u002Fimages\u002Fscreenshot_dark.png\">\n\u003C\u002Fa>\n\u003Cp>\u003C\u002Fp>\n\u003C\u002Fdiv>\n\n\u003Cdiv align=\"center\">\n    \u003Ca href=\"https:\u002F\u002Fsvgl.app\" target=\"_blank\">\n        Explore\n    \u003C\u002Fa>\n    \u003Cspan> ✦ \u003C\u002Fspan>\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fsponsors\u002Fpheralb\">\n        Sponsor this project\n    \u003C\u002Fa>\n    \u003Cspan> ✦ \u003C\u002Fspan>\n    \u003Ca href=\"#-getting-started\">\n        Getting Started\n    \u003C\u002Fa>\n    \u003Cspan> ✦ \u003C\u002Fspan>\n    \u003Ca href=\"https:\u002F\u002Fsvgl.app\u002Fextensions\" target=\"_blank\">\n        Extensions\n    \u003C\u002Fa>\n    \u003Cspan> ✦ \u003C\u002Fspan>\n    \u003Ca href=\"#️-stack\">\n        Stack\n    \u003C\u002Fa>\n    \u003Cspan> ✦ \u003C\u002Fspan>\n    \u003Ca href=\"#️-contributing\">\n        Contributing\n    \u003C\u002Fa>\n    \u003Cspan> ✦ \u003C\u002Fspan>\n    \u003Ca href=\"#️-license\">\n        License\n    \u003C\u002Fa>\n\u003C\u002Fdiv>\n\n\u003C\u002Fp>\n\n\u003Cdiv align=\"center\">\n\n![Svelte Badge](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FSveltekit-FF3E00?logo=svelte&logoColor=fff&style=flat)\n![Hono Badge](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FHono-E36002?logo=hono&logoColor=fff&style=flat)\n![Svelte Badge](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FUpstash-121212?logo=upstash&logoColor=#00C786&style=flat)\n[![Build Status](https:\u002F\u002Fimg.shields.io\u002Fendpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fpheralb%2Fsvgl%2Fbadge%3Fref%3Dmain&style=flat)](https:\u002F\u002Factions-badge.atrox.dev\u002Fpheralb\u002Fsvgl\u002Fgoto?ref=main)\n![GitHub stars](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fpheralb\u002Fsvgl)\n![GitHub forks](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fforks\u002Fpheralb\u002Fsvgl)\n![GitHub issues](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fissues\u002Fpheralb\u002Fsvgl)\n![GitHub PRs](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fissues-pr\u002Fpheralb\u002Fsvgl)\n\n\u003C\u002Fdiv>\n\n## 📦 Extensions\n\nA list of extensions that use the [**SVGL API**](https:\u002F\u002Fsvgl.app\u002Fdocs\u002Fapi), created by the community:\n\n|                                                                                                            | Extension              | Description                                                                                                | Created by                                                     | Link                                                                                             |\n| ---------------------------------------------------------------------------------------------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |\n| \u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fpheralb\u002Fsvgl\u002Fblob\u002Fmain\u002Fstatic\u002Flibrary\u002Fsvgl.svg\" height=\"25\" \u002F>                | SVGL CLI               | A CLI for easily adding SVG icons to your project.                                                         | [sujjeee](https:\u002F\u002Ftwitter.com\u002Fsujjeeee)                        | [GitHub Repository](https:\u002F\u002Fgithub.com\u002Fsujjeee\u002Fsvgls)                                            |\n| \u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fpheralb\u002Fsvgl\u002Fblob\u002Fmain\u002Fstatic\u002Flibrary\u002Fframer_dark.svg\" height=\"25\" \u002F>         | SVGL for Framer        | Our SVGL plugin for Framer simplifies the use of SVG-based colourful logos. Easily import and easy to use. | [Krishna Singh](https:\u002F\u002Fx.com\u002Fkrishnasinghdev)                 | [Framer Marketplace](https:\u002F\u002Fwww.framer.com\u002Fmarketplace\u002Fplugins\u002Fsvgl\u002F)                           |\n| \u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fpheralb\u002Fsvgl\u002Fblob\u002Fmain\u002Fstatic\u002Flibrary\u002Freact_light.svg\" height=\"25\" \u002F>         | SVGL for React         | An open-source NPM package that offers a SVGL Logos for React.                                             | [ridemountainpig](https:\u002F\u002Fx.com\u002Fridemountainpig)               | [GitHub Repository](https:\u002F\u002Fgithub.com\u002Fridemountainpig\u002Fsvgl-react?tab=readme-ov-file#svgl-react) |\n| \u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fpheralb\u002Fsvgl\u002Fblob\u002Fmain\u002Fstatic\u002Flibrary\u002Fvue.svg\" height=\"25\" \u002F>                 | SVGL for Vue           | An open-source NPM package that offers a SVGL Logos for Vue.                                               | [selemondev](https:\u002F\u002Fx.com\u002Fselemondev)                         | [GitHub Repository](https:\u002F\u002Fgithub.com\u002Fselemondev\u002Fsvgl-vue?tab=readme-ov-file#--svgl-vue--)      |\n| \u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fpheralb\u002Fsvgl\u002Fblob\u002Fmain\u002Fstatic\u002Flibrary\u002Fsvelte.svg\" height=\"25\" \u002F>              | SVGL for Svelte        | An open-source NPM package that offers a SVGL Logos for Svelte.                                            | [selemondev](https:\u002F\u002Fx.com\u002Fselemondev)                         | [GitHub Repository](https:\u002F\u002Fgithub.com\u002Fselemondev\u002Fsvgl-svelte#--svgl-svelte--)                   |\n| \u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fpheralb\u002Fsvgl\u002Fblob\u002Fmain\u002Fstatic\u002Flibrary\u002Ffigma.svg\" height=\"25\" \u002F>               | SVGL for Figma         | Add svgs from svgl to your Figma project.                                                                  | [quilljou](https:\u002F\u002Ftwitter.com\u002Fquillzhou)                      | [Figma Plugin](https:\u002F\u002Fwww.figma.com\u002Fcommunity\u002Fplugin\u002F1320306989350693206\u002Fsvgl)                  |\n| \u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fpheralb\u002Fsvgl\u002Fblob\u002Fmain\u002Fstatic\u002Flibrary\u002Fpowertoys.svg\" height=\"25\" \u002F>           | SVGL for PowerToys     | Search & copy SVG logos in PowerToys Run.                                                                  | [SameerJS6](https:\u002F\u002Fx.com\u002FSameerjs6)                           | [Website](https:\u002F\u002Fsvgl.sameerjs.com\u002F)                                                            |\n| \u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fpheralb\u002Fsvgl\u002Fblob\u002Fmain\u002Fstatic\u002Flibrary\u002Fraycast.svg\" height=\"25\" \u002F>             | SVGL for Raycast       | Search SVG logos via svgl.                                                                                 | [1weiho](https:\u002F\u002Ftwitter.com\u002F1weiho)                           | [Raycast Store](https:\u002F\u002Fwww.raycast.com\u002F1weiho\u002Fsvgl)                                             |\n| \u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fpheralb\u002Fsvgl\u002Fblob\u002Fmain\u002Fstatic\u002Flibrary\u002Fvscode.svg\" height=\"25\" \u002F>              | SVGL for VSCode        | SVGL directly in your VSCode.                                                                              | [girlazote](https:\u002F\u002Ftwitter.com\u002Fgirlazote)                     | [VSCode Marketplace](https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=EsteveSegura.svgl)      |\n| \u003Cimg src=\"https:\u002F\u002Fsvgl-badge.vercel.app\u002Fapi\u002FLibrary\u002FSvgl?theme=light\" height=\"25\" \u002F>                       | SVGL Badge             | A beautiful badges with svgl SVG logos.                                                                    | [ridemountainpig](https:\u002F\u002Ftwitter.com\u002Fridemountainpig)         | [Website](https:\u002F\u002Fsvgl-badge.vercel.app\u002F)                                                        |\n| \u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fserafimcloud\u002F21st\u002Fblob\u002Fmain\u002Fapps\u002Fweb\u002Fpublic\u002Ficon.png?raw=true\" height=\"25\" \u002F> | Magic                  | AI extension for Cursor & other IDEs                                                                       | [serafimcloud](https:\u002F\u002Fx.com\u002Fserafimcloud)                     | [Website](https:\u002F\u002F21st.dev\u002Fmagic)                                                                |\n| \u003Cimg src=\"\u002Fstatic\u002Flibrary\u002Fpowershell.svg\" height=\"25\" \u002F>                                                   | SVGL for PowerShell    | PowerShell extension to quickly get svgl logos anywhere                                                    | [Bart Spaans](https:\u002F\u002Fbsky.app\u002Fprofile\u002Fbartspaans.bsky.social) | [GitHub Repository](https:\u002F\u002Fgithub.com\u002Fspaansba\u002FSVGL-PowerShell)                                 |\n| \u003Cimg src=\"\u002Fstatic\u002Flibrary\u002FFlowLauncher.svg\" height=\"25\">                                                   | SVGL for Flow Launcher | Search & copy SVG logos in Flow Launcher                                                                   | [AF_Askar](https:\u002F\u002Fx.com\u002FAskar_AF)                             | [GitHub Repository](https:\u002F\u002Fgithub.com\u002Fabo3skr2019\u002FSVGl-plugin)                                  |\n\n## 🛠️ Stack\n\n- [**Sveltekit** + **Svelte 5**](https:\u002F\u002Fkit.svelte.dev\u002F) - Web development, streamlined.\n- [**Typescript**](https:\u002F\u002Fwww.typescriptlang.org\u002F) - JavaScript with syntax for types.\n- [**Content-Collections**](https:\u002F\u002Fwww.content-collections.dev\u002F) - Transform your content into type-safe data collections and say goodbye to manual data fetching and parsing.\n- [**Shiki**](https:\u002F\u002Fgithub.com\u002Fshikijs\u002Fshiki) - A beautiful Syntax Highlighter.\n- [**Tailwind CSS**](https:\u002F\u002Ftailwindcss.com\u002F) - A utility-first CSS framework for rapidly building custom designs.\n- [**bits-ui**](https:\u002F\u002Fwww.bits-ui.com) - A collection of headless components for Svelte.\n- [**clsx**](https:\u002F\u002Fgithub.com\u002Flukeed\u002Fclsx) + [**tailwind-merge**](https:\u002F\u002Fgithub.com\u002Fdcastil\u002Ftailwind-merge) inspired by [shadcn\u002Fui](https:\u002F\u002Fui.shadcn.com) - A tiny utility for constructing `className` strings conditionally.\n- [**Prettier**](https:\u002F\u002Fprettier.io\u002F) + [prettier-plugin-tailwindcss](https:\u002F\u002Fgithub.com\u002Ftailwindlabs\u002Fprettier-plugin-tailwindcss) - An opinionated code formatter.\n- [**Lucide Icons**](https:\u002F\u002Flucide.dev\u002F) - Beautiful &\n  consistent icons.\n- [**svelte-sonner**](https:\u002F\u002Fgithub.com\u002Fwobsoriano\u002Fsvelte-sonner) - An opinionated toast component for Svelte.\n- [**Hono**](https:\u002F\u002Fhono.dev\u002F) - Fast, lightweight, built on Web Standards. Support for any JavaScript runtime.\n- [**@upstash\u002Fredis** + **@upstash\u002Fratelimit**](https:\u002F\u002Fupstash.com\u002F) - Serverless Redis for developers.\n\n## 🚀 Getting Started\n\n> [!IMPORTANT]\n> 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.\n\nYou will need:\n\n- [Node.js 20+](https:\u002F\u002Fnodejs.org\u002Fen\u002F).\n- [Git](https:\u002F\u002Fgit-scm.com\u002F).\n\n1. [**Fork this repository**](https:\u002F\u002Fgithub.com\u002Fpheralb\u002Fsvgl\u002Ffork) and clone it locally:\n\n```bash\ngit clone git@github.com:your_username\u002Fsvgl.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\u002Flibrary`**](https:\u002F\u002Fgithub.com\u002Fpheralb\u002Fsvgl\u002Fblob\u002Fmain\u002Fstatic\u002Flibrary) folder and add your `.svg` logo.\n\n> [!WARNING]\n>\n> - Remember to optimize SVG for web, you can use [SVGOMG](https:\u002F\u002Fjakearchibald.github.io\u002Fsvgomg\u002F).\n> - When you optimize the SVG, make sure that the `viewBox` is not removed.\n> - The size limit for each .svg is **21kb**.\n\n4. Go to the [**`src\u002Fdata\u002Fsvgs.ts`**](https:\u002F\u002Fgithub.com\u002Fpheralb\u002Fsvgl\u002Fblob\u002Fmain\u002Fsrc\u002Fdata\u002Fsvgs.ts) and add the information about your logo, following the structure:\n\n- **Simple logo**:\n\n```ts\n{\n  title: 'Title',\n  category: 'Category',\n  route: '\u002Flibrary\u002Fyour_logo.svg',\n  url: 'Website'\n}\n```\n\n- **Simple logo + wordmark**:\n\n```ts\n{\n  title: 'Title',\n  category: 'Category',\n  route: '\u002Flibrary\u002Fyour_logo.svg',\n  wordmark: '\u002Flibrary\u002Fyour_logo_wordmark.svg',\n  url: 'Website'\n}\n```\n\n- **Logo (light & dark mode)**:\n\n```ts\n{\n  title: 'Title',\n  category: 'Category',\n  route: {\n    light: '\u002Flibrary\u002Fyour_logo_light.svg',\n    dark: '\u002Flibrary\u002Fyour_logo_dark.svg'\n  },\n  url: 'Website'\n}\n```\n\n- **Wordmark (light & dark mode)**:\n\n```ts\n{\n  title: 'Title',\n  category: 'Category',\n  wordmark: {\n    light: '\u002Flibrary\u002Fyour_logo_light.svg',\n    dark: '\u002Flibrary\u002Fyour_logo_dark.svg'\n  },\n  url: 'Website'\n}\n```\n\n- **Full example with all properties**:\n\n```ts\n{\n  title: 'Title',\n  category: 'Category',\n  route: {\n    light: '\u002Flibrary\u002Fyour_logo_light.svg',\n    dark: '\u002Flibrary\u002Fyour_logo_dark.svg'\n  },\n  wordmark: {\n    light: '\u002Flibrary\u002Fyour_logo_wordmark_light.svg',\n    dark: '\u002Flibrary\u002Fyour_logo_wordmark_dark.svg'\n  },\n  url: 'Website'\n}\n```\n\n- **Add brand guidelines** (where to find the images, how to use it, colors, fonts...):\n\n```ts\n{\n  title: 'Title',\n  category: 'Category',\n  route: '\u002Flibrary\u002Fyour_logo.svg',\n  wordmark: '\u002Flibrary\u002Fyour_logo_wordmark.svg',\n  brandUrl: 'https:\u002F\u002Fassets.website.com\u002Fbrand-guidelines',\n  url: 'Website'\n}\n```\n\n- **Add Loftlyy brand URL**:\n\n[Loftlyy](https:\u002F\u002Fwww.loftlyy.com) is a brand identity reference site — discover and explore brand colors, typography, logos, and design systems. Created by [preetsuthar17](https:\u002F\u002Fx.com\u002Fpreetsuthar17).\n\n```ts\n{\n  title: 'Title',\n  category: 'Category',\n  route: '\u002Flibrary\u002Fyour_logo.svg',\n  wordmark: '\u002Flibrary\u002Fyour_logo_wordmark.svg',\n  loftlyyUrl: 'https:\u002F\u002Fwww.loftlyy.com\u002Fen\u002Fbrand-name',\n  url: 'Website'\n}\n```\n\n> [!NOTE]\n>\n> - The list of categories is here: [`src\u002Ftypes\u002Fcategories.ts`](https:\u002F\u002Fgithub.com\u002Fpheralb\u002Fsvgl\u002Fblob\u002Fmain\u002Fsrc\u002Ftypes\u002Fcategories.ts). You can add a new category if you need it.\n> - You can add multiple categories to the same logo, for example: `category: ['Social', 'Design']`.\n\nAnd create a pull request with your logo ✨.\n\n## 🧑‍🚀 Getting Started with API\n\n> [!WARNING]\n> This section is how to run API locally. For all API endpoints, check the [**API documentation**](https:\u002F\u002Fsvgl.app\u002Fapi).\n\n1. Go to the [**`api-routes`**](https:\u002F\u002Fgithub.com\u002Fpheralb\u002Fsvgl\u002Ftree\u002Fmain\u002Fapi-routes) folder and install the dependencies with [pnpm](https:\u002F\u002Fpnpm.io\u002F):\n\n```bash\ncd api-routes\npnpm install\n```\n\n2. Create a `.dev.vars` env file in the `api-routes` folder with the following variables:\n\n```bash\n# .dev.vars\nSVGL_API_REQUESTS = 1\nUPSTASH_REDIS_URL = \"\"\nUPSTASH_REDIS_TOKEN = \"\"\n```\n\n- [Create a Upstash account](https:\u002F\u002Fconsole.upstash.com\u002F).\n- [Create a Upstash Redis Database](https:\u002F\u002Fupstash.com\u002Fdocs\u002Fredis\u002Foverall\u002Fgetstarted).\n\n3. Run the development server:\n\n```bash\npnpm dev\n```\n\n## ✌️ Contributing\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fpheralb\u002Fsvgl\u002Fgraphs\u002Fcontributors\">\n  \u003Cimg src=\"https:\u002F\u002Fcontrib.rocks\u002Fimage?repo=pheralb\u002Fsvgl\" \u002F>\n\u003C\u002Fa>\n\n\u003Cp>\u003C\u002Fp>\n\n## 🔑 License\n\n- [MIT](https:\u002F\u002Fgithub.com\u002Fpheralb\u002Fsvgl\u002Fblob\u002Fmain\u002FLICENSE).\n","svgl 是一个提供 SVG 标志的美观库，使用 Sveltekit 和 Tailwind CSS 构建。该项目支持高质量、优化过的 SVG 图标，适合需要在网站或应用中集成矢量图形标志的各种场景。它具备易于使用的 API 以及社区开发的扩展工具如 SVGL CLI，便于开发者快速将图标添加到项目中。基于 TypeScript 编写，确保了代码的质量与类型安全。MIT 许可证下开放源码，鼓励贡献和赞助以支持项目的持续发展。",2,"2026-06-11 03:37:25","high_star"]