svgl

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

Icon set
pheralb/svglsvgl.app

README

svgl


🛠️ Stack


- [Sveltekit](https://kit.svelte.dev/) - Web development, streamlined.
- [Typescript](https://www.typescriptlang.org/) - JavaScript with syntax for types.
- [Tailwindcss](https://tailwindcss.com/) - A utility-first CSS framework for rapidly building custom designs.
- [Prettier](https://prettier.io/) + prettier-plugin-tailwindcss - An opinionated code formatter.
- [phosphor-svelte](https://github.com/haruaki07/phosphor-svelte) - A clean and friendly icon family for Svelte.
- [svelte-sonner](https://github.com/wobsoriano/svelte-sonner) - An opinionated toast component for Svelte.
- [Vitest](https://vitest.dev/) - Blazing Fast Unit Test Framework.

🚀 Getting Started


You will need:

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

1. Clone or fork this repository:

  1. ```bash
  2. git clone git@github.com:pheralb/svgl.git
  3. ```

2. Install dependencies with your favorite package manager:

  1. ```bash
  2. # with npm:
  3. npm install

  5. # with pnpm:
  6. pnpm install

  8. # with ultra:
  9. ultra install

  11. # with yarn:
  12. yarn install
  13. ```

3. Go to the [static/library](https://github.com/pheralb/svgl/blob/main/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](https://github.com/pheralb/svgl/blob/main/src/data/svgs.ts) and add the information about your logo, following the structure:

  1. ```json
  2. {
  3.   "title": "Title",
  4.   "category": "Category",
  5.   "route": "/library/your_logo.svg",
  6.   "url": "Website"
  7. },
  8. ```

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

  1. ```json
  2. {
  3.   "title": "Title",
  4.   "category": "Category",
  5.   "route": {
  6.     "light": "/library/your_logo_light.svg",
  7.     "dark": "/library/your_logo_dark.svg"
  8.   },
  9.   "url": "Website"
  10. },
  11. ```

And create a pull request with your logo 🚀.

✌️ Contributing



🔑 License


- MIT.