# react-lp

> Learn how to deliver SVG icons to React using Figma API

Latest version **0.1.0** (published 2022-05-27) · 0 weekly downloads

## Install

```sh
npm install react-lp
pnpm add react-lp
yarn add react-lp
bun add react-lp
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2022-05-27 |
| First published | 2022-05-27 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 10 |
| Unpacked size | 4.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | yes |
| Maintainers | govardhana-c |

## Links

- npm: https://www.npmjs.com/package/react-lp
- npm.io page: https://npm.io/package/react-lp

## Dependencies (10)

- [react](https://npm.io/package/react.md) ^16.13.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.13.1
- [classnames](https://npm.io/package/classnames.md) 2.2.6
- [prop-types](https://npm.io/package/prop-types.md) 15.7.2
- [react-scripts](https://npm.io/package/react-scripts.md) 3.4.1
- [styled-component](https://npm.io/package/styled-component.md) ^2.8.0
- [styled-components](https://npm.io/package/styled-components.md) ^5.3.5
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^9.3.2
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^4.2.4
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^7.1.2

## Recent versions

- 0.1.0 (latest) — 2022-05-27

## README

# how-to-deliver-svg-icons-to-react
Learn how to deliver SVG icons to React using Figma API

Code implementations for automare delivery svg icons from Figma to React project. 
Check all branches with difference features. 

Figma project [example](https://www.figma.com/file/B1v7c2kZ8EnvF3tLlxmT69/how-to-delivery-svg-from-figma-to-react).
For more information you can read [my article](https://levelup.gitconnected.com/learn-svg-to-react-using-figma-api-be0a5f9c0ca).

## Try yourself 

You can clone the repo and try the example on your Figma project.

#### 1. Create frame with icons
All icons should be palced in one specific frame and implements like a figma component.
Figma icons naming convention: `icon-[name]`.

#### 2. Set Figma settings
Create in root dir `.env` file.

Example of URL in browser, when you pick frame with icons
```
https://www.figma.com/file/B1v7c2kZ8EnvG3tLlxmT89/how-to-delivery-svg-from-figma-to-react?node-id=2%3A3
```
Exmaple .env file

```
FIGMA_TOKEN="31972-e6f223ff-3ca1-4c15-ba90-928da496b4bb"
FILE_KEY="B1v7c2kZ8EnvG3tLlxmT89"
FRAME_WITH_ICONS_ID="2:3"
```

NOTE: `FILE_KEY` and `FRAME_WITH_ICONS_ID` you can get from browser url when select frame. But in url frame id is encoded uri value. You should decode it. You can make in right in `dev tools console`
```
> decodeURIComponent('2%3A3')
<- '2:3'
```

#### 3. Run project and overview results

1. install dependencies
```
yarn
```

2. start project
```
yarn start
```

---
_Source: https://npm.io/package/react-lp · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._