add-landing-icons

分类: 文档与知识管理 | 上传者: smelloscope | 下载: 0 | 版本: v1.0（最新）

查找技术徽标/图标并将其添加到 Smello 文档登录页面。当用户想要添加新的集成卡、更新现有图标、替换占位符图标或刷新登陆页面上的“适用于”部分时使用。当用户说“为 X 添加徽标”、“为 X 查找图标”、“更新集成部分”或提及向登陆页面添加新库时也可使用。 --- # 添加登陆图标此技能可为技术品牌查找高质量的 SVG 徽标，并将其集成到 Smello 文档登陆页面中。 ## 所在位置 - **徽标文件**：`docs/assets/logos/*.svg` — 透明背景上的白色 SVG - **登陆页面模板**：`docs/overrides/home.html` — MkDocs Material 自定义主页模板 - **集成卡**：“使用”部分中的 `.integrations-grid` div 内 ## 查找徽标按此顺序尝试源 — 较早的源会产生更好、更一致的结果：### 1. 简单图标CDN（知名品牌最佳）````

更新日志: Source: GitHub https://github.com/smelloscope/smello

目录结构

当前层级: tree/main/.claude/skills/add-landing-icons/

📄 SKILL.md 4.2 KB

SKILL.md

---
name: add-landing-icons
description: >
  Find and add technology logos/icons to the Smello docs landing page.
  Use when the user wants to add a new integration card, update an existing icon,
  replace placeholder icons, or refresh the "Works With" section on the landing page.
  Also use when the user says things like "add a logo for X", "find an icon for X",
  "update the integrations section", or mentions adding a new library to the landing page.
---

# Add Landing Icons

This skill finds high-quality SVG logos for technology brands and integrates them into the Smello docs landing page.

## Where things live

- **Logo files**: `docs/assets/logos/*.svg` — white SVGs on transparent background
- **Landing page template**: `docs/overrides/home.html` — MkDocs Material custom home template
- **Integration cards**: Inside the `.integrations-grid` div in the "Works With" section

## Finding logos

Try sources in this order — earlier sources produce better, more consistent results:

### 1. Simple Icons CDN (best for well-known brands)

```
https://cdn.simpleicons.org/{slug}/white
```

Returns a white SVG ready to use. Slugs are lowercase brand names (e.g., `anthropic`, `googlecloud`, `python`). If you're unsure of the slug, check https://simpleicons.org/ or try common variations.

Some brands have been removed from Simple Icons (notably OpenAI and AWS as of 2025). If you get a 404, move to the next source.

### 2. Devicon (good for dev tools and frameworks)

```
https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/{name}/{name}-plain.svg
```

Also try `-original.svg` if `-plain.svg` doesn't exist. These SVGs have their own colors — you'll need to add `fill="#ffffff"` to the `<path>` elements to make them white.

### 3. SVG path data (for logos you know)

For well-known logos where you know the SVG path data (e.g., from having seen it before in Simple Icons or other sources), create the SVG directly:

```xml
<svg fill="#ffffff" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <title>Brand Name</title>
  <path d="..."/>
</svg>
```

### 4. Google Favicon API (PNG fallback)

```
https://www.google.com/s2/favicons?domain={domain}&sz=128
```

Returns a 128px PNG. Use this as a last resort — SVGs are preferred because they're crisp at any size and can be colored white. Some favicons are tiny or generic (readthedocs sites often return the RTD icon, not the project's icon).

### 5. For libraries without brand logos

Some Python libraries (like `requests` or `httpx`) don't have distinctive logos. Options:
- Use the Python logo (via Simple Icons slug `python`) as a stand-in
- Create a simple text-based SVG: `<text>Hx</text>` style
- Use the parent org's logo (e.g., Encode for httpx)

## Preparing logos

All logos in this project must be:
- **SVG format** (strongly preferred over PNG)
- **White fill** (`fill="#ffffff"`) for visibility on the dark `#2A2A2E` background
- **Clean**: no embedded styles that override the fill, no unnecessary metadata

To convert a colored SVG to white, add `fill="#ffffff"` to the root `<svg>` element or to individual `<path>` elements. Remove any existing `fill` attributes that would conflict.

## Adding to the landing page

Each integration card in `docs/overrides/home.html` follows this pattern:

```html
<div class="integration-card">
  <img class="ic-icon" src="assets/logos/{name}.svg" alt="{Name}"> {Display Name}
</div>
```

Cards live inside the `.integrations-grid` div. The CSS handles sizing (22x22px) and hover effects.

## Previewing changes

```bash
# Start the docs dev server
uv run mkdocs serve -a 127.0.0.1:8111

# Template changes in overrides/ may require a server restart
pkill -f "mkdocs serve"; uv run mkdocs serve -a 127.0.0.1:8111
```

Then open http://127.0.0.1:8111 and scroll to the "Works With" section. Use Cmd+Shift+R to hard-refresh if icons look stale.

## Example workflow

Adding a "Stripe" integration card:

1. Try: `curl -sL "https://cdn.simpleicons.org/stripe/white" -o docs/assets/logos/stripe.svg`
2. Verify it's a valid SVG: `head -1 docs/assets/logos/stripe.svg` (should start with `<svg`)
3. Add the card to `.integrations-grid` in `docs/overrides/home.html`
4. Preview in browser, restart mkdocs if needed

登录后下载/点赞/收藏 ❤ 52 | ★ 0

add-landing-icons

目录结构

SKILL.md

举报内容

提示