svgl/README.md

Discover  ✦  Submit logo  ✦  Terminal  ✦  Contact  ✦  Contributing

🛠️ Stack

• 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 className strings 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.
• @upstash/redis + @upstash/ratelimit - Serverless Redis for developers.
• Vitest - Blazing Fast Unit Test Framework.

🚀 Getting Started

You will need:

• Node.js 16+ (recommended 18 LTS).
• Git.

1. Fork this repository and clone it locally:

git clone git@github.com:your_username/svgl.git

2. Install dependencies:

# Install pnpm globally if you don't have it:
npm install -g pnpm

# and install dependencies:
pnpm install

3. Go to the static/library folder and add your .svg logo.

Warning

• Remember to optimize SVG for web, you can use SVGOMG.
• The size limit for each .svg is 25kb.

4. Go to the src/data/svgs.ts and add the information about your logo, following the structure:

{
  "title": "Title",
  "category": "Category",
  "route": "/library/your_logo.svg",
  "url": "Website"
},

or to support a different logo for light and dark themes:

{
  "title": "Title",
  "category": "Category",
  "route": {
    "light": "/library/your_logo_light.svg",
    "dark": "/library/your_logo_dark.svg"
  },
  "url": "Website"
},

Note

The list of categories is here: src/types/categories.ts. You can add a new category if you need it.

And create a pull request with your logo 🚀.

5. (Optional) If you want to run the API locally, you will need to create a .env file in the root of the project with the following variables:

• Create a Upstash account.

SVGL_API_REQUESTS = 1
UPSTASH_REDIS_URL = ""
UPSTASH_REDIS_TOKEN = ""

💻 Terminal

SVG files can also be accessed directly from the terminal using svgls CLI.

Quick start

If you are using yarn or npm, run this command:

npx svgls add
# or
pnpm dlx svgls add

For more details, check out the GitHub repository created by sujjeee.

✌️ Contributing

🔑 License

• MIT.