Run svg through SVGO? - Githubissues

GrossDesignCo commented 3 years ago

I'm just starting to integrate these icons into a new project & noticed that there's some extra markup in the svgs that we removed when working them into our markup.

Example: Link

Pre-SVGO

<svg
  height="21"
  viewBox="0 0 21 21"
  width="21"
  xmlns="http://www.w3.org/2000/svg"
>
  <g
    fill="none"
    fill-rule="evenodd"
    stroke="#2a2e3b"
    stroke-linecap="round"
    stroke-linejoin="round"
    transform="translate(3 4)"
  >
    <path
      d="m4.17157288 4.87867966v-1.41421357c0-1.56209716 1.26632995-2.82842712 2.82842712-2.82842712s2.82842712 1.26632996 2.82842712 2.82842712v1.41421357m0 2.82842712v2.82842712c0 1.5620972-1.26632995 2.8284271-2.82842712 2.8284271s-2.82842712-1.2663299-2.82842712-2.8284271v-2.82842712"
      transform="matrix(.70710678 .70710678 -.70710678 .70710678 7 -2.899495)"
    />
    <path d="m4.5 9.5 5-5" />
  </g>
</svg>;

Post-SVGO

<svg viewBox="0 0 21 21" height="21" width="21" xmlns="http://www.w3.org/2000/svg">
    <path
      fill="none"
      fillRule="evenodd"
      stroke="#2a2e3b"
      strokeLinecap="round"
      strokeLinejoin="round"
      d="M9.5 7.5l1-1a2.828 2.828 0 114 4l-1 1m-2 2l-2 2a2.828 2.828 0 11-4-4l2-2M7.5 13.5l5-5"
    />
  </svg>

Is this something that's in the works eventually? I'm happy to SVGO the icons for our project, but it might same some CDN bandwidth to do them on the source side :)

CoreyGinnivan commented 3 years ago

Yeah this is something I'm trying to lock down at the moment. For some reason when compressing them, a few icons break when getting imported in to design tools. A quick fix is to just run them all through it and then undo the ones that look broken I guess? Open to ideas on how to properly get this working. I think some of them may have been how they were designed, so I'm redoing a bunch at the moment 😅

GrossDesignCo commented 3 years ago

I’ve found myself retracing icons in svg by hand sometimes.

Alternately, you can play with the precision or utility options on svgomg for those specific icons to get the paths just right post-process. It really only needs to happen once for each icon, so you could even run them through manually and then make that a requirement for anyone who wants to submit an icon

On Tue, Mar 16, 2021 at 12:04 AM Corey @.***> wrote:

Yeah this is something I'm trying to lock down at the moment. For some reason when compressing them, a few icons break when getting imported in to design tools. A quick fix is to just run them all through it and then undo the ones that look broken I guess? Open to ideas on how to properly get this working. I think some of them may have been how they were designed, so I'm redoing a bunch at the moment 😅

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/CoreyGinnivan/system-uicons/issues/24#issuecomment-800010047, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABGGRVWGAOOHYWR7VMDLB5DTD37GHANCNFSM4YQDXZCQ .

CoreyGinnivan commented 3 years ago

I've compressed quite a lot now. Some still have the complex layout but I think it's mostly due to how they're positioned? Going to close for now https://github.com/CoreyGinnivan/system-uicons/pull/28

CoreyGinnivan / system-uicons

Run svg through SVGO? #24