svgl/README.md

Discover  ✦  Terminal  ✦  Submit logo  ✦  Stack  ✦  Contributing

🛠️ Stack

• Sveltekit - Web development, streamlined.
• Typescript - JavaScript with syntax for types.
• Tailwindcss - A utility-first CSS framework for rapidly building custom designs.
• 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.
• Vitest - Blazing Fast Unit Test Framework.

🚀 Getting Started

You will need:

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

1. Clone or fork this repository:

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

2. Install dependencies:

# with pnpm (recommended):
pnpm install

# with npm:
npm 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 20kb.

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. If you want to add a new category, you can do it.

And create a pull request with your logo 🚀.

✌️ Contributing

🔑 License

• MIT.