@figma-export/output-components-as-es6
v6.0.1
Published
Outputter for @figma-export that exports components in javascript file
Downloads
300
Maintainers
Readme
@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
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
.
.figmaexportrc.js
You can easily add this outputter to your .figmaexportrc.js
:
import asES6 from '@figma-export/output-components-as-es6'
export default {
commands: [
['components', {
fileId: 'fzYhvQpqwhZDUImRz431Qo',
onlyFromPages: ['icons', 'unit-test'],
outputters: [
asES6({
output: './output'
})
]
}],
]
}
output
is mandatory.
getVariableName
, useBase64
and useDataUrl
are optional.
import asES6 from '@figma-export/output-components-as-es6'
import { camelCase } from '@figma-export/utils'
...
asES6({
output: './output',
getVariableName: (options) => camelCase(options.componentName.trim()),
useBase64: false,
useDataUrl: false,
})
defaults may change, please refer to
./src/index.ts
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`;