Skip to content
/ svgl Public
forked from pheralb/svgl

🧩 A beautiful library with SVG logos. Built with Sveltekit & Tailwind CSS.

License

Notifications You must be signed in to change notification settings

karbon0x/svgl

 
 

Repository files navigation

Svelte Badge Build Status GitHub stars GitHub issues GitHub forks GitHub PRs Tailwind CSS Badge

🛠️ Stack

🚀 Getting Started

You will need:

  1. Fork this repository and clone it locally:
git clone [email protected]:your_username/svgl.git
  1. Install dependencies:
# Install pnpm globally if you don't have it:
npm install -g pnpm

# and install dependencies:
pnpm install
  1. 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.
  1. 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 🚀.

  1. (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:
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

About

🧩 A beautiful library with SVG logos. Built with Sveltekit & Tailwind CSS.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Languages

  • TypeScript 56.1%
  • Svelte 35.8%
  • JavaScript 4.7%
  • HTML 1.9%
  • CSS 1.5%