Use USWDS icons with badge component (#442)

CHANGELOG.md

@@ -3,9 +3,12 @@
 ### Improvements
 
 - Update styling for Alert component for increased contrast and consistency with U.S. Web Design System. ([#439](https://github.com/18F/identity-design-system/pull/439))
+- Update markup for badge component to use U.S. Web Design System icons. ([#442](https://github.com/18F/identity-design-system/pull/442))
+  - Existing usage will not be affected until the next major release (see "Deprecations").
 
 ### Deprecations
 
+- Badge component markup has been updated and will be required in the next major release. ([#442](https://github.com/18F/identity-design-system/pull/442))
 - Custom alert icons will be removed in the next major release, use U.S. Web Design System alerts instead.
   - `alerts/error.svg`
   - `alerts/info.svg`

docs/_components/badges.md

@@ -14,7 +14,9 @@ The unphishable badge is used to indicate that an account is only using security
 
 {% capture example %}
 <div class="lg-verification-badge">
-  <img src="{{ site.baseurl }}/assets/img/alerts/unphishable.svg" role="img" width="16" height="16" alt="" />
+  <svg class="usa-icon text-success" aria-hidden="true" focusable="false" role="img">
+    <use xlink:href="{{ site.baseurl }}/assets/img/sprite.svg#lock"></use>
+  </svg>
   Unphishable
 </div>
 {% endcapture %}
@@ -26,7 +28,9 @@ A verfied account badge is used to indicate that an account has completed the id
 
 {% capture example %}
 <div class="lg-verification-badge">
-  <img src="{{ site.baseurl }}/assets/img/alerts/success.svg" role="img" width="16" height="16" alt="" />
+  <svg class="usa-icon text-success" aria-hidden="true" focusable="false" role="img">
+    <use xlink:href="{{ site.baseurl }}/assets/img/sprite.svg#check_circle"></use>
+  </svg>
   Verified Account
 </div>
 {% endcapture %}

src/scss/packages/usa-verification-badge/src/_styles.scss

@@ -10,7 +10,8 @@
   padding: units(1) units(2);
   white-space: nowrap;
 
-  img {
+  img, // BREAKING: Remove `img` in next major release
+  svg {
     margin-right: units(1);
   }
 }