get_icon_usage_examples
Retrieve practical usage examples for Lucide React icons by specifying the icon name, helping developers integrate icons effectively into their projects.
Instructions
Get usage examples for a Lucide React icon
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | Icon name, e.g. 'home' or 'user' |
Implementation Reference
- src/utils.ts:163-183 (handler)Executes the tool logic: finds the icon by normalized name in iconMetadata, generates usage example code if found using IconUsageGenerator, otherwise returns a not-found message.
async ({ name }) => { const icon = iconMetadata.find( (i) => i.name.toLowerCase() === name.toLowerCase() ); if (!icon) { return createTextResponse( `Icon "${name}" not found. Use search_icons to find available icons.` ); } const example = IconUsageGenerator.generate(icon.name); return { content: [ { type: "text" as const, text: example } ] }; } - src/utils.ts:160-162 (schema)Input schema: requires a 'name' parameter as string (icon name).
{ name: z.string().describe("Icon name, e.g. 'home' or 'user'") }, - src/utils.ts:156-184 (registration)Registers the get_icon_usage_examples tool on the MCP server, specifying name, description, input schema, and handler function.
// Tool: get_icon_usage_examples server.tool( "get_icon_usage_examples", "Get usage examples for a Lucide React icon", { name: z.string().describe("Icon name, e.g. 'home' or 'user'") }, async ({ name }) => { const icon = iconMetadata.find( (i) => i.name.toLowerCase() === name.toLowerCase() ); if (!icon) { return createTextResponse( `Icon "${name}" not found. Use search_icons to find available icons.` ); } const example = IconUsageGenerator.generate(icon.name); return { content: [ { type: "text" as const, text: example } ] }; } ); - src/utils.ts:68-77 (helper)Supporting utility that generates formatted React code example for the given icon, including import, basic usage, and styled props usage.
class IconUsageGenerator { static generate(iconName: string) { const componentName = iconName; const importLine = `import { ${componentName} } from 'lucide-react';`; const basicExample = `<${componentName} />`; const propsExample = `<${componentName} size={24} color="#3b82f6" strokeWidth={1.5} />`; return `${importLine}\n\nfunction Example() {\n return (\n <div>\n {/* Basic usage */}\n ${basicExample}\n \n {/* With props */}\n ${propsExample}\n </div>\n );\n}`; } }