Skip to content

Commit

Permalink
Add docs about svg sprite generation
Browse files Browse the repository at this point in the history
  • Loading branch information
Temzasse committed Feb 17, 2022
1 parent ff8b03b commit 7b3f2ea
Showing 1 changed file with 22 additions and 0 deletions.
22 changes: 22 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -489,6 +489,28 @@ The `codegen` property allows you to modify the code generation behaviour.
| `[token].filetype` | `ts`, `js`, `json`, `svg` |
| `[token].tokenCase` | `camel`, `kebab` |

#### SVG sprites

For SVGs it is possible to bundle all generated SVG tokens into one SVG sprite. You can achieve this by setting the `sprite` key to `true`. It is also possible to set the value to `{ writeIds: true }` if you want to write the token names which are used as ids of the SVG sprite parts into a separate file (for usage in TypeScript etc.).

By setting the `sprite` key only one SVG file will be generated instead of multiple separate SVG files.

```js
{
"codegen": {
"icons": {
"filetype": "svg",
"filename": "icon-sprite",
"sprite": {
"writeIds": true
}
}
}
}
```

With the config above Figmage would generate two files: `icon-sprite.svg` and `icon-sprite-ids.ts`.

## Figma template

In the screenshot below you can see how the example Figma template looks like that is used in the `/example` folder of this repo.
Expand Down

0 comments on commit 7b3f2ea

Please sign in to comment.