Giter Club home page Giter Club logo

Comments (2)

r17x avatar r17x commented on June 10, 2024

Hi @Redless , Thanks for your feedback.

About the type output is have 2, Icon Component and createIcon and can't control (Yeah, you right).

Currently, processing some svg it will make a Icon (arrow function) when children element of <svg /> is more than one or NOT a tag <path /> and will make createIcon when only one <path /> children.

Maybe, if we want to add some options or flag to force specific type like createIcon, here's an example output

const ReScript = createIcon({
  displayName: "ReScript",
  viewBox: "0 0 250 250",
  path: [
    <g filter="url(#filter0_i)">
      <path
        d="M0 80.0864C0 46.7186 5.72205e-06 30.0439 8.49552 18.3416C11.2413 14.5639 14.5639 11.2412 18.3417 8.49549C30.0322 -1.90735e-05 46.7186 0 80.0814 0H169.912C203.28 0 219.954 -1.90735e-05 231.657 8.49549C235.434 11.2402 238.755 14.563 241.498 18.3416C249.998 30.0372 249.998 46.7186 249.998 80.0864V169.914C249.998 203.281 249.998 219.956 241.498 231.658C238.756 235.436 235.435 238.758 231.657 241.499C219.961 250 203.28 250 169.912 250H80.0814C46.7186 250 30.0389 250 18.3417 241.499C14.563 238.757 11.2402 235.435 8.49552 231.658C5.72205e-06 219.963 0 203.281 0 169.914V80.0864Z"
        fill="url(#paint0_linear)"
      />
    </g>,
    <path
      d="M67.416 89.6876C67.416 80.2648 67.416 75.5518 69.2571 71.9467C70.8672 68.7756 73.4421 66.1971 76.6111 64.5826C80.2112 62.7516 84.9242 62.7517 94.3519 62.7517L115.854 60.6602L117.915 62.7517V172.151C117.915 179.992 117.346 183.517 116.064 186.606C115.218 188.648 113.978 190.504 112.415 192.066C110.852 193.629 108.997 194.869 106.954 195.714C103.863 196.996 100.509 197.394 92.6699 197.394C84.8288 197.394 80.9057 197.394 77.8162 196.112C75.774 195.267 73.9184 194.027 72.3554 192.464C70.7923 190.902 69.5524 189.046 68.7064 187.004C67.4244 183.913 67.4244 179.99 67.4244 172.151L67.416 89.6876Z"
      fill="black"
      fill-opacity="0.2"
    />,
    <path
      d="M169.41 121.016C185.803 121.016 199.093 107.726 199.093 91.3333C199.093 74.9401 185.803 61.6509 169.41 61.6509C153.017 61.6509 139.728 74.9401 139.728 91.3333C139.728 107.726 153.017 121.016 169.41 121.016Z"
      fill="white"
    />,
    <path
      d="M65.3176 87.5824C65.3176 78.1597 65.3176 73.4466 67.1587 69.8416C68.7688 66.6704 71.3438 64.092 74.5127 62.4775C78.1128 60.6465 82.8258 60.6465 92.2535 60.6465H115.817V170.045C115.817 177.887 115.817 181.81 114.535 184.899C113.689 186.941 112.449 188.797 110.886 190.359C109.323 191.922 107.467 193.162 105.425 194.007C102.334 195.289 98.411 195.289 90.5716 195.289C82.7304 195.289 78.8074 195.289 75.7178 194.007C73.6756 193.162 71.8201 191.922 70.257 190.359C68.6939 188.797 67.454 186.941 66.608 184.899C65.326 181.808 65.326 177.885 65.326 170.045L65.3176 87.5824Z"
      fill="white"
    />,
    <defs>
      <filter
        id="filter0_i"
        x="0"
        y="-1.67367"
        width="249.998"
        height="251.674"
        filterUnits="userSpaceOnUse"
        color-interpolation-filters="sRGB"
      >
        <feFlood flood-opacity="0" result="BackgroundImageFix" />
        <feBlend
          mode="normal"
          in="SourceGraphic"
          in2="BackgroundImageFix"
          result="shape"
        />
        <feColorMatrix
          in="SourceAlpha"
          type="matrix"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
          result="hardAlpha"
        />
        <feOffset dy="-1.67367" />
        <feGaussianBlur stdDeviation="1.67367" />
        <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
        <feColorMatrix
          type="matrix"
          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
        />
        <feBlend mode="normal" in2="shape" result="effect1_innerShadow" />
      </filter>
      <linearGradient
        id="paint0_linear"
        x1="124.999"
        y1="2.68421e-06"
        x2="215.066"
        y2="241.846"
        gradientUnits="userSpaceOnUse"
      >
        <stop stop-color="#E84F4F" />
        <stop offset="0.408823" stop-color="#DB4646" />
        <stop offset="0.998911" stop-color="#CB3939" />
      </linearGradient>
    </defs>
  ]
});

For options to make it specific output, what do you think @Redless & @grikomsn ?

// Icon Component output type
create-chakra-icons ./icon.svg -t component
// functional component output type
create-chakra-icons ./icon.svg -t functional
/// OR
create-chakra-icons ./icon.svg --functional or --component

Thanks

from chakra-icons.

r17x avatar r17x commented on June 10, 2024

Feature Released, see https://github.com/kodingdotninja/chakra-icons/releases/tag/create-chakra-icons%401.1.0

from chakra-icons.

Related Issues (17)

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.