search

indiana-university / rivet-icons

Icons for Indiana University's Rivet Design System
https://rivet.iu.edu/icons-stickers/
BSD 3-Clause "New" or "Revised" License
5 stars 6 forks source link

Explore not flattening icons #35

Closed basham closed 1 year ago

basham commented 5 years ago

Inspired by a number of recent icon sets, I wanted to see what it would take to make the Rivet icon set use unflattened paths. This would give us more flexibility to scale the icon dimensions, adjust stroke styles, and potentially add multiple colors to an icon.

This CodePen is my experiment. I believe this technique will result in smaller, more readable output. While this means we don't need to flatten in Illustrator, it will probably involve more tweaking of the SVG file itself. The code showcases how to handle solid shapes, path outlines, and masking. https://codepen.io/basham/pen/gJYMRa

Exemplars:

  1. https://www.ikonate.com/
  2. https://iconsvg.xyz/

@levimcg What do you think? Should we explore this direction more or will it not be valuable right now?

basham commented 5 years ago

As an example from the experiment, this is how it could make the alarm code change.

Original alarm (470 characters, without whitespace):

<symbol viewBox="0 0 16 16" id="rvt-icon-alarm">
  <g fill="currentColor">
    <path d="M8 2a7 7 0 0 0-6 10.67l-.94 1.89a1 1 0 0 0 1.79.89l.57-1.13a7 7 0 0 0 9.08 0l.57 1.13a1 1 0 0 0 1.79-.89L14 12.67A7 7 0 0 0 8 2zm0 12a5 5 0 1 1 5-5 5 5 0 0 1-5 5z"/>
    <path d="M9.29 6.29l-2 2A1 1 0 0 0 7 9v3a1 1 0 0 0 2 0V9.41l1.71-1.71a1 1 0 0 0-1.42-1.41zM1.71 3.71l2-2A1 1 0 0 0 2.29.29l-2 2a1 1 0 1 0 1.42 1.42zM15.71 2.29l-2-2A1 1 0 0 0 12.3 1.7l2 2a1 1 0 0 0 1.41-1.41z"/>
  </g>
</symbol>

New version of alarm (327 characters, without whitespace):

<symbol viewBox="0 0 16 16" id="rvt-icon-alarm">
  <g class="path">
    <circle cx="8" cy="9" r="6"/>
    <line x1="8" y1="9" x2="10" y2="7"/>
    <line x1="8" y1="9" x2="8" y2="12"/>
    <line x1="1" y1="3" x2="3" y2="1"/>
    <line x1="15" y1="3" x2="13" y2="1"/>
    <line x1="3" y1="13" x2="2" y2="15"/>
    <line x1="13" y1="13" x2="14" y2="15"/>
  </g>
</symbol>
levimcg commented 5 years ago

@basham Sorry, I've got this on my to-do list to look at more closely, but just haven't had time to get around to it. Looks super interesting! I'll make sure to take a look either today or tomorrow.

basham commented 5 years ago

There are a few challenges to overcome for sure, but there's no rush. This experiment has been weighing in my mind for a number of weeks, and I wanted to finally try something. I'm more interested right now in discussing this direction rather than necessarily going in this direction.

basham commented 1 year ago

Given the switch to Figma, I don't think having a non-flattened version of the icons make sense. That will require too much manual fiddling. It will be more straightforward to just continue to export flat icons from Figma with whatever process is currently in place. I'm closing this.