Show/Hide icon - Githubissues

designertyler commented 6 years ago

Overview This icon is based on and the opposite of the "View" icon in the IBM design language icon library. The icon is used to toggle the visibility of a text field commonly used for sensitive keys or passwords. The icons is designed to be the on/secure/hidden state of the normal View icon.

Background I had a need for this icon in Schematics and created this as a one-off that's currently in production. Morgana D'Almeida had the same need for Cloud functions and ended up created a very similar icon on her own. I'm sure other teams will have a need for this in the future.

Current icon used in Schematics showvariable--glyph

SVG

<svg width="22" height="16" viewBox="0 0 22 16" xmlns="http://www.w3.org/2000/svg">
  <title>
    Artboard
  </title>
  <path d="M18.26 3.802c1.502 1.22 2.77 2.704 3.74 4.378-2.3 3.9-6.1 7-11 7-1.204 0-2.4-.193-3.542-.575l1.622-1.623c.632.13 1.275.197 1.92.198 4.3 0 7-2.7 8.6-5-.762-1.122-1.69-2.123-2.75-2.97l1.41-1.408zM3.8 12.607C2.27 11.377.982 9.877 0 8.18c2.3-3.9 6.1-7 11-7 1.232 0 2.457.203 3.622.604l-1.61 1.61c-.662-.14-1.337-.214-2.012-.214-4.3 0-7 2.7-8.6 5 .777 1.143 1.725 2.16 2.81 3.015L3.8 12.607zM8 8.18c0-1.657 1.343-3 3-3 .07 0 .136.016.205.02L8.02 8.385C8.017 8.315 8 8.25 8 8.18zm3 3c-.036 0-.07-.01-.106-.01l3.095-3.097c0 .036.01.07.01.107 0 1.656-1.344 3-3 3zm2.72-4.25L9.75 10.9l-1.785 1.784-1.523 1.522-1.527 1.528L3.44 14.38l1.178-1.18 1.43-1.43 2.27-2.27 4.003-4 1.796-1.795 1.518-1.518 2.01-2.01 1.487 1.34L17.45 3.2l-1.43 1.43-2.3 2.3h.002z" fill-rule="nonzero" fill="#000"/>
</svg>

designertyler commented 6 years ago

I just found a similar icon used for the DevEx projects:

designertyler commented 6 years ago

@aagonzales Here is a cleaned up version of the eye icon. I also made a version of the IBM design eye that is the same size to help with alignment when toggling them on and off.

Let me know if there's any feedback, changes, or what I can do next.

eye--hidden eye--shown

eye-svgfiles.zip

aagonzales commented 6 years ago

@designertyler looking good! Just one think I think the white/negative space around the slash could be increased a little. It runs together a little in a pixel view. The vector looks nice though.

Also have you synced up with Morgana on this?

marijohannessen commented 6 years ago

@designertyler any updates on this?

designertyler commented 6 years ago

@marijohannessen This bas been on the back burner so I haven't put too much work into it this week.

My next steps were:

Make it as a square icon rather than the rectangular one I posted earlier. Square would let the slash extend further outside the eye.
Do some cleanup on the thickness of the stroke to make it match the weight of the 2px stroke on the other icons.
Improve the white space around the slash so it doesn't blend into the pupil of the eye.
I wanted to remake the IBM Design eye icon as a square so it's easier to toggle back and forth without any jumping/jittery movement.
Get with Morgana to see if she had any input.

screen shot 2017-11-09 at 2 53 23 pm

joshblack commented 6 years ago

Closing this issue since I believe it was addressed in our v9 release in:

https://github.com/carbon-design-system/carbon-icons/blob/master/src/svg/visibility-on.svg https://github.com/carbon-design-system/carbon-icons/blob/master/src/svg/visibility-off.svg

Feel free to re-open if that's not the case!

carbon-design-system / carbon-icons

Show/Hide icon #52