search

halfmage / pixelarticons

👾 Beautiful pixel icons. For the pixel vibes.
https://pixelarticons.com
MIT License
440 stars 13 forks source link

Svg Compound Path version #2

Closed punker76 closed 3 years ago

punker76 commented 3 years ago

Thx for this awesome Svg library.

It would be great to have these svg in a compound path svg version, to use this at the Xaml world.

halfmage commented 3 years ago

Hey, @punker76 thanks for your issue report. What exactly do you mean with "compound path" SVGs?

punker76 commented 3 years ago

I meant, for example, that there is only one path inside the Svg.

Instead this:

<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
    <g clip-path="url(#clip0)">
        <path d="M7 4V6H11V12H13V6H17V4H15V2H13V0H11V2H9V4H7Z" fill="currentColor"/>
        <path d="M7 20V18H11V12H13V18H17V20H15V22H13V24H11V22H9V20H7Z" fill="currentColor"/>
        <path d="M20 7.00003L18 7.00003L18 11L12 11L12 13L18 13L18 17L20 17L20 15L22 15L22 13L24 13L24 11L22 11L22 9.00003L20 9.00003L20 7.00003Z" fill="currentColor"/>
        <path d="M4 7.00003L6 7.00003L6 11L12 11L12 13L6 13L6 17L4 17L4 15L2 15L2 13L-2.62268e-07 13L-1.74846e-07 11L2 11L2 9.00003L4 9.00003L4 7.00003Z" fill="currentColor"/>
    </g>
    <defs>
        <clipPath id="clip0">
            <rect fill="white" height="24" width="24"/>
        </clipPath>
    </defs>
</svg>

to this:

<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
  <g clip-path="url(#clip0)">
    <path d="M 11 0 L 11 2 L 9 2 L 9 4 L 7 4 L 7 6 L 11 6 L 11 11 L 6 11 L 6 7 L 4 7 L 4 9 L 2 9 L 2 11 L 0 11 L 0 13 L 2 13 L 2 15 L 4 15 L 4 17 L 6 17 L 6 13 L 11 13 L 11 18 L 7 18 L 7 20 L 9 20 L 9 22 L 11 22 L 11 24 L 13 24 L 13 22 L 15 22 L 15 20 L 17 20 L 17 18 L 13 18 L 13 13 L 18 13 L 18 17 L 20 17 L 20 15 L 22 15 L 22 13 L 24 13 L 24 11 L 22 11 L 22 9 L 20 9 L 20 7 L 18 7 L 18 11 L 13 11 L 13 6 L 17 6 L 17 4 L 15 4 L 15 2 L 13 2 L 13 0 L 11 0 z " fill="currentColor"/>
  </g>
  <defs>
    <clipPath id="clip0">
      <rect fill="white" height="24" width="24"/>
    </clipPath>
  </defs>
</svg>

or 

<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
    <rect fill="currentColor" height="4" width="2" x="5" y="9"/>
    <rect fill="currentColor" height="2" width="6" x="5" y="11"/>
    <rect fill="currentColor" height="6" width="2" x="9" y="9"/>
    <rect fill="currentColor" height="6" width="2" x="13" y="9"/>
    <rect fill="currentColor" height="2" width="2" x="17" y="9"/>
    <rect fill="currentColor" height="2" width="2" x="17" y="13"/>
    <rect fill="currentColor" height="2" width="4" x="13" y="11"/>
    <rect fill="currentColor" height="16" width="2" x="1" y="4"/>
    <rect fill="currentColor" height="16" width="2" x="21" y="4"/>
    <rect fill="currentColor" height="2" width="22" x="1" y="4"/>
    <rect fill="currentColor" height="2" width="22" x="1" y="18"/>
</svg>

to

<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
  <path
     d="m 1,18 h 22 v 2 H 1 Z M 1,4 H 23 V 6 H 1 Z m 20,0 h 2 V 20 H 21 Z M 1,4 H 3 V 20 H 1 Z m 12,7 h 4 v 2 h -4 z m 4,2 h 2 v 2 h -2 z m 0,-4 h 2 v 2 h -2 z m -4,0 h 2 v 6 H 13 Z M 9,9 h 2 v 6 H 9 Z m -4,2 h 6 v 2 H 5 Z M 5,9 h 2 v 4 H 5 Z"
     style="fill:currentColor" />
</svg>

Background, I would like to provide the icons in the IconPacks library. It's a lib to use Icons in a simple way for WPF and UWP applications.

halfmage commented 3 years ago

Sounds great! I will review that soon. For me, the second "to" where everything is in one <path> element looks the most promising an easiest to update.

halfmage commented 3 years ago

Just to be sure I made some adjustments to the 4k.svg for an example:

Current SVG markup:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect x="5" y="9" width="2" height="4" fill="currentColor"/>
  <rect x="5" y="11" width="6" height="2" fill="currentColor"/>
  <rect x="9" y="9" width="2" height="6" fill="currentColor"/>
  <rect x="13" y="9" width="2" height="6" fill="currentColor"/>
  <rect x="17" y="9" width="2" height="2" fill="currentColor"/>
  <rect x="17" y="13" width="2" height="2" fill="currentColor"/>
  <rect x="13" y="11" width="4" height="2" fill="currentColor"/>
  <rect x="1" y="4" width="2" height="16" fill="currentColor"/>
  <rect x="21" y="4" width="2" height="16" fill="currentColor"/>
  <rect x="1" y="4" width="22" height="2" fill="currentColor"/>
  <rect x="1" y="18" width="22" height="2" fill="currentColor"/>
</svg>

Union shape version:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
  <path fill-rule="evenodd" d="M3 7h2v4h4V7h2v10H9v-4H3V7zm10 0h2v4h2v2h-2v4h-2V7zm6 8h-2v-2h2v2zm0 0h2v2h-2v-2zm0-6h-2v2h2V9zm0 0V7h2v2h-2z" clip-rule="evenodd"/>
