Git Product home page Git Product logo

react-gensvg's Introduction

๐Ÿ‘‹ Hi, there

Hmmm, Interesting

What brings you here?

Tizee's Blog โœ๏ธ

๐Ÿ‘พ Weekly Code

๐Ÿ–– Code long and prosper

๐Ÿฆ„ Markdown     0h6m   [=====================] 100.0%

react-gensvg's People

Contributors

dependabot-preview[bot] avatar tizee avatar

Watchers

 avatar  avatar

react-gensvg's Issues

Cannot generate jsx file

npx gencli -s ./icons -d ./output --jsx
npx gencli -s ./icons -d ./output --jsx=true
npx gencli -s ./icons -d ./output --jsx

All above commands generate tsx files instead of jsx files.

Cannot convert SVG with style

Currently this tool simply use svg-parser to get HAST, which means it cannot convert CSS style.

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
      <defs>
        <style>
          .c-blue{
          fill: #83a4d7;
          }
          .c-0 {
            fill: #f15a57;
          }
        </style>
      </defs>
    ....
  </svg>

This will generate following code as it cannot be formatted by prettier.format.

import React, { forwardRef } from 'react';

const SvgWithStyle = forwardRef(
  ({ ...rest }, ref) => {
    return (
      <svg 
         ref={ref}
  xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 16 16"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
    {...rest}
    ><defs >
<style >
          .c-blue{
          fill: #83a4d7;
          }
          .c-0 {
            fill: #f15a57;
          }

</style>
</defs>
...
</svg>
    );
  }
);

export default SvgWithStyle;

The workaround is that skip formatting when an error is throwing from the prettier.format .

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.