svgl - 开源SVG图标库集成品牌与技术Logo

发现 ✦ 请求标志 ✦ 提交标志 ✦ 扩展 ✦ API ✦ 贡献

GitHub 星标 GitHub 问题 GitHub 分支 GitHub PR

🛠️ 技术栈

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 的扩展列表，由社区创建：

扩展	描述	创建者	链接
svgls	一个用于轻松将SVG图标添加到项目中的CLI。	sujjeee	GitHub仓库
SVGL for Figma	将svgl中的svg添加到你的Figma项目中。	quilljou	Figma插件
SVGL for Raycast	通过svgl搜索SVG logo。	1weiho	Raycast商店
SVGL for VSCode	直接在VSCode中使用SVGL。	girlazote	VSCode市场
SVGL Badge	带有svgl SVG logo的精美徽章。	ridemountainpig	Svgl Badge

✌️ 贡献

🔑 许可证

MIT。