fix!: Unify icon usage (#2411)

Co-authored-by: John Gedeon <[email protected]>

Author: werdnanoslen

src/components/Footer/SocialLinks/SocialLinks.test.tsx

@@ -40,7 +40,9 @@ describe('SocialLinks component', () => {
 describe('SocialLink component', () => {
   it('renders without errors', () => {
     const { container } = render(<SocialLink name="Instagram" />)
-    expect(container.querySelector('.usa-social-link')).toBeInTheDocument()
-    expect(screen.getByRole('img')).toHaveAttribute('alt', 'Instagram')
+    const link = container.querySelector('.usa-social-link')
+    expect(link).toBeInTheDocument()
+    expect(link).toHaveAttribute('title', 'Instagram')
+    expect(screen.getByRole('img')).toHaveAttribute('name', 'Instagram')
   })
 })

src/components/Footer/SocialLinks/SocialLinks.tsx

@@ -1,12 +1,7 @@
 /*  eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react'
 import classnames from 'classnames'
-
-import iconFacebook from '@uswds/uswds/src/img/usa-icons/facebook.svg'
-import iconTwitter from '@uswds/uswds/src/img/usa-icons/twitter.svg'
-import iconYouTube from '@uswds/uswds/src/img/usa-icons/youtube.svg'
-import iconInstagram from '@uswds/uswds/src/img/usa-icons/instagram.svg'
-import iconRSS from '@uswds/uswds/src/img/usa-icons/rss_feed.svg'
+import { Icon } from '../../Icon/Icons'
 
 type SocialLinksProps = {
   links: React.ReactNode[]
@@ -39,28 +34,26 @@ export const SocialLink = ({
   name,
   ...props
 }: SocialLinkProps & JSX.IntrinsicElements['a']): React.ReactElement => {
-  let iconSrc = ''
+  let icon: Icon
   switch (name) {
     case 'Facebook':
-      iconSrc = iconFacebook
+      icon = <Icon.Facebook className="usa-social-link__icon" name={name} />
       break
     case 'Twitter':
-      iconSrc = iconTwitter
+      icon = <Icon.Twitter className="usa-social-link__icon" name={name} />
       break
     case 'YouTube':
-      iconSrc = iconYouTube
+      icon = <Icon.Youtube className="usa-social-link__icon" name={name} />
       break
     case 'Instagram':
-      iconSrc = iconInstagram
+      icon = <Icon.Instagram className="usa-social-link__icon" name={name} />
       break
     case 'RSS':
-      iconSrc = iconRSS
+      icon = <Icon.RssFeed className="usa-social-link__icon" name={name} />
       break
   }
 
   return (
-    <a className="usa-social-link" {...props}>
-      <img className="usa-social-link__icon" src={iconSrc} alt={name} />
-    </a>
+    <a className="usa-social-link" {...props} title={name}>{icon}</a>
   )
 }

src/components/Search/SearchButton/SearchButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import searchImg from '@uswds/uswds/src/img/usa-icons-bg/search--white.svg'
+import { Icon } from '../../Icon/Icons'
 
 import { Button } from '../../Button/Button'
 
@@ -37,11 +37,7 @@ export const SearchButton = ({
             {!isSmall && (
                 <span className="usa-search__submit-text">{buttonText}</span>
             )}
-            <img
-                src={searchImg}
-                className="usa-search__submit-icon"
-                alt={buttonText}
-            />
+            <Icon.Search className="usa-search__submit-icon" name={buttonText} size={3}/>
         </Button>
     </div>
   )

src/components/banner/BannerLockImage/BannerLockImage.test.tsx

@@ -1,4 +1,5 @@
 import React, { ReactElement, useState } from 'react'
+import { Icon } from '../Icon/Icons'
 import {
   Banner,
   BannerButton,
@@ -7,7 +8,6 @@ import {
   BannerGuidance,
   BannerHeader,
   BannerIcon,
-  BannerLockImage,
   MediaBlockBody,
 } from '../../index'
 
@@ -18,10 +18,6 @@ import httpsIcon from '@uswds/uswds/src/img/icon-https.svg'
 const CustomBanner = (): ReactElement => {
   const [isOpen, setIsOpen] = useState(false)
 
-  const lock = (
-    <BannerLockImage title="Lock" description="Locked padlock icon" />
-  )
-
   return (
     <Banner aria-label="Official website of the state department of something specific">
       <BannerHeader
@@ -55,7 +51,7 @@ const CustomBanner = (): ReactElement => {
             <MediaBlockBody>
               <p>
                 <strong>Secure .gov websites use HTTPS</strong>
-                <br />A <strong>lock ( {lock} )</strong> or{' '}
+                <br />A <strong>lock (<Icon.Lock aria-label="Locked padlock icon" />)</strong> or{' '}
                 <strong>https://</strong> means you&apos;ve safely connected to
                 the .gov website. Share sensitive information only on official,
                 secure websites.

src/components/banner/BannerLockImage/BannerLockImage.tsx

@@ -7,7 +7,7 @@ import { BannerContent } from '../BannerContent/BannerContent'
 import { BannerGuidance } from '../BannerGuidance/BannerGuidance'
 import { BannerIcon } from '../BannerIcon/BannerIcon'
 import { MediaBlockBody } from '../../mediablock/MediaBlockBody/MediaBlockBody'
-import { BannerLockImage } from '../BannerLockImage/BannerLockImage'
+import { Icon } from '../../Icon/Icons'
 
 // assets
 import flagImg from '@uswds/uswds/src/img/us_flag_small.png'
@@ -29,10 +29,6 @@ interface GovBannerCopy {
 }
 
 const getCopy = (language: Language, tld: TLD): GovBannerCopy => {
-  const lock = (
-    <BannerLockImage title="Lock" description="Locked padlock icon" />
-  )
-
   switch (language) {
     case 'english':
       return {
@@ -61,7 +57,7 @@ const getCopy = (language: Language, tld: TLD): GovBannerCopy => {
         httpsSectionHeader: `Secure ${tld} websites use HTTPS`,
         httpsSectionContent: (
           <>
-            A <strong>lock ( {lock} )</strong> or <strong>https://</strong>{' '}
+            A <strong>lock (<Icon.Lock aria-label="Locked padlock icon"/>)</strong> or <strong>https://</strong>{' '}
             means you’ve safely connected to the {tld} website. Share sensitive
             information only on official, secure websites.
           </>
@@ -94,7 +90,7 @@ const getCopy = (language: Language, tld: TLD): GovBannerCopy => {
         httpsSectionHeader: `Los sitios web seguros ${tld} usan HTTPS`,
         httpsSectionContent: (
           <>
-            Un <strong>candado ( {lock} )</strong> o <strong>https://</strong>{' '}
+            Un <strong>candado (<Icon.Lock aria-label="Icono de candado cerrado" />)</strong> o <strong>https://</strong>{' '}
             significa que usted se conectó de forma segura a un sitio web {tld}.
             Comparta información sensible sólo en sitios web oficiales y
             seguros.