mirror of
https://github.com/pheralb/svgl.git
synced 2025-12-29 08:01:36 +08:00
📝 Update readme, add getting-started with API, improve header links & add framer extension
This commit is contained in:
pheralb
@@ -10,25 +10,29 @@
|
|||||||
Explore
|
Explore
|
||||||
</a>
|
</a>
|
||||||
<span> ✦ </span>
|
<span> ✦ </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+">
|
<a href="https://github.com/sponsors/pheralb">
|
||||||
Request logo
|
Sponsor this project
|
||||||
</a>
|
</a>
|
||||||
<span> ✦ </span>
|
<span> ✦ </span>
|
||||||
<a href="#-getting-started">
|
<a href="#-getting-started">
|
||||||
Submit logo
|
Getting Started
|
||||||
</a>
|
</a>
|
||||||
<span> ✦ </span>
|
<span> ✦ </span>
|
||||||
<a href="#-extensions">
|
<a href="https://svgl.app/extensions" target="_blank">
|
||||||
Extensions
|
Extensions
|
||||||
</a>
|
</a>
|
||||||
<span> ✦ </span>
|
<span> ✦ </span>
|
||||||
<a href="https://svgl.app/api">
|
<a href="#️-stack">
|
||||||
API
|
Stack
|
||||||
</a>
|
</a>
|
||||||
<span> ✦ </span>
|
<span> ✦ </span>
|
||||||
<a href="#%EF%B8%8F-contributing">
|
<a href="#️-contributing">
|
||||||
Contributing
|
Contributing
|
||||||
</a>
|
</a>
|
||||||
|
<span> ✦ </span>
|
||||||
|
<a href="#️-license">
|
||||||
|
License
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
@@ -48,50 +52,51 @@
|
|||||||
|
|
||||||
## 📦 Extensions
|
## 📦 Extensions
|
||||||
|
|
||||||
A list of extensions that use the [svgl API](https://svgl.app/api), created by the community:
|
A list of extensions that use the [**SVGL API**](https://svgl.app/docs/api), created by the community:
|
||||||
|
|
||||||
| | Extension | Description | Created by | Link |
|
| | 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/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/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](https://x.com/krishnasinghdev) | [Framer Marketplace](https://www.framer.com/marketplace/plugins/svgl/) |
|
||||||
| <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/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/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/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/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/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/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/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/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/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://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://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/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://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="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="/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="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/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) |
|
| <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 Repository](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 Repository](https://github.com/abo3skr2019/SVGl-plugin) |
|
||||||
|
|
||||||
## 🛠️ Stack
|
## 🛠️ Stack
|
||||||
|
|
||||||
- [**Sveltekit**](https://kit.svelte.dev/) - Web development, streamlined.
|
- [**Sveltekit** + **Svelte 5**](https://kit.svelte.dev/) - Web development, streamlined.
|
||||||
- [**Typescript**](https://www.typescriptlang.org/) - JavaScript with syntax for types.
|
- [**Typescript**](https://www.typescriptlang.org/) - JavaScript with syntax for types.
|
||||||
- [**mdsvex**](https://mdsvex.com/) - Markdown for Svelte apps.
|
- [**Content-Collections**](https://www.content-collections.dev/) - Transform your content into type-safe data collections and say goodbye to manual data fetching and parsing.
|
||||||
- [**Shiki**](https://github.com/shikijs/shiki) - A beautiful Syntax Highlighter.
|
- [**Shiki**](https://github.com/shikijs/shiki) - A beautiful Syntax Highlighter.
|
||||||
- [**Tailwindcss**](https://tailwindcss.com/) - A utility-first CSS framework for rapidly building custom designs.
|
- [**Tailwind CSS**](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.
|
- [**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.
|
- [**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.
|
- [**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.
|
- [**Lucide Icons**](https://lucide.dev/) - Beautiful &
|
||||||
|
consistent icons.
|
||||||
- [**svelte-sonner**](https://github.com/wobsoriano/svelte-sonner) - An opinionated toast component for Svelte.
|
- [**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.
|
- [**Hono**](https://hono.dev/) - Fast, lightweight, built on Web Standards. Support for any JavaScript runtime.
|
||||||
- [**@upstash/redis** + **@upstash/ratelimit**](https://upstash.com/) - Serverless Redis for developers.
|
- [**@upstash/redis** + **@upstash/ratelimit**](https://upstash.com/) - Serverless Redis for developers.
|
||||||
- [**Vitest**](https://vitest.dev/) - Blazing Fast Unit Test Framework.
|
|
||||||
|
|
||||||
## 🚀 Getting Started
|
## 🚀 Getting Started
|
||||||
|
|
||||||
> [!IMPORTANT]
|
> [!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.
|
> 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:
|
You will need:
|
||||||
|
|
||||||
- [Node.js 18+ (recommended 20 LTS)](https://nodejs.org/en/).
|
- [Node.js 20+](https://nodejs.org/en/).
|
||||||
- [Git](https://git-scm.com/).
|
- [Git](https://git-scm.com/).
|
||||||
|
|
||||||
1. [Fork](https://github.com/pheralb/svgl/fork) this repository and clone it locally:
|
1. [**Fork this repository**](https://github.com/pheralb/svgl/fork) and clone it locally:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
git clone git@github.com:your_username/svgl.git
|
git clone git@github.com:your_username/svgl.git
|
||||||
@@ -128,7 +133,7 @@ pnpm install
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
- **Logo + wordmark** version:
|
- **Simple logo + wordmark**:
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
{
|
{
|
||||||
@@ -140,7 +145,35 @@ pnpm install
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
- **Logo + wordmark** & **light + dark mode**:
|
- **Logo (light & dark mode)**:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
{
|
||||||
|
title: 'Title',
|
||||||
|
category: 'Category',
|
||||||
|
route: {
|
||||||
|
light: '/library/your_logo_light.svg',
|
||||||
|
dark: '/library/your_logo_dark.svg'
|
||||||
|
},
|
||||||
|
url: 'Website'
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- **Wordmark (light & dark mode)**:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
{
|
||||||
|
title: 'Title',
|
||||||
|
category: 'Category',
|
||||||
|
wordmark: {
|
||||||
|
light: '/library/your_logo_light.svg',
|
||||||
|
dark: '/library/your_logo_dark.svg'
|
||||||
|
},
|
||||||
|
url: 'Website'
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
- **Full example with all properties**:
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
{
|
{
|
||||||
@@ -151,14 +184,14 @@ pnpm install
|
|||||||
dark: '/library/your_logo_dark.svg'
|
dark: '/library/your_logo_dark.svg'
|
||||||
},
|
},
|
||||||
wordmark: {
|
wordmark: {
|
||||||
light: '/library/your_wordmark-logo_light.svg',
|
light: '/library/your_logo_wordmark_light.svg',
|
||||||
dark: '/library/your_wordmark-logo_dark.svg'
|
dark: '/library/your_logo_wordmark_dark.svg'
|
||||||
},
|
},
|
||||||
url: 'Website'
|
url: 'Website'
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
- **Add brand guidelines**:
|
- **Add brand guidelines** (where to find the images, how to use it, colors, fonts...):
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
{
|
{
|
||||||
@@ -176,17 +209,36 @@ pnpm install
|
|||||||
> - 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.
|
> - 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']`.
|
> - You can add multiple categories to the same logo, for example: `category: ['Social', 'Design']`.
|
||||||
|
|
||||||
And create a pull request with your logo 🚀.
|
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:
|
## 🧑🚀 Getting Started with API
|
||||||
|
|
||||||
|
> [!WARNING]
|
||||||
|
> This section is how to run API locally. For all API endpoints, check the [**API documentation**](https://svgl.app/api).
|
||||||
|
|
||||||
|
1. Go to the [**`api-routes`**](https://github.com/pheralb/svgl/tree/main/api-routes) folder and install the dependencies with [pnpm](https://pnpm.io/):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd api-routes
|
||||||
|
pnpm install
|
||||||
|
```
|
||||||
|
|
||||||
|
2. Create a `.dev.vars` env file in the `api-routes` folder with the following variables:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# .dev.vars
|
||||||
|
SVGL_API_REQUESTS = 1
|
||||||
|
UPSTASH_REDIS_URL = ""
|
||||||
|
UPSTASH_REDIS_TOKEN = ""
|
||||||
|
```
|
||||||
|
|
||||||
- [Create a Upstash account](https://console.upstash.com/).
|
- [Create a Upstash account](https://console.upstash.com/).
|
||||||
- [Create a Upstash Redis Database](https://upstash.com/docs/redis/overall/getstarted).
|
- [Create a Upstash Redis Database](https://upstash.com/docs/redis/overall/getstarted).
|
||||||
|
|
||||||
|
3. Run the development server:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
SVGL_API_REQUESTS = 1
|
pnpm dev
|
||||||
UPSTASH_REDIS_URL = ""
|
|
||||||
UPSTASH_REDIS_TOKEN = ""
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## ✌️ Contributing
|
## ✌️ Contributing
|
||||||
|
|||||||
Reference in New Issue
Block a user