应用图标 SVG

📚一个拥有 SVG 徽标的美丽图书馆。使用 Sveltekit 与 Tailwind CSS 构建。

国外版

国内版

GitHub

🛠️ 堆栈

项目中使用到的技术

• Sveltekit - 简化的 Web 开发框架。

• 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 的风格独特的通知组件。

• @svgr/core - 将 SVG 转换为 React 组件的 Node.js 工具。

• @upstash/redis + @upstash/ratelimit - 面向开发者的无服务器 Redis。

• Vitest - 极快的单元测试框架。

📜 添加 SVG

前往 src/data/svgs.ts ，并按照以下结构添加关于您 logo 的信息

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

您可以将多个类别添加到同一个徽标中，例如： "category": ["Social", "Design"] 。

简单标志

{
  "title": "Title",
  "category": "Category",
  "route": "/library/your_logo.svg",
  "url": "Website"
}

Logo + 词标版本

{
  "title": "Title",
  "category": "Category",
  "route": "/library/your_logo.svg",
  "wordmark": "/library/your_logo_wordmark.svg",
  "url": "Website"
}

Logo + 词标 & 轻模式 + 暗模式

{
  "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"
}

开启 API

在项目根目录中创建一个 .env 文件，其中包含以下变量

• 创建一个 Upstash 账户

• 创建一个 Upstash Redis 数据库

SVGL_API_REQUESTS = 1
UPSTASH_REDIS_URL = ""
UPSTASH_REDIS_TOKEN = ""