Initial commit
This commit is contained in:
Zhongwei Li
90
skills/llm-icon-finder/SKILL.md
Normal file
90
skills/llm-icon-finder/SKILL.md
Normal file
@@ -0,0 +1,90 @@
|
||||
---
|
||||
name: llm-icon-finder
|
||||
description: Finding and accessing AI/LLM model brand icons from lobe-icons library. Use when users need icon URLs, want to download brand logos for AI models/providers/applications (Claude, GPT, Gemini, etc.), or request icons in SVG/PNG/WEBP formats.
|
||||
---
|
||||
|
||||
# Finding AI/LLM Brand Icons
|
||||
|
||||
Access AI/LLM model brand icons and logos from the [lobe-icons](https://github.com/lobehub/lobe-icons) library. The library contains 100+ icons for models (Claude, GPT, Gemini), providers (OpenAI, Anthropic, Google), and applications (ComfyUI, LobeChat).
|
||||
|
||||
## Icon Formats and Variants
|
||||
|
||||
**Available formats**: SVG (scalable), PNG (raster), WEBP (compressed)
|
||||
**Theme variants**: light, dark, and color (some icons)
|
||||
|
||||
## CDN URL Patterns
|
||||
|
||||
Construct URLs using these patterns:
|
||||
|
||||
```
|
||||
# SVG
|
||||
https://raw.githubusercontent.com/lobehub/lobe-icons/refs/heads/master/packages/static-svg/{light|dark}/{icon-name}.svg
|
||||
|
||||
# PNG
|
||||
https://raw.githubusercontent.com/lobehub/lobe-icons/refs/heads/master/packages/static-png/{light|dark}/{icon-name}.png
|
||||
|
||||
# WEBP
|
||||
https://raw.githubusercontent.com/lobehub/lobe-icons/refs/heads/master/packages/static-webp/{light|dark}/{icon-name}.webp
|
||||
|
||||
# Color variant (append -color to icon-name)
|
||||
https://raw.githubusercontent.com/lobehub/lobe-icons/refs/heads/master/packages/static-png/dark/{icon-name}-color.png
|
||||
```
|
||||
|
||||
**Icon naming convention**: Lowercase, hyphenated (e.g., `claude`, `chatglm`, `openai`, `huggingface`)
|
||||
|
||||
## Workflow
|
||||
|
||||
When users request icons:
|
||||
|
||||
1. Identify icon name (usually lowercase company/model name, hyphenated if multi-word)
|
||||
2. Determine format (default: PNG) and theme (default: dark)
|
||||
3. Construct CDN URL using pattern above
|
||||
4. Provide URL to user
|
||||
5. If download requested, use Bash tool with curl
|
||||
6. Include web viewer link: `https://lobehub.com/icons/{icon-name}`
|
||||
|
||||
## Finding Icon Names
|
||||
|
||||
**Common icons**: See `references/icons-list.md` for comprehensive list organized by category (Models, Providers, Applications, Chinese AI)
|
||||
|
||||
**Uncertain names**:
|
||||
- Browse https://lobehub.com/icons
|
||||
- Try variations (e.g., company name vs product name: `alibaba` vs `alibabacloud`)
|
||||
- Check for `-color` variants if standard URL fails
|
||||
|
||||
**Chinese AI models**: Support Chinese queries (e.g., "智谱" → `chatglm`, "月之暗面" → `moonshot`)
|
||||
|
||||
## Examples
|
||||
|
||||
**Single icon request**:
|
||||
```
|
||||
User: "Claude icon"
|
||||
→ Provide: https://raw.githubusercontent.com/lobehub/lobe-icons/refs/heads/master/packages/static-png/dark/claude.png
|
||||
→ Also mention color variant and web viewer link
|
||||
```
|
||||
|
||||
**Multiple icons download**:
|
||||
```bash
|
||||
curl -o openai.svg "https://raw.githubusercontent.com/lobehub/lobe-icons/.../dark/openai.svg"
|
||||
curl -o anthropic.svg "https://raw.githubusercontent.com/lobehub/lobe-icons/.../dark/anthropic.svg"
|
||||
```
|
||||
|
||||
**Chinese query**:
|
||||
```
|
||||
User: "找一下智谱的图标"
|
||||
→ Identify: 智谱 = ChatGLM → icon name: chatglm
|
||||
→ Provide URLs and mention related icons (zhipu, codegeex)
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
If URL returns 404:
|
||||
1. Try `-color` suffix variant
|
||||
2. Check alternate naming (e.g., `chatgpt` vs `gpt`, `google` vs `gemini`)
|
||||
3. Direct user to https://lobehub.com/icons to browse
|
||||
4. Search repository: https://github.com/lobehub/lobe-icons
|
||||
|
||||
## Reference Files
|
||||
|
||||
- `references/icons-list.md` - Comprehensive list of 100+ available icons by category
|
||||
- `references/developer-info.md` - npm installation and React usage examples
|
||||
47
skills/llm-icon-finder/references/developer-info.md
Normal file
47
skills/llm-icon-finder/references/developer-info.md
Normal file
@@ -0,0 +1,47 @@
|
||||
# Developer Information
|
||||
|
||||
This file contains additional information for developers who want to use lobe-icons in their projects.
|
||||
|
||||
## npm Installation
|
||||
|
||||
Icons can be installed as npm packages:
|
||||
|
||||
```bash
|
||||
# React components
|
||||
npm install @lobehub/icons
|
||||
|
||||
# Static SVG files
|
||||
npm install @lobehub/icons-static-svg
|
||||
|
||||
# Static PNG files
|
||||
npm install @lobehub/icons-static-png
|
||||
|
||||
# Static WEBP files
|
||||
npm install @lobehub/icons-static-webp
|
||||
|
||||
# React Native
|
||||
npm install @lobehub/icons-rn
|
||||
```
|
||||
|
||||
## Usage in React
|
||||
|
||||
```tsx
|
||||
import { Claude, OpenAI, Gemini } from '@lobehub/icons';
|
||||
|
||||
function MyComponent() {
|
||||
return (
|
||||
<div>
|
||||
<Claude size={48} />
|
||||
<OpenAI size={48} />
|
||||
<Gemini size={48} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Additional Resources
|
||||
|
||||
- **Icon Gallery**: https://lobehub.com/icons
|
||||
- **GitHub Repository**: https://github.com/lobehub/lobe-icons
|
||||
- **Documentation**: https://icons.lobehub.com
|
||||
- **NPM Packages**: https://www.npmjs.com/search?q=%40lobehub%2Ficons
|
||||
87
skills/llm-icon-finder/references/icons-list.md
Normal file
87
skills/llm-icon-finder/references/icons-list.md
Normal file
@@ -0,0 +1,87 @@
|
||||
# Common AI/LLM Icons Reference
|
||||
|
||||
This file contains a comprehensive list of popular AI/LLM icons available in the lobe-icons library.
|
||||
|
||||
## Models
|
||||
|
||||
| Icon Name | Description |
|
||||
|-----------|-------------|
|
||||
| `claude` | Anthropic Claude |
|
||||
| `chatgpt` | ChatGPT |
|
||||
| `gpt` | GPT models |
|
||||
| `gemini` | Google Gemini |
|
||||
| `llama` | Meta LLaMA |
|
||||
| `mistral` | Mistral AI |
|
||||
| `chatglm` | 智谱 ChatGLM |
|
||||
| `baichuan` | 百川 Baichuan |
|
||||
| `deepseek` | DeepSeek |
|
||||
| `qwen` | 通义千问 Qwen |
|
||||
| `yi` | 零一万物 Yi |
|
||||
| `aya` | Cohere Aya |
|
||||
|
||||
## Providers
|
||||
|
||||
| Icon Name | Description |
|
||||
|-----------|-------------|
|
||||
| `openai` | OpenAI |
|
||||
| `anthropic` | Anthropic |
|
||||
| `google` | Google |
|
||||
| `cohere` | Cohere |
|
||||
| `huggingface` | Hugging Face |
|
||||
| `openrouter` | OpenRouter |
|
||||
| `perplexity` | Perplexity |
|
||||
| `stability` | Stability AI |
|
||||
| `alibaba` | 阿里巴巴 Alibaba |
|
||||
| `alibabacloud` | 阿里云 Alibaba Cloud |
|
||||
| `tencent` | 腾讯 Tencent |
|
||||
| `baidu` | 百度 Baidu |
|
||||
| `zhipu` | 智谱 AI |
|
||||
| `moonshot` | 月之暗面 Moonshot (Kimi) |
|
||||
| `minimax` | MiniMax |
|
||||
| `zeroone` | 零一万物 01.AI |
|
||||
| `ai21` | AI21 Labs (Jamba) |
|
||||
|
||||
## Applications
|
||||
|
||||
| Icon Name | Description |
|
||||
|-----------|-------------|
|
||||
| `lobechat` | LobeChat |
|
||||
| `comfyui` | ComfyUI |
|
||||
| `automatic` | Automatic1111 (SD WebUI) |
|
||||
| `midjourney` | Midjourney |
|
||||
| `runway` | Runway |
|
||||
| `capcut` | CapCut |
|
||||
| `cline` | Cline |
|
||||
| `colab` | Google Colab |
|
||||
| `copilotkit` | CopilotKit |
|
||||
| `aistudio` | Google AI Studio |
|
||||
| `clipdrop` | Clipdrop |
|
||||
|
||||
## Chinese AI Providers & Models
|
||||
|
||||
| Icon Name | Chinese Name | Description |
|
||||
|-----------|--------------|-------------|
|
||||
| `chatglm` | 智谱清言 | ChatGLM |
|
||||
| `zhipu` | 智谱 | Zhipu AI |
|
||||
| `baichuan` | 百川 | Baichuan |
|
||||
| `deepseek` | 深度求索 | DeepSeek |
|
||||
| `moonshot` | 月之暗面 | Moonshot (Kimi) |
|
||||
| `minimax` | 稀宇科技 | MiniMax |
|
||||
| `zeroone` | 零一万物 | 01.AI |
|
||||
| `qwen` | 通义千问 | Qwen |
|
||||
| `yi` | 零一万物 | Yi |
|
||||
| `alibaba` | 阿里巴巴 | Alibaba |
|
||||
| `alibabacloud` | 阿里云 | Alibaba Cloud |
|
||||
| `tencent` | 腾讯 | Tencent |
|
||||
| `baidu` | 百度 | Baidu |
|
||||
| `ai360` | 360智脑 | 360 AI Brain |
|
||||
| `aimass` | 紫东太初 | AiMass |
|
||||
| `aihubmix` | 推理时代 | AiHubMix |
|
||||
| `codegeex` | — | CodeGeeX |
|
||||
|
||||
## Tips for Finding Icons
|
||||
|
||||
1. **Icon naming**: Usually lowercase, hyphenated (e.g., `anthropic`, `chatglm`)
|
||||
2. **Company vs Product**: Some have both (e.g., `alibaba` and `alibabacloud`, `zhipu` and `chatglm`)
|
||||
3. **Color variants**: Many icons have `-color` suffix for colored versions
|
||||
4. **Browse all**: Visit https://lobehub.com/icons to see the complete catalog
|
||||
Reference in New Issue
Block a user