Usage

Once you have installed IconSync and set up your configuration, you can start using it to fetch icons from Figma and generate React components.

Fetching Icons

Fetch icons from your Figma file:

# Using npm script
npm run icon:fetch
 
# Or directly with the CLI
npx @iconsync/core fetch

This will download SVG icons from your configured Figma file and store them in a local cache.

Generating Components

Generate React components from the fetched icons:

# Using npm script
npm run icon:generate
 
# Or directly with the CLI
npx @iconsync/core generator

This will create React components in the output directory specified in your configuration.

Using Generated Icons

Import and use the generated icon components in your React application:

// Import the generated icon component
import { ArrowRight } from "../components/icons";
 
export default function IconExample() {
  return (
    <div>
      {/* Use the icon component */}
      <ArrowRight width={24} height={24} color="blue" title="Go to next page" />
    </div>
  );
}

Managing the Cache

You can view cache statistics or clear the cache using these commands:

# View cache statistics
npm run icon:cache:stats
 
# Clear the cache
npm run icon:cache:clear

Clearing the cache can be useful when you want to ensure you're fetching the latest icons from Figma.

Installation Icons