USWDS - Search: Use inline image for Search icon - #4274

Preview

• Search small
• Search in header

Description

Fixes #4272. The search icon has been converted from a background to an inline image. This is to ensure there's a text alternative should images fail to load.

⚠ Requires a markup change to Search component and/or header.

New markup

The new addition is the inline image for the search icon.

<img src="usa-icons-bg/search--white.svg" class="usa-search__submit-icon" alt="Search">

Default & Big search

<button class="usa-button" type="submit">    
  <span class="usa-search__submit-text">Search</span>    
  <img src="usa-icons-bg/search--white.svg" class="usa-search__submit-icon" alt="Search">
</button>

Small search

<button class="usa-button" type="submit">    
  <img src="usa-icons-bg/search--white.svg" class="usa-search__submit-icon" alt="Search">
</button>

Additional information

Related to issue #4207.

Before you hit Submit, make sure you’ve done whichever of these applies to you:

• Follow the 18F Front End Coding Style Guide and Accessibility Guide.
• Run npm test and make sure the tests for the files you have changed have passed.
• Run your code through HTML_CodeSniffer and make sure it’s error free.
• Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.