File: ./scripts/icons.js
$ node ./scripts/icons// script is executed on require, since it uses IIFE
require('./scripts/icons')Purpose of this tool is to delegate whole responsibility for the icons to the designers, and to speed up and facilitate the whole font creation process. Thanks to this, Designers are able to maintain icons and icon sets form the environment that they are most comfortable with.
Icons script uses Figma API to request given file, and fetch all Icons Data - their name, preferred unicode, set as well as svg icons. They are then placed in a directory given in a config. Downloaded files are finally used to generate webfont file(s). In the end, all the data is saved to JSON file and documentation for icons is generated.
In order to run icons fetch, you need to provide FIGMA_ACCESS_TOKEN and FIGMA_FILE_ID environmental variables. You can specify them in .env file since library utilizes dotenv.
FIGMA_ACCESS_TOKEN- personal access token. Check out official API docs on how to get your token.FIGMA_FILE_ID- is a random alphanumeric string in url, like so:https://www.figma.com/file/<FIGMA FILE ID>/Icons
Each icon has to be a component in Figma. Component's name will be transformed to kebabCase and will be final icon name. Component Names have to be unique. You can provide additional information in Figma component's description field:
- preferred unicode - this will assign given unicode to given icon in final font file. To consume this feature, add
code: <four-char-unicode>at the beginning of your description - search keywords - to help find the best icon in the documentation. To use this feature, specify all keywords separated with coma.
code: f104
mail, envelope, letter, package, parcel, send
code: f120
heart, love, favorites, fave, like
| Property name | Description |
|---|---|
| personalAccessToken | personal access token for figma |
| fileId | id of a figma file |
| pages | names of the pages that are containing icons |
| multipleSets | if multiple sets should be created. If true, then each page will be different set. |
| distDir | main output directory |
| svgDir | directory for svg files |
| fontsDir | directory for font files |
| dataDir | directory for JSON file |
| docsDir | output file for icon docs |
| fontName | name of the font |
| formats | formats to be generated ('svg', 'ttf', 'woff', 'woff2', 'eot') |
| mainTemplate | path to handlebars template for docs |
| meta | meta information for font files |
| docsPartials | Glob to partials directory for documentation |
| meta | meta data for font file |
| meta.description | font files description |
| meta.url | url for a font manufacturer |
| meta.copyright | copyright information |
| meta.version | font version number |