feat(Icons): add ScreenIcon

[JahazielGuzman]

Overview

Add screen icon to be used in community events page.

PR Checklist

• Related to designs:
• Related to JIRA ticket: LEGO-3839
• I have run this code to verify it works
• This PR includes unit tests for the code change
• This PR includes testing instructions tests for the code change
• The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

Don't make me tap the sign.

PR Links and Envs

Repository	PR Link	PR Env
Monolith	Monolith PR	Monolith Env
Portal	Portal Link	Portal Env
Another Repo	Another Link	Another Env

[LinKCoding]

Hi @JahazielGuzman!
this icon doesn't actually show up well on the white/dark backgrounds --
white:

dark:

Do you have a design spec that requires this icon in particular?

Stacey mentioned that there's another icon being submitted that looks like:

Happy to talk more about this, thanks!

[JahazielGuzman]

Hi @JahazielGuzman! this icon doesn't actually show up well on the white/dark backgrounds -- white: dark:

Do you have a design spec that requires this icon in particular?

Stacey mentioned that there's another icon being submitted that looks like:

Happy to talk more about this, thanks!

Hi @LinKCoding! This is the design I was working off of https://www.figma.com/file/7Oe7eNRzW9J0KbShrfbiPy/Events?type=design&node-id=1599-59038&mode=dev

this is what I as afraid of, I've seen this color/fill issue before. And I didn't know about the ScreenIcon, there doesn't seem to be a PR that I could find which would add the ScreenIcon, might you have a reference to the code where that is being added? And how long would it take for this to be merged in?

[jakemhiller]

@JahazielGuzman here's a working SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17"><path stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round" d="M1.167 2.417h13.666s.667 0 .667.666v8.667s0 .667-.667.667H1.167s-.667 0-.667-.667V3.083s0-.666.667-.666ZM5 14.917h6M8 12.417v2.5"/></svg>

fwiw

• i ran it through https://jakearchibald.github.io/svgomg/
• removed the opacity
• set the fill to none explicitly since this is a stroke icon
• set the icon stroke color to #000000 so it would be replaced with currentColor by the build scripts

[codecademydev]

📬Published Alpha Packages:

@codecademy/gamut@55.19.1-alpha.4f09ee.0
@codecademy/gamut-icons@9.24.3-alpha.4f09ee.0
@codecademy/gamut-kit@0.6.407-alpha.4f09ee.0
@codecademy/styleguide@66.19.3-alpha.4f09ee.0

[codecademydev]

🚀 Styleguide deploy preview ready!

https://664262b6496fcb1287ba4654--gamut-preview.netlify.app

Deploy Logs