figma-svg-json-loader
Figma to SVG URL loader module for webpack.
Install
yarn add --dev figma-svg-json-loader
npm install --save-dev figma-svg-json-loader
Webpack Configuration
moduleexports = ... module: rules: test: /\./ use: loader: 'figma-svg-json-loader' options: accessToken: 'FIGMA-PERSONAL-ACCESS-TOKEN' encoding: 'base64' /* or 'raw' */
Figma Document Setup
- Create a Figma document with frames on the top level of a page.
- Assets are extracted by page name and frame name.
- For each Figma document used in your project, create a
*.figma
file containing the Figma File ID, e.g.eMV7Sxpjs7y6HhnQyC0roR
Here's an example of a figma document layout:
document 'icons'
page 'symbols'
frame 'star'
frame 'fish'
page 'social'
frame 'facebook'
frame 'twitter'
Example usage in CSS
Example usage in JS
const icons = symbols: star: "<svg>...</svg>" fish: "<svg>...</svg>" social: twitter: star: "<svg>...</svg>" facebook: star: "<svg>...</svg>"