Visitar URL original
Update social icons by thisisdano · Pull Request #4872 · uswds/uswds · GitHub
Skip to content

Update social icons - #4872

Merged
thisisdano merged 10 commits into
developfrom
dw-update-social-icons
Jul 27, 2022
Merged

thisisdano merged 10 commits into
developfrom
dw-update-social-icons

Conversation

@thisisdano

@thisisdano thisisdano commented Jul 20, 2022 •

Copy link
Copy Markdown
Contributor

Add LinkedIn icon. We now have a LinkedIn icon included in our default icon sprite as linkedin.

⚠️ Use unmodified social media icons. We now provide simpler social media icons, and removed any decoration not in the original icon. This means that the new icons are not in an enclosing circle unless the original icon is enclosed in a circle.

Problem statement

Our social media icon set was missing the LinkedIn icon. Additionally, the social media icons we delivered were optimized for consistent presentation in our footer, inside a circular button. Since our footer is not the only place social media icons might be used, we should remove the circular outline around the images, since we do not want to imply that the circle is part of the icon itself.

How to test

  • Open the Icons component of our Storybook site and look for the linkedin icon
  • In the Icons component of our Storybook site, check the following icons to assure that they do not have a circular button shape. Note that the Facebook and GitHub are circular and have not changed.
    • Flickr
    • Instagram
    • Twitter
    • YouTube

Examples

New Instagram icon in our Icons component

Screen Shot 2022-07-20 at 10 43 36 AM

All social icons in the footer

Note that this a is just an example. This PR does not add social media icons to the footer.

Screen Shot 2022-07-20 at 10 34 21 AM

Comment thread package.json
"version": "gulp release",
"watch": "gulp watch",
"fix:icons": "npx svgo --folder ./packages/usa-icon/src/img/uswds-icons -q && npx svgo --folder ./packages/usa-icon/src/img/material-icons -q && npx svgo --folder ./packages/usa-icon/src/img/usa-icons-bg -q && npx svgo --folder ./packages/usa-icon/src/img/usa-icons -q",
"fix:icons": "npx svgo --folder ./packages/usa-icon/src/img/uswds-icons -q && npx svgo --folder ./packages/usa-icon/src/img/usa-icons-bg -q",

@thisisdano thisisdano Jul 20, 2022 •

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also updated this script so it points to the proper directories. We no longer keep material icons in our package

@thisisdano
thisisdano requested review from amyleadem and mejiaj July 20, 2022 17:56

@mejiaj mejiaj left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No issues with code, but the display on preview looks a jagged on OSX - Edge

image

Looks good in Firefox.

image

@brunerae brunerae linked an issue Jul 22, 2022 that may be closed by this pull request

@amyleadem amyleadem left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me!

I checked the display of the new icons on the following browsers and all are presenting with a quality similar to previous versions:

  • iOS safari
  • Chrome
  • Firefox
  • Safari

@thisisdano
thisisdano merged commit 6dfc468 into develop Jul 27, 2022
@thisisdano
thisisdano deleted the dw-update-social-icons branch July 27, 2022 17:07
@thisisdano thisisdano mentioned this pull request Aug 5, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Create a LinkedIn icon

3 participants