icon-retrieval

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Icon Search

图标搜索

This skill provides icon search and SVG string retrieval capabilities. It helps users find appropriate icons for various use cases including infographics, web development, design, and more.

该Skill提供图标搜索和SVG字符串检索功能，帮助用户为信息图表、Web开发、设计等多种场景找到合适的图标。

Purpose

用途

This skill helps discover available icons by:

Searching the icon library by keywords
Retrieving SVG strings directly for use in your projects
Providing icon metadata including names and URLs

该Skill通过以下方式帮助用户发现可用图标：

通过关键词搜索图标库
直接检索SVG字符串用于你的项目
提供包含名称和URL的图标元数据

How to Use

使用方法

Search for Icons

搜索图标

To search for icons, use the search script with a keyword or phrase:

bash

node ./scripts/search.js '<search_query>' [topK]

Parameters:

```
search_query
```
(required): The keyword or phrase to search for
```
topK
```
(optional): Maximum number of results to return (default: 5)

Examples:

bash

undefined

要搜索图标，请使用搜索脚本并传入关键词或短语：

bash

node ./scripts/search.js '<search_query>' [topK]

参数说明：

```
search_query
```
（必填）：用于搜索的关键词或短语
```
topK
```
（可选）：返回结果的最大数量（默认值：5）

示例：

bash

undefined

Search for document icons (default 5 results)

搜索文档类图标（默认返回5个结果）

node ./scripts/search.js 'document'

Search for security icons with top 10 results

搜索安全类图标并返回前10个结果

node ./scripts/search.js 'security' 10

Search for technology icons with top 20 results

搜索科技类图标并返回前20个结果

node ./scripts/search.js 'tech' 20

undefined

node ./scripts/search.js 'tech' 20

undefined

Understanding Results

结果说明

The script returns a JSON object containing:

```
query
```
: The search query used
```
topK
```
: Maximum number of results requested
```
count
```
: Actual number of results returned (may be less than topK)
```
results
```
: Array of icon objects, each containing:
- ```
url
```
  : The source URL of the icon
- ```
svg
```
  : The complete SVG string content

脚本会返回一个JSON对象，包含：

```
query
```
：使用的搜索查询词
```
topK
```
：请求返回的结果最大数量
```
count
```
：实际返回的结果数量（可能少于topK）
```
results
```
：图标对象数组，每个对象包含：
- ```
url
```
  ：图标的源URL
- ```
svg
```
  ：完整的SVG字符串内容

Workflow

使用流程

Identify the Icon Need: Determine what concept you want to represent with an icon (e.g., "security", "speed", "data")

Search for Icons: Run the search script with relevant keywords

bash

# Default search (returns up to 5 results)
node ./scripts/search.js 'security'

# Or specify a custom topK value
node ./scripts/search.js 'security' 10

Review Results: The script returns the requested number of matching icons with:
- Icon source URLs
- SVG content for preview or direct use
Use the Icon: Use the SVG content directly in your project (web pages, designs, infographics, etc.)

明确图标需求：确定你想用图标表达的概念（例如：“安全”、“速度”、“数据”）

搜索图标：使用相关关键词运行搜索脚本

bash

# 默认搜索（最多返回5个结果）
node ./scripts/search.js 'security'

# 或自定义topK值
node ./scripts/search.js 'security' 10

查看结果：脚本会返回指定数量的匹配图标，包含：
- 图标源URL
- 可用于预览或直接使用的SVG内容
使用图标：将SVG内容直接用于你的项目（网页、设计、信息图表等）

Important Notes

重要说明

Default Result Count: By default, the search returns up to 5 icons. You can customize this by providing the
```
topK
```
parameter
Customizable Results: Use the optional
```
topK
```
parameter to get more or fewer results (e.g.,
```
node ./scripts/search.js 'icon' 20
```
)
SVG Strings: The script returns complete SVG strings fetched from the icon service
Multiple Use Cases: Icons can be used in infographics, web development, design projects, and more

默认结果数量：搜索默认返回最多5个图标，可通过提供topK参数自定义该数量
可自定义结果数：使用可选的topK参数获取更多或更少的结果（例如：
```
node ./scripts/search.js 'icon' 20
```
）
SVG字符串：脚本会返回从图标服务获取的完整SVG字符串
多场景适用：图标可用于信息图表、Web开发、设计项目等多种场景

Output Format

输出格式

json

{
  "query": "document",
  "topK": 5,
  "count": 2,
  "results": [
    {
      "url": "https://example.com/icon1.svg",
      "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">...</svg>"
    },
    {
      "url": "https://example.com/icon2.svg",
      "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">...</svg>"
    }
  ]
}

json

{
  "query": "document",
  "topK": 5,
  "count": 2,
  "results": [
    {
      "url": "https://example.com/icon1.svg",
      "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">...</svg>"
    },
    {
      "url": "https://example.com/icon2.svg",
      "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">...</svg>"
    }
  ]
}

Error Handling

错误处理

The script handles various error scenarios:

Missing Query: If no search query is provided, returns usage instructions
Network Errors: If the icon service is unavailable, returns an error message
Empty Results: If no icons match the query, returns an empty results array with a warning
Invalid Response: If the API returns invalid data, returns an error message

该脚本可处理多种错误场景：

缺失查询词：若未提供搜索查询词，将返回使用说明
网络错误：若图标服务不可用，将返回错误信息
无匹配结果：若没有图标匹配查询词，将返回空结果数组并附带警告
无效响应：若API返回无效数据，将返回错误信息

Tips

小贴士

Use descriptive, single-word queries for best results
Try variations of keywords (e.g., "security", "secure", "shield")
Review the results to find the most appropriate icon for your needs
Icons can be used across various scenarios: infographics, web development, design, and more

使用描述性的单个关键词查询以获得最佳结果
尝试关键词的不同变体（例如：“security”、“secure”、“shield”）
查看结果以找到最符合你需求的图标
图标可用于多种场景：信息图表、Web开发、设计等