Description

SVG4Everybody polyfill is used to convert SVG sprite icons to an embedded format so IE11 can render them. The code included to create a UMD module is causing conflicts when we pass it through Babel for older browsers. Removed it based on this Slack comment by Andrew Duthie

Modern browsers

<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
  <use xlink:href="../../dist/img/sprite.svg#add"></use>
</svg>

IE11 (after SVG4E)

<svg xmlns="http://www.w3.org/2000/svg" class="usa-icon" role="img" aria-hidden="true" viewBox="0 0 24 24" focusable="false">
  <g>
    <path fill="none" d="M 0 0 h 24 v 24 H 0 Z" />
    <path d="M 19 13 h -6 v 6 h -2 v -6 H 5 v -2 h 6 V 5 h 2 v 6 h 6 v 2 Z" />
  </g>
</svg>

Additional information

Now you should be able to use uswds.js or uswds.min.js in a React app without any problems.

Thanks to @aduth for looking into this and providing a solution!

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.