Skip to content

Commit a0b64f1

Browse files
CopilotCopilot
authored
Add icon search skill for SVG retrieval across multiple use cases (#8)
1 parent 31a846f commit a0b64f1

3 files changed

Lines changed: 211 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@ npx skills add antvis/chart-visualization-skills
3131

3232
`Infographic Creator` uses AntV Infographic to transform data, information, and knowledge into a perceptible visual language. It combines visual design with data visualization, providing 50+ templates including lists, sequences, hierarchies, comparisons, relations, and charts. It compresses complex information with intuitive symbols to help audiences quickly understand and remember key points.
3333

34+
- **infographic-icon**: Search and retrieve icon SVG strings from icon library. Returns up to 5 matching icons by default (customizable).
35+
36+
`Icon Search` helps users find appropriate icons for various use cases including infographics, web development, design, and more. Search by keywords to discover available icons and retrieve their SVG strings directly. Each search returns up to 5 matching icons by default (customizable via topK parameter) with their URLs and complete SVG content.
37+
3438
- **narrative-text-visualization**: Generate structured narrative text visualizations from data using T8 schema.
3539

3640
`Narrative Text Visualization` (T8) transforms unstructured data into semantically rich narrative reports with entity labeling. It uses a declarative JSON Schema to describe data interpretation reports, making it easy for LLMs to generate structured articles with proper semantic markup. Perfect for creating data analysis reports, summaries, and insights documents with entities like metrics, values, trends, and dimensions properly labeled. Supports authentic data sources and provides lightweight, technology-agnostic rendering.

‎skills/infographic-icon/SKILL.md‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
---
2+
name: infographic-icon
3+
description: Search and retrieve icon SVG strings from icon library. Returns up to 5 matching icons by default, customizable via topK parameter.
4+
dependency:
5+
python: python>=3.6
6+
---
7+
8+
# Icon Search
9+
10+
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.
11+
12+
## Purpose
13+
14+
This skill helps discover available icons by:
15+
- Searching the icon library by keywords
16+
- Retrieving SVG strings directly for use in your projects
17+
- Providing icon metadata including names and URLs
18+
19+
## How to Use
20+
21+
### Search for Icons
22+
23+
To search for icons, use the search script with a keyword or phrase:
24+
25+
```bash
26+
python ./scripts/search.py '<search_query>' [topK]
27+
```
28+
29+
**Parameters:**
30+
- `search_query` (required): The keyword or phrase to search for
31+
- `topK` (optional): Maximum number of results to return (default: 5)
32+
33+
**Examples:**
34+
```bash
35+
# Search for document icons (default 5 results)
36+
python ./scripts/search.py 'document'
37+
38+
# Search for security icons with top 10 results
39+
python ./scripts/search.py 'security' 10
40+
41+
# Search for technology icons with top 20 results
42+
python ./scripts/search.py 'tech' 20
43+
```
44+
45+
### Understanding Results
46+
47+
The script returns a JSON object containing:
48+
- `query`: The search query used
49+
- `topK`: Maximum number of results requested
50+
- `count`: Actual number of results returned (may be less than topK)
51+
- `results`: Array of icon objects, each containing:
52+
- `url`: The source URL of the icon
53+
- `svg`: The complete SVG string content
54+
55+
## Workflow
56+
57+
1. **Identify the Icon Need**: Determine what concept you want to represent with an icon (e.g., "security", "speed", "data")
58+
59+
2. **Search for Icons**: Run the search script with relevant keywords
60+
```bash
61+
# Default search (returns up to 5 results)
62+
python ./scripts/search.py 'security'
63+
64+
# Or specify a custom topK value
65+
python ./scripts/search.py 'security' 10
66+
```
67+
68+
3. **Review Results**: The script returns the requested number of matching icons with:
69+
- Icon source URLs
70+
- SVG content for preview or direct use
71+
72+
4. **Use the Icon**: Use the SVG content directly in your project (web pages, designs, infographics, etc.)
73+
74+
## Important Notes
75+
76+
- **Default Result Count**: By default, the search returns up to 5 icons. You can customize this by providing the `topK` parameter
77+
- **Customizable Results**: Use the optional `topK` parameter to get more or fewer results (e.g., `python ./scripts/search.py 'icon' 20`)
78+
- **SVG Strings**: The script returns complete SVG strings fetched from the icon service
79+
- **Multiple Use Cases**: Icons can be used in infographics, web development, design projects, and more
80+
81+
## Output Format
82+
83+
```json
84+
{
85+
"query": "document",
86+
"topK": 5,
87+
"count": 2,
88+
"results": [
89+
{
90+
"url": "https://example.com/icon1.svg",
91+
"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">...</svg>"
92+
},
93+
{
94+
"url": "https://example.com/icon2.svg",
95+
"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">...</svg>"
96+
}
97+
]
98+
}
99+
```
100+
101+
## Error Handling
102+
103+
The script handles various error scenarios:
104+
105+
- **Missing Query**: If no search query is provided, returns usage instructions
106+
- **Network Errors**: If the icon service is unavailable, returns an error message
107+
- **Empty Results**: If no icons match the query, returns an empty results array with a warning
108+
- **Invalid Response**: If the API returns invalid data, returns an error message
109+
110+
## Tips
111+
112+
- Use descriptive, single-word queries for best results
113+
- Try variations of keywords (e.g., "security", "secure", "shield")
114+
- Review the results to find the most appropriate icon for your needs
115+
- Icons can be used across various scenarios: infographics, web development, design, and more

‎skills/infographic-icon/scripts/search.py‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
#!/usr/bin/env python3
2+
3+
"""
4+
Icon Search Script
5+
Searches for icons by keywords and retrieves their SVG strings
6+
7+
Usage: python search.py '<search_query>' [topK]
8+
Example: python search.py 'document'
9+
Example: python search.py 'document' 10
10+
"""
11+
12+
import sys
13+
import json
14+
import urllib.request
15+
import urllib.parse
16+
17+
18+
def search_icons(query, top_k=5):
19+
"""Search for icons and retrieve their SVG content"""
20+
# Build API URL
21+
params = urllib.parse.urlencode({'text': query, 'topK': top_k})
22+
api_url = f'https://www.weavefox.cn/api/open/v1/icon?{params}'
23+
24+
# Fetch icon URLs
25+
with urllib.request.urlopen(api_url) as response:
26+
data = json.loads(response.read())
27+
28+
if not data.get('status') or not data.get('data', {}).get('success'):
29+
raise Exception(data.get('message', 'API request failed'))
30+
31+
icon_urls = data['data']['data']
32+
33+
# Fetch SVG content for each icon
34+
results = []
35+
for url in icon_urls:
36+
try:
37+
with urllib.request.urlopen(url) as svg_response:
38+
svg_content = svg_response.read().decode('utf-8')
39+
results.append({
40+
'url': url,
41+
'svg': svg_content
42+
})
43+
except Exception as e:
44+
print(f'Warning: Failed to fetch SVG from {url}: {e}', file=sys.stderr)
45+
46+
return results
47+
48+
49+
def main():
50+
# Parse arguments
51+
if len(sys.argv) < 2:
52+
error = {
53+
'error': 'Missing search query',
54+
'usage': 'python search.py \'<search_query>\' [topK]',
55+
'example': 'python search.py \'document\' 10',
56+
'note': 'topK defaults to 5 if not specified'
57+
}
58+
print(json.dumps(error, indent=2), file=sys.stderr)
59+
sys.exit(1)
60+
61+
query = sys.argv[1]
62+
top_k = int(sys.argv[2]) if len(sys.argv) > 2 else 5
63+
64+
if top_k < 1:
65+
error = {
66+
'error': 'Invalid topK value',
67+
'usage': 'python search.py \'<search_query>\' [topK]',
68+
'note': 'topK must be a positive integer'
69+
}
70+
print(json.dumps(error, indent=2), file=sys.stderr)
71+
sys.exit(1)
72+
73+
try:
74+
results = search_icons(query, top_k)
75+
output = {
76+
'query': query,
77+
'topK': top_k,
78+
'count': len(results),
79+
'results': results
80+
}
81+
print(json.dumps(output, indent=2, ensure_ascii=False))
82+
83+
if len(results) == 0:
84+
print(f'Warning: No icons found for query "{query}"', file=sys.stderr)
85+
except Exception as e:
86+
error = {'error': str(e), 'query': query}
87+
print(json.dumps(error, indent=2), file=sys.stderr)
88+
sys.exit(1)
89+
90+
91+
if __name__ == '__main__':
92+
main()

0 commit comments

Comments
 (0)