npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

bulk-svg-prettify

v0.0.5

Published

Bulk format SVG files to for readability.

Downloads

7

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

ottofyottofy

Keywords

svgformatprettybeautify

Readme

bulk-svg-prettify

Custom CLI script to prettify SVG files in bulk.

Utilizes @svg-parser for parsing.

npm i bulk-svg-prettify

Usage

Specify The following to run the script. -f: SVG files directory (directory containing the SVG files you want to prettify) -o: Output directory (directory where you want the prettified SVG files to be saved)

Paths are relative to your package.json file.

Files in the output directory will be overwritten if they already exist.

From your command line, run the following:

bulk-svg-prettify -f ./path/to/svgs -o ./path/to/svgoutput

Or create a script in your package.json file:

"parse": "bulk-svg-prettify -f ./icons -o ./output"

For help run the following:

bulk-svg-prettify -h

Example Output

#Before

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 200 200"><path fill="url(#a)" fill-rule="evenodd" d="M32 100.6a68.4 68.4 0 0 1 52-66.5V1.3C36.4 9 0 50.5 0 100.6c0 50.1 36.4 91.7 84 99.4v-32.8a68.4 68.4 0 0 1-52-66.6Zm168 0c0 50.1-36.4 91.7-84 99.4v-32.8a68.4 68.4 0 0 0 52-66.6 68.4 68.4 0 0 0-52-66.5V1.3c47.6 7.7 84 49.2 84 99.3Z" clip-rule="evenodd"/><defs><linearGradient id="a" x1="157.5" x2="44.7" y1="33.1" y2="148.6" gradientUnits="userSpaceOnUse"><stop offset=".1" stop-color="#0089ae"/><stop offset="1" stop-color="#025b74"/></linearGradient></defs></svg>
#After

<svg
  width="24px"
  height="24px"
  viewBox="0 0 200 200"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <path
    fill-rule="evenodd"
    clip-rule="evenodd"
    d="M32 100.641C32 68.391 54.1651 41.3515 84 34.1102V1.28125C36.3772 8.98855 0 50.5392 0 100.641C0 150.742 36.3772 192.293 84 200V167.171C54.1651 159.93 32 132.89 32 100.641ZM200 100.641C200 150.742 163.623 192.293 116 200V167.171C145.835 159.93 168 132.89 168 100.641C168 68.391 145.835 41.3515 116 34.1102V1.28125C163.623 8.98855 200 50.5392 200 100.641Z"
    fill="url(#paint0_linear_231_555)"
  />
  <defs>
    <linearGradient
      id="paint0_linear_231_555"
      x1="157.5"
      y1="33.0763"
      x2="44.7421"
      y2="148.561"
      gradientUnits="userSpaceOnUse">
      <stop
        offset="0.0509862"
        stop-color="#0089ae"
      />
      <stop
        offset="1"
        stop-color="#025b74"
      />
    </linearGradient>
  </defs>
</svg>

Handles Large svgs with complex gradients

#Before

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 320 271" class="resources_vercelIllustration__s6HRH"><mask height="278" id="mask0_1317_334" maskUnits="userSpaceOnUse" style="mask-type:alpha" width="600" x="-173" y="-7"><ellipse cx="127" cy="131.634" fill="url(#paint0_radial_1317_334)" rx="300" ry="138.634"/></mask><g mask="url(#mask0_1317_334)"><path d="M126.179 109.505C118.734 109.505 113.367 114.348 113.367 121.614C113.367 128.879 119.402 133.723 126.853 133.723C131.351 133.723 135.316 131.947 137.77 128.953L132.612 125.98C131.25 127.466 129.179 128.334 126.853 128.334C123.623 128.334 120.879 126.652 119.86 123.961H138.755C138.903 123.208 138.991 122.428 138.991 121.607C138.991 114.348 133.63 109.505 126.179 109.505ZM119.806 119.259C120.649 116.575 122.956 114.886 126.179 114.886C129.409 114.886 131.715 116.575 132.551 119.259H119.806ZM118.283 102.105L99.5974 134.395L80.9056 102.105H87.9116L99.5907 122.286L111.27 102.105H118.283ZM55.1267 98.7412L80.0424 141.795H30.2109L55.1267 98.7412ZM166.098 121.614C166.098 125.65 168.741 128.341 172.841 128.341C175.619 128.341 177.703 127.083 178.775 125.031L183.954 128.011C181.809 131.577 177.79 133.723 172.841 133.723C165.39 133.723 160.029 128.879 160.029 121.614C160.029 114.348 165.397 109.505 172.841 109.505C177.79 109.505 181.803 111.651 183.954 115.216L178.775 118.196C177.703 116.144 175.619 114.886 172.841 114.886C168.748 114.886 166.098 117.577 166.098 121.614ZM221.715 102.105V133.05H215.646V102.105H221.715ZM198.788 109.505C191.344 109.505 185.977 114.348 185.977 121.614C185.977 128.879 192.018 133.723 199.463 133.723C203.96 133.723 207.925 131.947 210.38 128.953L205.221 125.98C203.859 127.466 201.789 128.334 199.463 128.334C196.233 128.334 193.488 126.652 192.47 123.961H211.364C211.513 123.208 211.6 122.428 211.6 121.607C211.6 114.348 206.24 109.505 198.788 109.505ZM192.416 119.259C193.259 116.575 195.558 114.886 198.788 114.886C202.018 114.886 204.325 116.575 205.161 119.259H192.416ZM158.006 110.177V116.696C157.332 116.501 156.617 116.366 155.848 116.366C151.931 116.366 149.105 119.057 149.105 123.094V133.05H143.036V110.177H149.105V116.366C149.105 112.949 153.09 110.177 158.006 110.177Z" data-logomark="" fill="white"/><line stroke="white" stroke-dasharray="5 5" stroke-opacity="0.4" stroke-width="0.5" x1="-143.73" x2="396.44" y1="98.5132" y2="98.5132"/><line stroke="white" stroke-dasharray="5 5" stroke-opacity="0.4" stroke-width="0.5" style="animation-delay:0.1s" x1="30.8047" x2="30.8047" y1="-14.5773" y2="322.966"/><line stroke="white" stroke-dasharray="5 5" stroke-opacity="0.4" stroke-width="0.5" style="animation-delay:0.2s" x1="0.4626" x2="180.428" y1="3.89746" y2="315.607"/><line stroke="white" stroke-dasharray="5 5" stroke-opacity="0.4" stroke-width="0.5" style="animation-delay:0.3s" x1="24.2282" x2="195.927" y1="3.55225" y2="300.944"/><line stroke="white" stroke-dasharray="5 5" stroke-opacity="0.4" stroke-width="0.5" style="animation-delay:0.4s" x1="221.625" x2="221.625" y1="-14.9214" y2="332.61"/><line stroke="white" stroke-dasharray="5 5" stroke-opacity="0.4" stroke-width="0.5" style="animation-delay:0.5s" x1="-143.73" x2="396.44" y1="134.3" y2="134.3"/><line stroke="white" stroke-dasharray="5 5" stroke-opacity="0.4" stroke-width="0.5" style="animation-delay:0.6s" x1="-143.73" x2="396.44" y1="106.285" y2="106.285"/><line stroke="white" stroke-dasharray="5 5" stroke-opacity="0.4" stroke-width="0.5" style="animation-delay:0.7s" x1="-145.105" x2="397.03" y1="141.545" y2="141.545"/></g><defs><radialGradient cx="0" cy="0" gradientTransform="translate(127 131.634) rotate(90) scale(138.634 300)" gradientUnits="userSpaceOnUse" id="paint0_radial_1317_334" r="1"><stop/><stop offset="1" stop-opacity="0"/></radialGradient></defs></svg>
#After

<svg
  xmlns="http://www.w3.org/2000/svg"
  fill="none"
  viewBox="0 0 320 271"
  class="resources_vercelIllustration__s6HRH"
>
  <mask
    height="278"
    id="mask0_1317_334"
    maskUnits="userSpaceOnUse"
    style="mask-type:alpha"
    width="600"
    x="-173"
    y="-7">
    <ellipse
      cx="127"
      cy="131.634"
      fill="url(#paint0_radial_1317_334)"
      rx="300"
      ry="138.634"
    />
  </mask>
  <g
    mask="url(#mask0_1317_334)">
    <path
      d="M126.179 109.505C118.734 109.505 113.367 114.348 113.367 121.614C113.367 128.879 119.402 133.723 126.853 133.723C131.351 133.723 135.316 131.947 137.77 128.953L132.612 125.98C131.25 127.466 129.179 128.334 126.853 128.334C123.623 128.334 120.879 126.652 119.86 123.961H138.755C138.903 123.208 138.991 122.428 138.991 121.607C138.991 114.348 133.63 109.505 126.179 109.505ZM119.806 119.259C120.649 116.575 122.956 114.886 126.179 114.886C129.409 114.886 131.715 116.575 132.551 119.259H119.806ZM118.283 102.105L99.5974 134.395L80.9056 102.105H87.9116L99.5907 122.286L111.27 102.105H118.283ZM55.1267 98.7412L80.0424 141.795H30.2109L55.1267 98.7412ZM166.098 121.614C166.098 125.65 168.741 128.341 172.841 128.341C175.619 128.341 177.703 127.083 178.775 125.031L183.954 128.011C181.809 131.577 177.79 133.723 172.841 133.723C165.39 133.723 160.029 128.879 160.029 121.614C160.029 114.348 165.397 109.505 172.841 109.505C177.79 109.505 181.803 111.651 183.954 115.216L178.775 118.196C177.703 116.144 175.619 114.886 172.841 114.886C168.748 114.886 166.098 117.577 166.098 121.614ZM221.715 102.105V133.05H215.646V102.105H221.715ZM198.788 109.505C191.344 109.505 185.977 114.348 185.977 121.614C185.977 128.879 192.018 133.723 199.463 133.723C203.96 133.723 207.925 131.947 210.38 128.953L205.221 125.98C203.859 127.466 201.789 128.334 199.463 128.334C196.233 128.334 193.488 126.652 192.47 123.961H211.364C211.513 123.208 211.6 122.428 211.6 121.607C211.6 114.348 206.24 109.505 198.788 109.505ZM192.416 119.259C193.259 116.575 195.558 114.886 198.788 114.886C202.018 114.886 204.325 116.575 205.161 119.259H192.416ZM158.006 110.177V116.696C157.332 116.501 156.617 116.366 155.848 116.366C151.931 116.366 149.105 119.057 149.105 123.094V133.05H143.036V110.177H149.105V116.366C149.105 112.949 153.09 110.177 158.006 110.177Z"
      fill="white"
    />
    <line
      stroke="white"
      stroke-dasharray="5 5"
      stroke-opacity="0.4"
      stroke-width="0.5"
      x1="-143.73"
      x2="396.44"
      y1="98.5132"
      y2="98.5132"
    />
    <line
      stroke="white"
      stroke-dasharray="5 5"
      stroke-opacity="0.4"
      stroke-width="0.5"
      style="animation-delay:0.1s"
      x1="30.8047"
      x2="30.8047"
      y1="-14.5773"
      y2="322.966"
    />
    <line
      stroke="white"
      stroke-dasharray="5 5"
      stroke-opacity="0.4"
      stroke-width="0.5"
      style="animation-delay:0.2s"
      x1="0.4626"
      x2="180.428"
      y1="3.89746"
      y2="315.607"
    />
    <line
      stroke="white"
      stroke-dasharray="5 5"
      stroke-opacity="0.4"
      stroke-width="0.5"
      style="animation-delay:0.3s"
      x1="24.2282"
      x2="195.927"
      y1="3.55225"
      y2="300.944"
    />
    <line
      stroke="white"
      stroke-dasharray="5 5"
      stroke-opacity="0.4"
      stroke-width="0.5"
      style="animation-delay:0.4s"
      x1="221.625"
      x2="221.625"
      y1="-14.9214"
      y2="332.61"
    />
    <line
      stroke="white"
      stroke-dasharray="5 5"
      stroke-opacity="0.4"
      stroke-width="0.5"
      style="animation-delay:0.5s"
      x1="-143.73"
      x2="396.44"
      y1="134.3"
      y2="134.3"
    />
    <line
      stroke="white"
      stroke-dasharray="5 5"
      stroke-opacity="0.4"
      stroke-width="0.5"
      style="animation-delay:0.6s"
      x1="-143.73"
      x2="396.44"
      y1="106.285"
      y2="106.285"
    />
    <line
      stroke="white"
      stroke-dasharray="5 5"
      stroke-opacity="0.4"
      stroke-width="0.5"
      style="animation-delay:0.7s"
      x1="-145.105"
      x2="397.03"
      y1="141.545"
      y2="141.545"
    />
  </g>
  <defs>
    <radialGradient
      cx="0"
      cy="0"
      gradientTransform="translate(127 131.634) rotate(90) scale(138.634 300)"
      gradientUnits="userSpaceOnUse"
      id="paint0_radial_1317_334"
      r="1">
      <stop>
      </stop>
      <stop
        offset="1"
        stop-opacity="0"
      />
    </radialGradient>
  </defs>
</svg>