📚一个拥有 SVG 徽标的美丽图书馆。使用 Sveltekit 与 Tailwind CSS 构建。 https://svgl.app/
Go to file
pheralb 3ee9610f24
Some checks are pending
🧑‍🚀 Check / ⚡ Testing with Vitest (push) Waiting to run
🧑‍🚀 Check / 📦 SVGs Size (push) Waiting to run
🧑‍🚀 Check / 🛠️ Build app (push) Waiting to run
🚀 Deploy / API - Cloudflare Workers (push) Waiting to run
📦 Fix `oxc` svg
2024-10-02 10:29:44 +01:00
.github ⚙️ Update build command with env variables 2024-10-01 11:05:58 +01:00
.vscode 🔧 Update vscode settings. 2023-12-13 13:37:23 +00:00
api-routes 📦 Update /api-routes dependencies 2024-09-27 13:32:45 +01:00
src Add `void(0)` category 2024-10-02 10:24:28 +01:00
static 📦 Fix `oxc` svg 2024-10-02 10:29:44 +01:00
utils ⚙️ Update `pnpm-lock` for utils/fix-viewbox 2024-08-28 08:53:23 +01:00
.eslintignore 🧡 Initial commit with Sveltekit. 2023-03-14 21:08:22 +00:00
.gitignore 🙈 Add `.vercel folder to .gitignore` 2024-09-23 12:36:34 +01:00
.npmrc 🧡 Initial commit with Sveltekit. 2023-03-14 21:08:22 +00:00
.prettierignore 🧡 Initial commit with Sveltekit. 2023-03-14 21:08:22 +00:00
components.json ⚙️ Update `shadcn/svelte` config file 2024-08-26 16:50:55 +01:00
eslint.config.js ⚙️ Migrate eslint config to v9 2024-09-23 12:30:05 +01:00
LICENSE 📝 Update license. 2023-03-20 00:39:40 +00:00
package.json ⚙️ Update vite build command + workflow 2024-10-01 10:53:47 +01:00
pnpm-lock.yaml 📦 Add `rehype-autolink-headings, rehype-slug & remark-gfm` 2024-10-01 10:49:23 +01:00
postcss.config.js ⬆️ Upgrade tailwind & postcss config 2024-04-20 23:41:52 +01:00
prettier.config.mjs ⚙️ Upgrade prettier config to `.mjs` 2024-09-23 10:08:25 +01:00
README.md 📝 Update readme docs 2024-10-01 09:19:50 +01:00
svelte.config.js 🔧 Add custom markdown plugins 2024-10-01 10:49:43 +01:00
tailwind.config.ts 🎨 Update typography styles 2024-10-01 10:49:59 +01:00
tsconfig.json feat: add figma plugin 2023-12-23 15:43:54 +08:00
vercel.json 🍂 Add redirection to extensions 2024-04-20 20:28:04 +01:00
vite.config.ts 🚀 Initial sveltekit config. 2023-03-15 11:29:15 +00:00

Svelte Badge Hono Badge Build Status GitHub stars GitHub issues GitHub forks GitHub PRs

🛠️ 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 20kb.
  1. Go to the src/data/svgs.ts and add the information about your logo, following the structure:
  • Simple logo:
{
  "title": "Title",
  "category": "Category",
  "route": "/library/your_logo.svg",
  "url": "Website"
}
  • Logo + wordmark version:
{
  "title": "Title",
  "category": "Category",
  "route": "/library/your_logo.svg",
  "wordmark": "/library/your_logo_wordmark.svg",
  "url": "Website"
}
  • Logo + wordmark & light + dark mode:
{
  "title": "Title",
  "category": "Category",
  "route": {
    "light": "/library/your_logo_light.svg",
    "dark": "/library/your_logo_dark.svg"
  },
  "wordmark": {
    "light": "/library/your_wordmark-logo_light.svg",
    "dark": "/library/your_wordmark-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.
  • You can add multiple categories to the same logo, for example: "category": ["Social", "Design"].

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 GitHub Repository
SVGL for Figma Add svgs from svgl to your Figma project. quilljou Figma Plugin
SVGL for Raycast Search SVG logos via svgl. 1weiho Raycast Store
SVGL for VSCode SVGL directly in your VSCode. girlazote VSCode Marketplace
SVGL Badge A beautiful badges with svgl SVG logos. ridemountainpig Svgl Badge

✌️ Contributing

🔑 License