Skip to content

Commit 9428217

Browse files
author
MRBadri
committed
feat: update documentation and configuration for IconSync; enhance package.json scripts and improve README with usage examples and configuration options
1 parent ca34ed6 commit 9428217

File tree

14 files changed

+458
-146
lines changed

14 files changed

+458
-146
lines changed

‎.changeset/config.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
{
2-
"$schema": "https://unpkg.com/@changesets/config@2.0.0/schema.json",
2+
"$schema": "https://unpkg.com/@changesets/config@2.3.0/schema.json",
33
"changelog": "@changesets/cli/changelog",
4-
"baseBranch": "main",
54
"commit": false,
65
"fixed": [],
76
"linked": [],
8-
"access": "public",
7+
"access": "restricted",
8+
"baseBranch": "main",
99
"updateInternalDependencies": "patch",
10-
"ignore": ["@iconsync/docs"]
11-
}
10+
"ignore": []
11+
}

‎apps/docs/pages/_meta.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"index": "Introduction",
33
"getting-started": "Getting Started",
4-
"components": "Components",
54
"icons": "Icons",
6-
"theming": "Theming"
7-
}
5+
"components": "Icon Components",
6+
"theming": "Configuration Options"
7+
}

‎apps/docs/pages/components.mdx‎

Lines changed: 53 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,57 @@
1-
# Components
1+
# Icon Components
22

3-
Figmicon provides a set of reusable UI components that you can use to build your applications.
3+
IconSync generates React components from your Figma icons. This page explains how to use these generated components.
44

5-
## Available Components
5+
## Generated Components
66

7-
- [Button](/components/button)
8-
- [Card](/components/card)
9-
- [Text](/components/text)
10-
- [Input](/components/input)
11-
- [Icon](/components/icon)
7+
When you run the generator command, IconSync creates React components for each icon in your Figma file. These components are generated in the output directory specified in your configuration.
128