</svg>

Some questions I would still have:

  1. Would that markup be usable for you?
  2. Are the widthand heightattributes necessary? Or just viewBox
  3. SVG has fill="currentColor" path has no fill. Would that be recommended?
punker76 commented 3 years ago

Some questions I would still have:

  1. Would that markup be usable for you?

I can't directly use the fill-rule and clip-rule, so I need Inkscape to us ethe combine function to get only the d data, but that's ok.
Reason is, that I really can only use the d data with single color.

  1. Are the widthand heightattributes necessary? Or just viewBox

For me not necessary, maybe for other people.

  1. SVG has fill="currentColor" path has no fill. Would that be recommended?

The only thing is, that I can only use one color.

Thank you!

PS: Your 4k has now no border around.

halfmage commented 3 years ago

Thanks for your feedback! According to this, I think a markup structure like this would fit your needs, and it works perfectly on the web too.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <path fill="currentColor" d="M3 7h2v4h4V7h2v10H9v-4H3V7zm10 0h2v4h2v2h-2v4h-2V7zm6 8h-2v-2h2v2zm0 0h2v2h-2v-2zm0-6h-2v2h2V9zm0 0V7h2v2h-2z" />
</svg>

PS: In the new version I removed the border around the icon, because I am working on a filled version for all icons.

punker76 commented 3 years ago

@halfmage Thx again. If you have a pre-release then let me know and I will check the results for my lib. I can ignore the fill attribute because I use only the path data and use a brush color to fill the path at WPF or UWP, so it should now work. 👍

halfmage commented 3 years ago

@halfmage Thx again. If you have a pre-release then let me know and I will check the results for my lib. I can ignore the fill attribute because I use only the path data and use a brush color to fill the path at WPF or UWP, so it should now work. 👍

Great! Will soon open a new branch for the new icons! Thanks for your help & quick replies!

halfmage commented 3 years ago

@punker76 I am working on the updates right now and wanted to share the first then icons with you so you can test them already. A lot of the icons need a rework to look fine without the fill-rule and clip-rule but we will fix that!

<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path  d="M3 7h2v4h4V7h2v10H9v-4H3V7zm10 0h2v4h2v2h-2v4h-2V7zm6 8h-2v-2h2v2zm0 0h2v2h-2v-2zm0-6h-2v2h2V9zm0 0V7h2v2h-2z" fill="currentColor"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path  d="M3 3h18v18H3V3zm16 16V5H5v14h14zm-6-8h4v2h-4v4h-2v-4H7v-2h4V7h2v4z" fill="currentColor"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path  d="M2 2h10v20H2v-2h8v-4H2v-2h8v-4H2V8h8V4H2V2zm17 9h3v2h-3v3h-2v-3h-3v-2h3V8h2v3z" fill="currentColor"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path  d="M3 3h8v8H3V3zm6 6V5H5v4h4zm9 4h-2v3h-3v2h3v3h2v-3h3v-2h-3v-3zM15 3h6v8h-8V3h2zm4 6V5h-4v4h4zM5 13h6v8H3v-8h2zm4 6v-4H5v4h4z" fill="currentColor"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path  d="M4 10V2H2v10h20V2h-2v8h-4V2h-2v8h-4V2H8v8H4zm9 9v3h-2v-3H8v-2h3v-3h2v3h3v2h-3z" fill="currentColor"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path  d="M20 5H4v2h16V5zm-4 4H8v2h8V9zM4 13h16v2H4v-2zm12 4H8v2h8v-2z" fill="currentColor"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path  d="M20 5H4v2h16V5zm0 4H4v2h16V9zM4 13h16v2H4v-2zm16 4H4v2h16v-2z" fill="currentColor"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path  d="M20 5H4v2h16V5zm-8 4H4v2h8V9zm8 4v2H4v-2h16zm-8 4H4v2h8v-2z" fill="currentColor"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path  d="M4 5h16v2H4V5zm8 4h8v2h-8V9zm-8 4v2h16v-2H4zm8 4h8v2h-8v-2z" fill="currentColor"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path  d="M3 3h18v18H3V3zm16 2H5v14h14V5zM7 12h2v5H7v-5zm10-5h-2v10h2V7zm-6 3h2v2h-2v-2zm2 4h-2v3h2v-3z" fill="currentColor"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path  d="M14 3h-4v2H8v4h2v2h1v8H6v-4h2v-2H4v6h2v2h12v-2h2v-6h-4v2h2v4h-5v-8h1V9h2V5h-2V3zm0 2v4h-4V5h4z" fill="currentColor"/></svg>
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path  d="M2 5h2v2H2V5zm4 4H4V7h2v2zm2 0H6v2H4v2H2v6h20v-6h-2v-2h-2V9h2V7h2V5h-2v2h-2v2h-2V7H8v2zm0 0h8v2h2v2h2v4H4v-4h2v-2h2V9zm2 4H8v2h2v-2zm4 0h2v2h-2v-2z" fill="currentColor"/></svg>

Let me know if that works fine for you 👋

punker76 commented 3 years ago

@halfmage Works perfectly...

image

halfmage commented 3 years ago

Hello @punker76!

I reworked all the icons last week and made some more tweaks to optimized the source code of all SVG icons. Other icons that were already on the website but not inside the package were added and have a total icon count of 359 icons!

👏 Release post for v1.2.0

Let me know if that works fine for you! If everything works fine we can close this Issue :)

punker76 commented 3 years ago

@halfmage I think it rocks 🚀

image

punker76 commented 3 years ago

@halfmage https://github.com/MahApps/MahApps.Metro.IconPacks/pull/222