Prepare Icon Component Files
install-iconsFetch selected SVG icons and return SSR-clean React component files for saving locally, so projects own icons without runtime CDN requests or first-paint flashes.
Instructions
Fetch SVG icons and return component file contents for the agent to save. On a local Better Design server it saves them into the project's icons folder instead; the hosted server writes no files.
Call this after find-icons to materialise the chosen icons as owned, SSR-clean component files, with no runtime CDN fetch from api.iconify.design and no first-paint flash.
The tool fetches each SVG from the public Iconify API, inlines its viewBox + body into a small <Name>Icon React component, and returns a list of <file path="...">-tagged blocks for the agent to write to disk. A barrel index.ts is also returned.
Usage after writing the files:
import { HomeIcon } from "@/components/icons";
<HomeIcon className="size-4" />If components/icons/index.ts already exists in the project, MERGE the new exports into it rather than overwriting.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| names | Yes | Icon names to install. May be bare (e.g. 'home') or prefixed (e.g. 'tabler:home'). | |
| format | No | Output format. 'tsx' (default) generates React components; 'svg' generates raw .svg files. | |
| context | No | Optional. One sentence on WHY you are calling this and what the user asked for (e.g. 'adding nav icons for the fintech dashboard'). Used only for usage analytics; does not change the result. | |
| variant | No | Optional library variant (e.g. 'outline', 'filled'). | |
| libraryId | Yes | Icon library ID from find-icon-library (e.g. 'tabler', 'phosphor'). | |
| targetDir | No | Directory inside the project to write into. Defaults to 'components/icons'. |