- Sveltekit - Web development, streamlined.
- Typescript - JavaScript with syntax for types.
- mdsvex - Markdown for Svelte apps.
- Shiki - A beautiful Syntax Highlighter.
- Tailwindcss - A utility-first CSS framework for rapidly building custom designs.
- bits-ui - A collection of headless components for Svelte.
- clsx + tailwind-merge inspired by shadcn/ui - A tiny utility for constructing
classNamestrings conditionally. - Prettier + prettier-plugin-tailwindcss - An opinionated code formatter.
- Lucide Icons + phosphor-svelte - A clean and friendly icons libraries.
- svelte-sonner - An opinionated toast component for Svelte.
- @svgr/core - Node.js utility to transform SVGs into React components.
- @upstash/redis + @upstash/ratelimit - Serverless Redis for developers.
- Vitest - Blazing Fast Unit Test Framework.
Important
Before submitting the SVG, make sure that you have permission or that the license of the SVG allow 8000 s you to add it to svgl. If you are not sure, please contact the company or author.
You will need:
- Fork this repository and clone it locally:
git clone git@github.com:your_username/svgl.git- Install dependencies:
# Install pnpm globally if you don't have it:
npm install -g pnpm
# and install dependencies:
pnpm install- Go to the
static/libraryfolder and add your.svglogo.
Warning
- Remember to optimize SVG for web, you can use SVGOMG.
- When you optimize the SVG, make sure that the
viewBoxis not removed. - The size limit for each .svg is 20kb.
- Go to the
src/data/svgs.tsand add the information about your logo, following the structure:
- Simple logo:
{
"title": "Title",
"category": "Category",
"route": "/library/your_logo.svg",
"url": "Website"
}- Logo + wordmark version:
{
"title": "Title",
"category": "Category",
"route": "/library/your_logo.svg",
"wordmark": "/library/your_logo_wordmark.svg",
"url": "Website"
}- Logo + wordmark & light + dark mode:
{
"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:
{
"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. 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 🚀.
- (Optional) If you want to run the API locally, you will need to create a
.envfile in the root of the project with the following variables:
SVGL_API_REQUESTS = 1
UPSTASH_REDIS_URL = ""
UPSTASH_REDIS_TOKEN = ""A list of extensions that use the svgl API, created by the community:
| Extension | Description | Created by | Link | |
|---|---|---|---|---|
| svgls | A CLI for easily adding SVG icons to your project. | sujjeee | GitHub Repository | |
| SVGL for Figma | Add svgs from svgl to your Figma project. | quilljou | Figma Plugin | |
| SVGL for Raycast | Search SVG logos via svgl. | 1weiho | Raycast Store | |
| SVGL for VSCode | SVGL directly in your VSCode. | girlazote | VSCode Marketplace | |
| SVGL Badge | A beautiful badges with svgl SVG logos. | ridemountainpig | Svgl Badge |
- MIT.