get_icon_usage_examples
Retrieve practical usage examples for specific Heroicons components by providing the icon name and style, such as solid or outline.
Instructions
Get usage examples for an icon
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| name | Yes | Icon component name, e.g. BeakerIcon | |
| style | Yes | Icon style: solid or outline |
Implementation Reference
- src/utils.ts:165-178 (handler)The async handler function for the get_icon_usage_examples tool, which generates React import and JSX usage examples for the specified icon name and style.
async ({ name, style }) => { const pkg = `@heroicons/react/24/${style}`; const importLine = `import { ${name} } from '${pkg}';`; const jsxLine = `<${name} className="w-6 h-6 text-blue-500" />`; const example = `${importLine}\n\nfunction Example() {\n return (\n <div>\n ${jsxLine}\n </div>\n );\n}`; return { content: [ { type: "text", text: example } ] }; } - src/utils.ts:159-164 (schema)Zod input schema defining parameters: name (string) and required style (solid or outline).
{ name: z.string().describe("Icon component name, e.g. BeakerIcon"), style: z .enum(["solid", "outline"]) .describe("Icon style: solid or outline") }, - src/utils.ts:156-179 (registration)Registration of the get_icon_usage_examples tool on the MCP server, including description, schema, and handler function.
server.tool( "get_icon_usage_examples", "Get usage examples for an icon", { name: z.string().describe("Icon component name, e.g. BeakerIcon"), style: z .enum(["solid", "outline"]) .describe("Icon style: solid or outline") }, async ({ name, style }) => { const pkg = `@heroicons/react/24/${style}`; const importLine = `import { ${name} } from '${pkg}';`; const jsxLine = `<${name} className="w-6 h-6 text-blue-500" />`; const example = `${importLine}\n\nfunction Example() {\n return (\n <div>\n ${jsxLine}\n </div>\n );\n}`; return { content: [ { type: "text", text: example } ] }; } );