svgl/README.md
2023-12-28 11:35:45 +00:00

5.9 KiB

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

🛠️ Stack

🚀 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:

  1. Fork this repository and clone it locally:
git clone git@github.com: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.
  • When you optimize the SVG, make sure that the viewBox is not removed.
  • 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 = ""

📦 Extensions

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 Repository
SVGL for Figma Add svgs from svgl to your Figma project. quilljou Figma Plugin

✌️ Contributing

🔑 License