@figma-export/output-components-as-svg
v6.0.1
Published
Outputter for @figma-export that exports components as svg
Downloads
22,088
Maintainers
Readme
@figma-export/output-components-as-svg
Outputter for @figma-export that exports components as svg.
With this outputter you can export all components as svg into the specified output folder.
This is a sample of the output from this Figma file:
$ tree output/
# output
# ├── icons
# │ ├── figma-arrow.svg
# │ ├── figma-export.svg
# │ └── figma-logo.svg
# └── unit-test
# ├── figma
# │ ├── logo
# │ │ ├── main (bright).svg
# │ │ └── main.svg
# │ └── logo.svg
# └── figma default logo.svg
Tip: A component named
icon/eye
will be exported aseye.svg
inside theicon
folder.
.figmaexportrc.js
You can easily add this outputter to your .figmaexportrc.js
:
import asSvg from '@figma-export/output-components-as-svg'
export default {
commands: [
['components', {
fileId: 'fzYhvQpqwhZDUImRz431Qo',
onlyFromPages: ['icons', 'unit-test'],
outputters: [
asSvg({
output: './output'
})
]
}],
]
}
output
is mandatory.
getDirname
and getBasename
are optional.
import asSvg from '@figma-export/output-components-as-svg'
import path from 'path'
...
asSvg({
output: './output',
getDirname: (options) => `${options.pageName}${path.sep}${options.dirname}`,
getBasename: (options) => `${options.basename}.svg`,
})
defaults may change, please refer to
./src/index.ts
Install
Using npm:
npm install --save-dev @figma-export/output-components-as-svg
or using yarn:
yarn add @figma-export/output-components-as-svg --dev