svgl

GitHub 星标 GitHub 问题 GitHub 分支 GitHub PR

</div>

🛠️ 技术栈

Sveltekit - 简化的网络开发。
Typescript - 带有类型语法的 JavaScript。
mdsvex - Svelte 应用的 Markdown。
Shiki - 漂亮的语法高亮器。
Tailwindcss - 用于快速构建自定义设计的实用优先 CSS 框架。
bits-ui - Svelte 的无头组件集合。
clsx + tailwind-merge 灵感来自 shadcn/ui - 用于有条件构建 className 字符串的小型实用程序。
Prettier + prettier-plugin-tailwindcss - 一个固执己见的代码格式化工具。
Lucide Icons + phosphor-svelte - 清晰友好的图标库。
svelte-sonner - Svelte 的固执己见的 toast 组件。
@svgr/core - 将 SVG 转换为 React 组件的 Node.js 实用程序。
@upstash/redis + @upstash/ratelimit - 面向开发者的无服务器 Redis。
Vitest - 极速单元测试框架。

🚀 入门指南

[!重要] 在提交 SVG 之前，请确保您有权限或 SVG 的许可证允许您将其添加到 svgl。如果您不确定，请联系公司或作者。

您需要：

Node.js 16+（推荐 18 LTS）。
Git。

Fork 此仓库并在本地克隆：

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

安装依赖：

# 如果您没有 pnpm，请全局安装：
npm install -g pnpm

# 然后安装依赖：
pnpm install

转到 static/library 文件夹并添加您的 .svg 标志。

[!警告]

记得为网页优化SVG，你可以使用 SVGOMG。

在优化SVG时，确保不要删除 viewBox 属性。

每个 .svg 文件的大小限制为 20kb。

转到 src/data/svgs.ts 并按照以下结构添加你的logo信息：

如果logo是纯色的：

{
  "title": "标题",
  "category": "类别",
  "route": "/library/your_logo.svg",
  "url": "网站"
}

如果logo有logo+文字版本：

{
  "title": "标题",
  "category": "类别",
  "route": "/library/your_logo.svg",
  "wordmark": "/library/your_logo_wordmark.svg",
  "url": "网站"
}

如果logo/文字版有明暗模式：

{
  "title": "标题",
  "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": "网站"
}

[!注意]

类别列表在这里：src/types/categories.ts。如果需要，你可以添加新的类别。

你可以为同一个logo添加多个类别，例如："category": ["Social", "Design"]（每个logo最多3个类别）。

然后创建一个包含你的logo的拉取请求 🚀。

（可选）如果你想在本地运行 API，你需要在项目根目录创建一个 .env 文件，包含以下变量：

SVGL_API_REQUESTS = 1
UPSTASH_REDIS_URL = ""
UPSTASH_REDIS_TOKEN = ""

📦 扩展

以下是使用 svgl API 的扩展列表，由社区创建：

	扩展	描述	创建者	链接
<img src="https://yellow-cdn.veclightyear.com/835a84d5/f9152e2c-2e0c-4a53-bab5-da5d365f3d22.svg" height="25" />	svgls	一个用于轻松将SVG图标添加到项目中的CLI。	sujjeee	GitHub仓库
<img src="https://yellow-cdn.veclightyear.com/835a84d5/d1885c43-12b8-4043-9d6a-13c0f6bb287a.svg" height="25" />	SVGL for Figma	将svgl中的svg添加到你的Figma项目中。	quilljou	Figma插件
<img src="https://yellow-cdn.veclightyear.com/835a84d5/c0be787f-94c3-49d6-b8a2-6477ce2db250.svg" height="25" />	SVGL for Raycast	通过svgl搜索SVG logo。	1weiho	Raycast商店
<img src="https://yellow-cdn.veclightyear.com/835a84d5/be1bca8b-7d12-4531-ae4b-5a9d4aa18845.svg" height="25" />	SVGL for VSCode	直接在VSCode中使用SVGL。	girlazote	VSCode市场
<img src="https://svgl-badge.vercel.app/api/Library/Svgl?theme=light" height="25" />	SVGL Badge	带有svgl SVG logo的精美徽章。	ridemountainpig	Svgl Badge