better-icons 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +134 -1
- package/dist/index.js +235 -119
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Better Icons
|
|
2
2
|
|
|
3
|
-
An MCP (Model Context Protocol) server for searching and retrieving icons from
|
|
3
|
+
An MCP (Model Context Protocol) server for searching and retrieving 200,000 icons from 150+ icon sets, powered by [Iconify](https://iconify.design/) - the same data source behind [icones.js.org](https://icones.js.org).
|
|
4
4
|
|
|
5
5
|
## Why?
|
|
6
6
|
|
|
@@ -11,6 +11,46 @@ When doing AI-assisted coding, icons are often a pain point. AI models struggle
|
|
|
11
11
|
|
|
12
12
|
This MCP server solves that by giving AI models direct access to search and retrieve icons from the massive Iconify collection (200,000+ icons!).
|
|
13
13
|
|
|
14
|
+
## Auto-Learning Preferences
|
|
15
|
+
|
|
16
|
+
Better Icons automatically learns which icon collections you prefer based on your usage. When you retrieve icons using `get_icon`, the server tracks which collections you use most frequently and prioritizes them in future searches and recommendations.
|
|
17
|
+
|
|
18
|
+
- **Consistent style**: Icons from your preferred collections appear first in search results
|
|
19
|
+
- **Zero configuration**: Just use the server normally and it learns your preferences
|
|
20
|
+
- **Global memory**: Preferences are stored in `~/.better-icons/preferences.json` and apply across all projects
|
|
21
|
+
- **Full control**: View preferences with `get_icon_preferences` or reset with `clear_icon_preferences`
|
|
22
|
+
|
|
23
|
+
## Project Icon Sync
|
|
24
|
+
|
|
25
|
+
Automatically sync icons to your project's icon file - no configuration needed.
|
|
26
|
+
|
|
27
|
+
```
|
|
28
|
+
You: "I need a settings icon"
|
|
29
|
+
|
|
30
|
+
AI: Uses sync_icon → automatically:
|
|
31
|
+
✓ Fetches the icon from Iconify
|
|
32
|
+
✓ Adds SettingsIcon to your icons.tsx
|
|
33
|
+
✓ Returns: import { SettingsIcon } from './icons'
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
The AI knows your project structure and passes the icons file path directly:
|
|
37
|
+
|
|
38
|
+
```
|
|
39
|
+
sync_icon(
|
|
40
|
+
icons_file: "/Users/me/myapp/src/components/icons.tsx",
|
|
41
|
+
framework: "react",
|
|
42
|
+
icon_id: "lucide:settings"
|
|
43
|
+
)
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### Supported frameworks
|
|
47
|
+
|
|
48
|
+
- **React** - TSX components with proper props typing
|
|
49
|
+
- **Vue** - Template-based components
|
|
50
|
+
- **Svelte** - Svelte components with className prop
|
|
51
|
+
- **Solid** - SolidJS components
|
|
52
|
+
- **SVG** - Raw SVG string exports
|
|
53
|
+
|
|
14
54
|
## Quick Setup
|
|
15
55
|
|
|
16
56
|
```bash
|
|
@@ -93,6 +133,7 @@ Get the SVG code for a specific icon with multiple usage formats.
|
|
|
93
133
|
|
|
94
134
|
```
|
|
95
135
|
Get the SVG for mdi:home
|
|
136
|
+
Get a URL for mdi:home
|
|
96
137
|
Get lucide:arrow-right with size 24
|
|
97
138
|
```
|
|
98
139
|
|
|
@@ -100,11 +141,13 @@ Get lucide:arrow-right with size 24
|
|
|
100
141
|
- `icon_id` (required): Icon ID in format 'prefix:name' (e.g., 'mdi:home')
|
|
101
142
|
- `color` (optional): Icon color (e.g., '#ff0000', 'currentColor')
|
|
102
143
|
- `size` (optional): Icon size in pixels
|
|
144
|
+
- `format` (optional): 'svg' (default) or 'url'
|
|
103
145
|
|
|
104
146
|
**Returns:**
|
|
105
147
|
- Raw SVG code
|
|
106
148
|
- React/JSX component code
|
|
107
149
|
- Iconify component usage
|
|
150
|
+
- Direct SVG URL (when `format: "url"`)
|
|
108
151
|
|
|
109
152
|
### `list_collections`
|
|
110
153
|
|
|
@@ -133,6 +176,96 @@ Recommend icons for user authentication
|
|
|
133
176
|
- `style` (optional): 'solid', 'outline', or 'any'
|
|
134
177
|
- `limit` (optional): Number of recommendations (1-20)
|
|
135
178
|
|
|
179
|
+
### `get_icon_preferences`
|
|
180
|
+
|
|
181
|
+
View your learned icon collection preferences with usage statistics.
|
|
182
|
+
|
|
183
|
+
```
|
|
184
|
+
Show my icon preferences
|
|
185
|
+
What icon collections do I use most?
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
### `clear_icon_preferences`
|
|
189
|
+
|
|
190
|
+
Reset all learned icon preferences to start fresh.
|
|
191
|
+
|
|
192
|
+
```
|
|
193
|
+
Clear my icon preferences
|
|
194
|
+
Reset icon preferences
|
|
195
|
+
```
|
|
196
|
+
|
|
197
|
+
### `find_similar_icons`
|
|
198
|
+
|
|
199
|
+
Find similar icons or variations of a given icon across different collections and styles.
|
|
200
|
+
|
|
201
|
+
```
|
|
202
|
+
Find icons similar to lucide:home
|
|
203
|
+
What other arrow icons are there like mdi:arrow-right?
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
**Parameters:**
|
|
207
|
+
- `icon_id` (required): Icon ID to find variations of
|
|
208
|
+
- `limit` (optional): Maximum number of similar icons (1-50, default: 10)
|
|
209
|
+
|
|
210
|
+
### `get_icons`
|
|
211
|
+
|
|
212
|
+
Get multiple icons at once (batch retrieval). More efficient than multiple `get_icon` calls.
|
|
213
|
+
|
|
214
|
+
```
|
|
215
|
+
Get these icons: lucide:home, lucide:settings, lucide:user
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
**Parameters:**
|
|
219
|
+
- `icon_ids` (required): Array of icon IDs (max 20)
|
|
220
|
+
- `color` (optional): Color for all icons
|
|
221
|
+
- `size` (optional): Size in pixels for all icons
|
|
222
|
+
|
|
223
|
+
### `get_recent_icons`
|
|
224
|
+
|
|
225
|
+
View your recently used icons for quick reuse.
|
|
226
|
+
|
|
227
|
+
```
|
|
228
|
+
Show my recent icons
|
|
229
|
+
What icons have I used recently?
|
|
230
|
+
```
|
|
231
|
+
|
|
232
|
+
**Parameters:**
|
|
233
|
+
- `limit` (optional): Number of recent icons to show (1-50, default: 20)
|
|
234
|
+
|
|
235
|
+
### `sync_icon`
|
|
236
|
+
|
|
237
|
+
Get an icon AND automatically add it to your project's icons file. The recommended way to add icons.
|
|
238
|
+
|
|
239
|
+
```
|
|
240
|
+
Sync the lucide:home icon to my project
|
|
241
|
+
Add a settings icon to my icons file
|
|
242
|
+
```
|
|
243
|
+
|
|
244
|
+
**Parameters:**
|
|
245
|
+
- `icons_file` (required): Absolute path to the icons file
|
|
246
|
+
- `framework` (required): 'react', 'vue', 'svelte', 'solid', or 'svg'
|
|
247
|
+
- `icon_id` (required): Icon ID in format 'prefix:name'
|
|
248
|
+
- `component_name` (optional): Custom component name
|
|
249
|
+
- `color` (optional): Icon color
|
|
250
|
+
- `size` (optional): Icon size in pixels
|
|
251
|
+
|
|
252
|
+
**Returns:**
|
|
253
|
+
- Confirmation that icon was added (or already exists)
|
|
254
|
+
- Import statement to use
|
|
255
|
+
- Usage example
|
|
256
|
+
|
|
257
|
+
### `scan_project_icons`
|
|
258
|
+
|
|
259
|
+
Scan an icons file to see what icons are already available.
|
|
260
|
+
|
|
261
|
+
```
|
|
262
|
+
What icons are already in my project?
|
|
263
|
+
Scan my icons file
|
|
264
|
+
```
|
|
265
|
+
|
|
266
|
+
**Parameters:**
|
|
267
|
+
- `icons_file` (required): Absolute path to the icons file
|
|
268
|
+
|
|
136
269
|
## Popular Icon Collections
|
|
137
270
|
|
|
138
271
|
| Prefix | Name | Style | Icons |
|