Svg

Creates frame with figma nodes inside from svg source code. Wrapper for the Figma createNodeFromSvg.

Props

PropTypeDefaultNote
nameStringThe name to be displayed in the Figma Layers List
sourceStringCode of svg
styleStyleNot all props
onSelectionEnterFunctionSelection enter event callback
onSelectionLeaveFunctionSelection leave event callback
onLayoutFunctionEvent is fired once the layout has been calculated
onNodeIdFuctionGetting Figma Node ID callback

Also, most of the Frame props are supported.

Examples

svg-inline-loader is supported:

import * as icon from './icon.svg';
...
<Svg source={icon} style={{ width: 300, height: 300 }} />

Also dynamic source supported:

const source = `<svg><path fill=`${flag ? "#ff0000" : "#00ff00"}`></path></svg>`
<Svg source={source} />