better-icons 1.0.0 → 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 +164 -34
- package/dist/index.js +311 -0
- package/package.json +11 -8
- package/better-icons/best-practices/SKILLS.md +0 -149
- package/dist/cli.js +0 -302
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,49 +11,72 @@ 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
|
-
##
|
|
14
|
+
## Auto-Learning Preferences
|
|
15
15
|
|
|
16
|
-
|
|
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
17
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
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`
|
|
21
22
|
|
|
22
|
-
|
|
23
|
-
- **Cursor**
|
|
24
|
-
- **Claude Desktop**
|
|
25
|
-
- **VS Code (Copilot)**
|
|
26
|
-
- **Windsurf**
|
|
23
|
+
## Project Icon Sync
|
|
27
24
|
|
|
28
|
-
|
|
25
|
+
Automatically sync icons to your project's icon file - no configuration needed.
|
|
29
26
|
|
|
30
|
-
|
|
27
|
+
```
|
|
28
|
+
You: "I need a settings icon"
|
|
31
29
|
|
|
32
|
-
|
|
33
|
-
|
|
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
34
|
```
|
|
35
35
|
|
|
36
|
-
|
|
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
|
+
|
|
54
|
+
## Quick Setup
|
|
37
55
|
|
|
38
56
|
```bash
|
|
39
|
-
npx better-icons
|
|
57
|
+
npx better-icons setup
|
|
40
58
|
```
|
|
41
59
|
|
|
42
|
-
This
|
|
60
|
+
This will interactively configure the MCP server for:
|
|
43
61
|
- **Cursor**
|
|
44
62
|
- **Claude Code**
|
|
45
|
-
- **Windsurf**
|
|
46
63
|
- **OpenCode**
|
|
47
|
-
- **
|
|
48
|
-
- **
|
|
49
|
-
|
|
64
|
+
- **Windsurf**
|
|
65
|
+
- **VS Code (Copilot)**
|
|
66
|
+
|
|
67
|
+
## Add AI Skills (Optional)
|
|
68
|
+
|
|
69
|
+
Teach your AI assistant best practices for using better-icons:
|
|
70
|
+
|
|
71
|
+
```bash
|
|
72
|
+
npx skills add better-auth/better-icons
|
|
73
|
+
```
|
|
50
74
|
|
|
51
|
-
|
|
75
|
+
This ensures AI assistants will:
|
|
52
76
|
- ✅ Use the `better-icons` MCP instead of installing icon packages
|
|
53
|
-
- ✅
|
|
77
|
+
- ✅ For React, create a single `icons.tsx` file with all icons
|
|
54
78
|
- ✅ Reuse existing icons before adding new ones
|
|
55
79
|
- ✅ Follow consistent naming conventions
|
|
56
|
-
- ❌ Never install `lucide-react`, `react-icons`, `@heroicons/react`, etc.
|
|
57
80
|
|
|
58
81
|
## Manual Installation
|
|
59
82
|
|
|
@@ -72,9 +95,9 @@ Add to `~/.cursor/mcp.json`:
|
|
|
72
95
|
}
|
|
73
96
|
```
|
|
74
97
|
|
|
75
|
-
### Claude
|
|
98
|
+
### Claude Code (CLI)
|
|
76
99
|
|
|
77
|
-
Add to
|
|
100
|
+
Add to `~/.claude/settings.json`:
|
|
78
101
|
|
|
79
102
|
```json
|
|
80
103
|
{
|
|
@@ -110,6 +133,7 @@ Get the SVG code for a specific icon with multiple usage formats.
|
|
|
110
133
|
|
|
111
134
|
```
|
|
112
135
|
Get the SVG for mdi:home
|
|
136
|
+
Get a URL for mdi:home
|
|
113
137
|
Get lucide:arrow-right with size 24
|
|
114
138
|
```
|
|
115
139
|
|
|
@@ -117,11 +141,13 @@ Get lucide:arrow-right with size 24
|
|
|
117
141
|
- `icon_id` (required): Icon ID in format 'prefix:name' (e.g., 'mdi:home')
|
|
118
142
|
- `color` (optional): Icon color (e.g., '#ff0000', 'currentColor')
|
|
119
143
|
- `size` (optional): Icon size in pixels
|
|
144
|
+
- `format` (optional): 'svg' (default) or 'url'
|
|
120
145
|
|
|
121
146
|
**Returns:**
|
|
122
147
|
- Raw SVG code
|
|
123
148
|
- React/JSX component code
|
|
124
149
|
- Iconify component usage
|
|
150
|
+
- Direct SVG URL (when `format: "url"`)
|
|
125
151
|
|
|
126
152
|
### `list_collections`
|
|
127
153
|
|
|
@@ -150,6 +176,96 @@ Recommend icons for user authentication
|
|
|
150
176
|
- `style` (optional): 'solid', 'outline', or 'any'
|
|
151
177
|
- `limit` (optional): Number of recommendations (1-20)
|
|
152
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
|
+
|
|
153
269
|
## Popular Icon Collections
|
|
154
270
|
|
|
155
271
|
| Prefix | Name | Style | Icons |
|
|
@@ -166,13 +282,27 @@ Recommend icons for user authentication
|
|
|
166
282
|
## CLI Commands
|
|
167
283
|
|
|
168
284
|
```bash
|
|
169
|
-
npx better-icons
|
|
170
|
-
npx better-icons setup
|
|
171
|
-
npx better-icons
|
|
172
|
-
npx better-icons
|
|
173
|
-
npx better-icons
|
|
285
|
+
npx better-icons # Run the MCP server (for tool configs)
|
|
286
|
+
npx better-icons setup # Interactive setup wizard
|
|
287
|
+
npx better-icons setup -y # Setup with auto-confirm (global)
|
|
288
|
+
npx better-icons setup -s project # Setup for current project only
|
|
289
|
+
npx better-icons config # Show manual config instructions
|
|
290
|
+
npx better-icons --help # Show help
|
|
174
291
|
```
|
|
175
292
|
|
|
293
|
+
### Options
|
|
294
|
+
|
|
295
|
+
| Option | Description |
|
|
296
|
+
|--------|-------------|
|
|
297
|
+
| `-y, --yes` | Skip confirmation prompts |
|
|
298
|
+
| `-a, --agent <agents...>` | Specify agents (cursor, claude-code, opencode, windsurf, vscode) |
|
|
299
|
+
| `-s, --scope <scope>` | Config scope: `global` (default) or `project` |
|
|
300
|
+
|
|
301
|
+
### Scope
|
|
302
|
+
|
|
303
|
+
- **Global**: Configures MCP server for all projects (stored in home directory)
|
|
304
|
+
- **Project**: Configures MCP server for current project only (stored in project root)
|
|
305
|
+
|
|
176
306
|
## Development
|
|
177
307
|
|
|
178
308
|
```bash
|
|
@@ -180,9 +310,9 @@ npx better-icons help # Show help
|
|
|
180
310
|
bun install
|
|
181
311
|
|
|
182
312
|
# Run locally
|
|
183
|
-
bun run
|
|
313
|
+
bun run dev
|
|
184
314
|
|
|
185
|
-
# Build
|
|
315
|
+
# Build
|
|
186
316
|
bun run build
|
|
187
317
|
```
|
|
188
318
|
|