@figma-export/output-组件-as-es6

输出器 @figma-导出 以 javascript 文件导出组件.

使用此输出器, 您可以导出所有组件作为变量 .js 以页名调用文件.

这是输出的样本 :

$ tree output/
# output/
# └── icons.js

对于每个文件,您将有一个列表 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>`;

提示: 一个组件命名 icon/eye 将导出为已命名的变量 iconEye。 。 。 .

.figmaexportrc.js (中文(简体) )

您可以轻松地将此输出器添加到您的 .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 实值 强制。 。 。 .

getVariableName, (中文(简体) ), useBase64 财务报告和审定财务报表 useDataUrl 为: 选项。 。 。 .

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,
})

默认值可能改变,请参考 ./src/index.ts

安装

使用 npm :

npm install --save-dev @figma-export/output-components-as-es6

或使用线条 :

yarn add @figma-export/output-components-as-es6 --dev

选项

此项任务可以配置, 提供一些选项 :

• output 是输出文件夹的路径.
• variablePrefix 财务报告和审定财务报表 variableSuffix 允许您在变量名称上预先插入或附加文本。 当组件名称是一个保留词时(例如:. const, (中文(简体) ), package(中文(简体) ).
• useBase64 (boolean)将使用基础64编码导出每个组件.

// icons.js
export const figmaExport = `PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gLi4uIDwvc3ZnPg==`;

• useDataUrl (boolean) 将使用 数据 URL 格式.

// 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`;