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

🛠️ 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.
• phosphor-svelte - A clean and friendly icon family for Svelte.
• 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 your favorite package manager:

# with npm:
npm install

# with pnpm:
pnpm install

# with ultra:
ultra install

# with yarn:
yarn install

3. Go to the static/library folder and add your .svg logo. Remember to optimize SVG for web use, you can use SVGOMG.

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"
},

And create a pull request with your logo 🚀.

🖥️ 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 if you are using pnpm, run this command:

pnpm dlx svgls add 

For more details on installing and using svgls CLI, check out the GitHub repository: https://github.com/sujjeee/svgls

✌️ Contributing

🔑 License

• MIT.