13-
Each component is designed to be flexible and customizable to fit your needs.
9+
## Component Props
10+
11+
The generated components accept the following props:
12+
13+
- `width`: Width of the icon
14+
- `height`: Height of the icon
15+
- `color`: Color of the icon (if you've set up color replacement)
16+
- `title`: Accessibility title for the icon (if enabled in config)
17+
- `...props`: Any other SVG props you want to pass
18+
19+
## Example Usage
20+
21+
```jsx
22+
import { ArrowRight } from '../components/icons';
23+
24+
export default function IconExample() {
25+
return (
26+
<ArrowRight
27+
width={24}
28+
height={24}
29+
color="currentColor"
30+
title="Arrow Right Icon"
31+
/>
32+
);
33+
}
34+
```
35+
36+
## Customizing Component Generation
37+
38+
You can customize how components are generated using the `generator` options in your configuration file:
39+
40+
```typescript
41+
generator: {
42+
icon: true, // Generate icon components
43+
typescript: true, // Generate TypeScript files
44+
titleProp: true, // Add title prop to components
45+
dimensions: false, // Include width/height dimensions
46+
expandProps: "end", // Position of expanded props
47+
replaceAttrValues: {
48+
"#000000": "currentColor", // Replace specific colors
49+
},
50+
outDir: "src/components/icons", // Output directory
51+
ext: "tsx", // File extension
52+
prettier: true, // Format with Prettier
53+
memo: false, // Use React.memo
54+
ref: false, // Forward refs
55+
filenameCase: "camel", // Filename case style
56+
}
57+
```

‎apps/docs/pages/getting-started/installation.mdx‎

Lines changed: 46 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,55 @@ npm install @iconsync/core
1010
yarn add @iconsync/core
1111

1212
# pnpm
13-
pnpm install @iconsync/core
13+
pnpm add @iconsync/core
1414
```
1515

16-
## Basic Usage
16+
## Setting up your configuration
1717

18-
```jsx
19-
import { Button } from '@iconsync/core';
18+
Create an `icon.config.ts` file in your project root:
2019

21-
export default function App() {
22-
return (
23-
<Button variant="primary">
24-
Click me
25-
</Button>
26-
);
20+
```typescript
21+
import { iconConfig } from "@iconsync/core";
22+
23+
export default iconConfig({
24+
figma: {
25+
token: process.env.FIGMA_TOKEN!, // Your Figma API token
26+
url: "https://www.figma.com/design/YOUR_FILE_ID/YOUR_FILE_NAME?node-id=YOUR_NODE_ID",
27+
},
28+
fetch: {
29+
concurrentDownloads: 5,
30+
},
31+
generator: {
32+
icon: true,
33+
typescript: true,
34+
outDir: "src/components/icons",
35+
ext: "tsx",
36+
prettier: true,
37+
},
38+
});
39+
```
40+
41+
## Adding scripts to package.json
42+
43+
Add these scripts to your `package.json`:
44+
45+
```json
46+
{
47+
"scripts": {
48+
"icon:fetch": "figmicon fetch",
49+
"icon:cache:stats": "figmicon cache:stats",
50+
"icon:cache:clear": "figmicon cache:clear",
51+
"icon:generate": "figmicon generator"
52+
}
2753
}
2854
```
55+
56+
## Setting up your Figma token
57+
58+
Create a `.env` file and add your Figma token:
59+
60+
```
61+
FIGMA_TOKEN=your_figma_api_token
62+
```
63+
64+
You can obtain a Figma API token from your Figma account settings under the "Personal access tokens" section.

‎apps/docs/pages/getting-started/usage.mdx‎

Lines changed: 51 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,68 @@
11
# Usage
22

3-
Once you have installed Figmicon, you can start using its components in your application.
3+
Once you have installed IconSync and set up your configuration, you can start using it to fetch icons from Figma and generate React components.
44

5-
## Basic Example
5+
## Fetching Icons
66

7-
```jsx
8-
import { Button, Card, Text } from '@iconsync/core';
7+
Fetch icons from your Figma file:
98

10-
export default function Example() {
11-
return (
12-
<Card>
13-
<Text variant="heading">Hello World</Text>
14-
<Text>This is a simple example using Figmicon components.</Text>
15-
<Button variant="primary">Learn More</Button>
16-
</Card>
17-
);
18-
}
9+
```bash
10+
# Using npm script
11+
npm run icon:fetch
12+
13+
# Or directly with the CLI
14+
npx figmicon fetch
1915
```
2016

21-
## Using Icons
17+
This will download SVG icons from your configured Figma file and store them in a local cache.
18+
19+
## Generating Components
20+
21+
Generate React components from the fetched icons:
22+
23+
```bash
24+
# Using npm script
25+
npm run icon:generate
26+
27+
# Or directly with the CLI
28+
npx figmicon generator
29+
```
30+
31+
This will create React components in the output directory specified in your configuration.
32+
33+
## Using Generated Icons
34+
35+
Import and use the generated icon components in your React application:
2236

2337
```jsx
24-
import { Icon } from '@iconsync/core';
38+
// Import the generated icon component
39+
import { ArrowRight } from '../components/icons';
2540

2641
export default function IconExample() {
2742
return (
2843
<div>
29-
<Icon name="arrow-right" size="md" />
30-
<Icon name="check" size="sm" color="success" />
44+
{/* Use the icon component */}
45+
<ArrowRight
46+
width={24}
47+
height={24}
48+
color="blue"
49+
title="Go to next page"
50+
/>
3151
</div>
3252
);
3353
}
3454
```
55+
56+
## Managing the Cache
57+
58+
You can view cache statistics or clear the cache using these commands:
59+
60+
```bash
61+
# View cache statistics
62+
npm run icon:cache:stats
63+
64+
# Clear the cache
65+
npm run icon:cache:clear
66+
```
67+
68+
Clearing the cache can be useful when you want to ensure you're fetching the latest icons from Figma.

‎apps/docs/pages/icons.mdx‎

Lines changed: 67 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,81 @@
11
# Icons
22

3-
Figmicon includes an icon system that allows you to easily use icons from Figma in your application.
3+
IconSync allows you to easily fetch icons from Figma and use them in your application as React components.
44

5-
## Usage
5+
## Configuration
66

7-
```jsx
8-
import { Icon } from '@iconsync/core';
7+
Create an `icon.config.ts` file in your project root:
98

10-
export default function IconExample() {
11-
return (
12-
<Icon name="arrow-right" size="md" />
13-
);
14-
}
9+
```typescript
10+
import { iconConfig } from "@iconsync/core";
11+
12+
export default iconConfig({
13+
figma: {
14+
token: process.env.FIGMA_TOKEN!, // Your Figma API token
15+
url: "https://www.figma.com/design/YOUR_FILE_ID/YOUR_FILE_NAME?node-id=YOUR_NODE_ID",
16+
},
17+
fetch: {
18+
concurrentDownloads: 5, // Number of concurrent downloads
19+
},
20+
generator: {
21+
icon: true, // Generate icon components
22+
typescript: true, // Generate TypeScript files
23+
titleProp: true, // Add title prop to components
24+
dimensions: false, // Include width/height dimensions
25+
expandProps: "end", // Position of expanded props
26+
replaceAttrValues: {
27+
"#000000": "currentColor", // Replace specific colors
28+
"#fff": "currentColor",
29+
},
30+
outDir: "src/components/icons", // Output directory
31+
ext: "tsx", // File extension
32+
prettier: true, // Format with Prettier
33+
filenameCase: "camel", // Filename case style
34+
},
35+
});
1536
```
1637

17-
## Available Icons
38+
## Fetching Icons
39+
40+
After setting up your configuration file, you can fetch icons from Figma:
1841

19-
Figmicon includes a wide range of icons that you can use in your application. Here are some examples:
42+
```bash
43+
# Using the CLI directly
44+
npx figmicon fetch
2045

21-
- `arrow-right`
22-
- `arrow-left`
23-
- `check`
24-
- `close`
25-
- `menu`
26-
- `settings`
27-
- `user`
46+
# Or using a package.json script
47+
npm run icon:fetch
48+
```
2849

29-
## Customizing Icons
50+
## Generating Components
3051

31-
You can customize the appearance of icons by passing props:
52+
After fetching icons, you can generate React components:
53+
54+
```bash
55+
# Using the CLI directly
56+
npx figmicon generator
57+
58+
# Or using a package.json script
59+
npm run icon:generate
60+
```
61+
62+
## Using Generated Icons
63+
64+
Once your icon components are generated, you can import and use them in your React application:
3265

3366
```jsx
34-
<Icon
35-
name="arrow-right"
36-
size="lg"
37-
color="primary"
38-
strokeWidth={2}
39-
/>
67+
import { ArrowRight } from './components/icons';
68+
69+
export default function IconExample() {
70+
return (
71+
<ArrowRight
72+
width={24}
73+
height={24}
74+
color="currentColor"
75+
title="Arrow Right Icon"
76+
/>
77+
);
78+
}
4079
```
80+
81+
The exact props available will depend on your generator configuration.

‎apps/docs/pages/index.mdx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
1-
# Figmicon
1+
# IconSync
22

3-
Welcome to the Figmicon documentation!
3+
Welcome to the IconSync documentation!
44

55
## Introduction
66

7-
Figmicon is a design system that helps you build consistent and beautiful user interfaces.
7+
IconSync is a powerful tool for synchronizing Figma icons with your codebase. It allows you to fetch icons from Figma and generate React components automatically, streamlining your design system workflow.
88

99
## Getting Started
1010

11-
To get started with Figmicon, check out the [installation guide](/getting-started/installation).
11+
To get started with IconSync, check out the [installation guide](/getting-started/installation).
1212

1313
## Features
1414

15-
- **Component Library**: A comprehensive set of UI components
16-
- **Icon System**: Easily integrate icons from Figma
17-
- **Theming**: Customize the look and feel of your application
15+
- **Figma Integration**: Connect directly to your Figma designs
16+
- **Icon Fetching**: Download SVG icons from your Figma files
17+
- **Component Generation**: Automatically generate React components
18+
- **Caching**: Efficient caching system for better performance
19+
- **Customization**: Configure how your icons are generated and used

0 commit comments

Comments
 (0)