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

@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:

import asSvgstore from '@figma-export/output-components-as-svgstore'

export default {
    commands: [
        ['components', {
            fileId: 'fzYhvQpqwhZDUImRz431Qo',
            onlyFromPages: ['icons', 'unit-test'],
            outputters: [
                asSvgstore({
                    output: './output'
                })
            ]
        }],
    ]
}

output is mandatory.

getIconId and svgstoreConfig are optional.

import asSvgstore from '@figma-export/output-components-as-svgstore'

asSvgstore({
    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