@figma-export/output-components-as-svgstore
v6.0.1
Published
Outputter for @figma-export that exports components in svg file ( SVG Sprites )
Downloads
1,049
Maintainers
Readme
@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