@figma-export/output-components-as-svgr
    TypeScript icon, indicating that this package has built-in type declarations

    3.3.1 • Public • Published

    @figma-export/output-components-as-svgr

    Outputter for @figma-export that exports components as React components.

    With this outputter you can export all Figma components as React components into the specified output folder.

    This is a sample of the output from this Figma file:

    $ tree output/
    
    # output
    # ├── icons
    # │   ├── FigmaArrow.jsx
    # │   ├── FigmaExport.jsx
    # │   ├── FigmaLogo.jsx
    # │   └── index.js
    # └── unit-test
    #     ├── figma
    #     │   ├── logo
    #     │   │   ├── Main.jsx
    #     │   │   ├── MainBright.jsx
    #     │   │   └── index.js
    #     │   ├── Logo.jsx
    #     │   └── index.js
    #     ├── FigmaDefaultLogo.jsx
    #     └── index.js

    Tip: A figma component named icon/eye will be exported as Eye.jsx inside the icon folder. Another index.js file will be created inside the icon folder and this will export directly the Eye component.

    .figmaexportrc.js

    You can easily add this outputter to your .figmaexportrc.js:

    module.exports = {
        commands: [
            ['components', {
                fileId: 'fzYhvQpqwhZDUImRz431Qo',
                onlyFromPages: ['icons', 'unit-test'],
                outputters: [
                    require('@figma-export/output-components-as-svgr')({
                        output: './output'
                    })
                ]
            }],
        ]
    }

    output is mandatory.

    getDirname, getComponentName, getFileExtension and getSvgrConfig are optional.

    const path = require('path');
    const { pascalCase } = require('@figma-export/utils');
    
    ...
    
    require('@figma-export/output-components-as-svgr')({
        output: './output',
        getDirname: (options) => `${options.pageName}${path.sep}${options.dirname}`,
        getComponentName: (options) => `${pascalCase(options.basename)}`,
        getFileExtension: (options) => '.jsx',
        getSvgrConfig: (options) => ({}),
    })

    defaults may change, please refer to ./src/index.ts

    getSvgrConfig is a function that returns the SVGR configuration object.

    Install

    Using npm:

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

    or using yarn:

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

    Install

    npm i @figma-export/output-components-as-svgr

    DownloadsWeekly Downloads

    534

    Version

    3.3.1

    License

    MIT

    Unpacked Size

    15.6 kB

    Total Files

    13

    Last publish

    Collaborators

    • avatar