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

    4.4.0 • Public • Published

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

    Outputter for @figma-export that exports components in svg file (SVG Sprites).

    With this outputter you can export all components as <symbol> inside a .svg file named with the page name.

    This is a sample of the output:

    $ tree output/
    # output/
    # ├── icons.svg
    # └── unit-test.svg

    Probably you already know what CSS Sprites are, basically you can combine multiple images into a single image file and use it on a website.

    SVG Sprites are very similar, but use svg instead of png.

    You can read more on Icon System with SVG Sprites article where you can find how to use them.

    .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-svgstore')({
                        output: './output'
                    })
                ]
            }],
        ]
    }

    output is mandatory.

    getIconId and svgstoreConfig are optional.

    require('@figma-export/output-components-as-svgstore')({
        output: './output',
        getIconId: (options) => `${options.pageName}/${options.componentName}`,
        svgstoreConfig: {},
    })

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

    svgstoreConfig is the svgstore configuration object.

    Install

    Using npm:

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

    or using yarn:

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

    Install

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

    DownloadsWeekly Downloads

    57

    Version

    4.4.0

    License

    MIT

    Unpacked Size

    9.47 kB

    Total Files

    13

    Last publish

    Collaborators

    • marcomontalbano