Code Monkey home page Code Monkey logo

juuust-react-icon's Introduction

Icon Automation Workflow Using Figma

It's a repository for Figma Icon Automation Plugin.

Development

Create a .env in the root directory. Put your Figma file url and Figma token inside.

FIGMA_FILE_URL=https://www.figma.com/file/********************/juuust-react-icon
FIGMA_TOKEN=********************************

fetch SVG file

Run yarn fetch to fetch SVG files from Figma file. This will pull your SVGs in ./src/svg/.

generate React components for icons

Run yarn generate to generate component files from SVG files. This will pull your component files in ./src/icons/.

Develop in local

Run yarn dev to develop the application in which you can see all icons.

Develop in local

Run yarn build to build Pages.

juuust-react-icon's People

Contributors

dependabot[bot] avatar gavin-gong avatar hallee9000 avatar sinchang avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

juuust-react-icon's Issues

local dev styled-components is not working

Hi leadream, I'm trying to work locally through yarn dev and the styled-components are not rendering at all. But, it outputs just fine after I push/merge and viewing it in gh-pages. Is this related to the rollup bundler?

I tried inline-styling locally and that works fine.

Generating svg and component automatically?

Hi leadream, thank you for building this great automation plugin. It is exactly what I was looking for!

So I got my workflow set up and working but I don't see my icon's .svg files or react component being generated to the /svg and /icons folders. Wondering if this is supposed to be automatic through Github Action or do I have to manually fetch locally?

Thanks again!
Arturo

Generating Typescript definitions files

Hey there, first would love to say that the Figma Icon Automation is a wonderful plugin. Incredible job 👍🏾!

I could be wrong but reading those lines I assumed these commands would generate a icons.d.ts file in the final build before it get published

https://github.com/leadream/juuust-react-icon/blob/9af90d3fece12ff76f9f55045771a00a65b1fb51/bin/build.js#L27-L36

...But instead I only have this content when I install the published module.

Screenshot 2020-10-04 at 20 29 23

Am I missing something here or it's just how it's supposed to be ?

If not, do you have any idea how we could generate those TS definitions at the build phase ?

Thank you for your help.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.