mirror of
https://github.com/pheralb/svgl.git
synced 2024-10-03 22:46:20 +08:00
📚一个拥有 SVG 徽标的美丽图书馆。使用 Sveltekit 与 Tailwind CSS 构建。
https://svgl.app/
.github | ||
.vscode | ||
api-routes | ||
src | ||
static | ||
utils | ||
.eslintignore | ||
.gitignore | ||
.npmrc | ||
.prettierignore | ||
components.json | ||
eslint.config.js | ||
LICENSE | ||
package.json | ||
pnpm-lock.yaml | ||
postcss.config.js | ||
prettier.config.mjs | ||
README.md | ||
svelte.config.js | ||
tailwind.config.ts | ||
tsconfig.json | ||
vercel.json | ||
vite.config.ts |
🛠️ Stack
- Sveltekit - Web development, streamlined.
- Typescript - JavaScript with syntax for types.
- mdsvex - Markdown for Svelte apps.
- Shiki - A beautiful Syntax Highlighter.
- Tailwindcss - A utility-first CSS framework for rapidly building custom designs.
- bits-ui - A collection of headless components for Svelte.
- clsx + tailwind-merge inspired by shadcn/ui - A tiny utility for constructing
className
strings conditionally. - 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.
- @svgr/core - Node.js utility to transform SVGs into React components.
- @upstash/redis + @upstash/ratelimit - Serverless Redis for developers.
- Vitest - Blazing Fast Unit Test Framework.
🚀 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:
- Fork this repository and clone it locally:
git clone git@github.com:your_username/svgl.git
- Install dependencies:
# Install pnpm globally if you don't have it:
npm install -g pnpm
# and install dependencies:
pnpm install
- 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.
- 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 🚀.
- (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
- MIT.