@figma-export/output-components-as-es6 v5.0.1
@figma-export/output-components-as-es6
Outputter for @figma-export that exports components in javascript file.
With this outputter you can export all components as variables inside a .js
file called with the page name.
This is a sample of the output:
$ tree output/
# output/
# ├── icons.js
# └── monochrome.js
For each file you will have a list of export
.
// icons.js
export const figmaExport = `<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"> ... </svg>`;
export const figmaLogo = `<svg width="40" height="60" viewBox="0 0 40 60" fill="none" xmlns="http://www.w3.org/2000/svg"> ... </svg>`;
Tip: A component named
icon/eye
will be exported as variable namediconEye
.
Install
Using npm:
npm install --save-dev @figma-export/output-components-as-es6
or using yarn:
yarn add @figma-export/output-components-as-es6 --dev
Options
This task can be configured providing some options:
output
is the path to the output folder.variablePrefix
andvariableSuffix
enable you to prepend or append a text to the variable name. This is necessary when your component name is a reserved word (e.g.const
,package
, ...).useBase64
(boolean) will export each components using Base 64 encoding.
// icons.js
export const figmaExport = `PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gLi4uIDwvc3ZnPg==`;
useDataUrl
(boolean) will export each components using Data URL format.
// icons.js
export const figmaExport = `data:image/svg+xml,%3csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3e ... %3c/svg%3e`;
1 month ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
11 months ago
12 months ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago