@yandex/figma-icon-extractor

A tool for extract icons from figma in jsx and svg.

Usage no npm install needed!

<script type="module">
  import yandexFigmaIconExtractor from 'https://cdn.skypack.dev/@yandex/figma-icon-extractor';
</script>

README

figma-icon-extractor ( WIP )

A tool for extract icons from figma in jsx and svg.

Usage

import extract from '@yandex/figma-icon-extractor'
import { resolve } from 'path'

const { FIGMA_TOKEN = '', FIGMA_FILE = '', FIGMA_PAGE = '' } = process.env
const resultDir = resolve(__dirname, 'test')
const params = {
  token: FIGMA_TOKEN,
  file: FIGMA_FILE,
  page: FIGMA_PAGE,
}

extract(resultDir, params)

or via npx

npx @yandex/figma-icon-extractor <resultDir> <token> <file> <page> [filter]
  • token — Figma development token
  • file — File id in figma
  • page — Page id in figma
  • filter - Optional. Which files should be generated either svg or tsx or svg+tsx
  • --preserve-color - Optional. Disables replacing colors with currentColor

Hint: You can retrieve file and page ids from url https://www.figma.com/file/<file id>/<file name>?node-id=<page id>

How it work

  1. Fetch components id from figma document
  2. Fetch svg url for each component
  3. Fetch svg source for each component
  4. Optimize svg by svgo
  5. Convert svg to jsx
  6. Write jsx and svg to fs
  7. Write index with all exports