qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2025-12-29 08:01:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
Files
55199765beff1153b643d44ea5a7964096d6c98f
svgl/README.md
T

203 lines
11 KiB
Markdown
Raw Blame History

<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">
Explore
</a>
<span>&nbsp;✦&nbsp;</span>
<a href="https://github.com/pheralb/svgl/issues/new?assignees=&labels=request&projects=&template=request-svg.yml&title=%5B%F0%9F%94%94+Request+SVG%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">
![Svelte Badge](https://img.shields.io/badge/Sveltekit-FF3E00?logo=svelte&logoColor=fff&style=flat)
![Hono Badge](https://img.shields.io/badge/Hono-E36002?logo=hono&logoColor=fff&style=flat)
![Svelte Badge](https://img.shields.io/badge/Upstash-121212?logo=upstash&logoColor=#00C786&style=flat)
[![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fpheralb%2Fsvgl%2Fbadge%3Fref%3Dmain&style=flat)](https://actions-badge.atrox.dev/pheralb/svgl/goto?ref=main)
![GitHub stars](https://img.shields.io/github/stars/pheralb/svgl)
![GitHub forks](https://img.shields.io/github/forks/pheralb/svgl)
![GitHub issues](https://img.shields.io/github/issues/pheralb/svgl)
![GitHub PRs](https://img.shields.io/github/issues-pr/pheralb/svgl)
</div>
## 📦 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" /> | SVGL CLI | 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/react_light.svg" height="25" /> | SVGL for React | An open-source NPM package that offers a SVGL Logos for React. | [ridemountainpig](https://x.com/ridemountainpig) | [GitHub Repository](https://github.com/ridemountainpig/svgl-react?tab=readme-ov-file#svgl-react) |
| <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](https://x.com/selemondev) | [GitHub Repository](https://github.com/selemondev/svgl-vue?tab=readme-ov-file#--svgl-vue--) |
| <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](https://x.com/selemondev) | [GitHub Repository](https://github.com/selemondev/svgl-svelte#--svgl-svelte--) |
| <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/powertoys.svg" height="25" /> | SVGL for PowerToys | Search & copy SVG logos in PowerToys Run. | [SameerJS6](https://x.com/Sameerjs6) | [Website](https://svgl.sameerjs.com/) |
| <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) | [Website](https://svgl-badge.vercel.app/) |
| <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](https://x.com/serafimcloud) | [Website](https://21st.dev/magic) |
| <img src="/static/library/powershell.svg" height="25" /> | SVGL for PowerShell | PowerShell extension to quickly get svgl logos anywhere | [Bart Spaans](https://bsky.app/profile/bartspaans.bsky.social) | [GitHub](https://github.com/spaansba/SVGL-PowerShell) |
| <img src="/static/library/FlowLauncher.svg" height="25"> | SVGL for Flow Launcher | Search & copy SVG logos in Flow Launcher | [AF_Askar](https://x.com/Askar_AF) | [GitHub](https://github.com/abo3skr2019/SVGl-plugin) |
## 🛠️ 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 git@github.com: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 **21kb**.
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**:
```ts
{
title: 'Title',
category: 'Category',
route: '/library/your_logo.svg',
url: 'Website'
}
```
- **Logo + wordmark** version:
```ts
{
title: 'Title',
category: 'Category',
route: '/library/your_logo.svg',
wordmark: '/library/your_logo_wordmark.svg',
url: 'Website'
}
```
- **Logo + wordmark** & **light + dark mode**:
```ts
{
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'
}
```
- **Add brand guidelines**:
```ts
{
title: 'Title',
category: 'Category',
route: '/library/your_logo.svg',
wordmark: '/library/your_logo_wordmark.svg',
brandUrl: 'https://assets.website.com/brand-guidelines',
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 `.dev.vars` file in the [`/api-routes`](https://github.com/pheralb/svgl/tree/main/api-routes) folder 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 = ""
```
## ✌️ 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).
Reference in New Issue View Git Blame Copy Permalink