From 87081ecf6d000683ec41ac08214fb6839c221768 Mon Sep 17 00:00:00 2001
From: Andrew Duthie <1779930+aduth@users.noreply.github.com>
Date: Tue, 7 May 2024 11:50:28 -0400
Subject: [PATCH] Use USWDS icons with badge component (#442)

---
 CHANGELOG.md                                              | 3 +++
 docs/_components/badges.md                                | 8 ++++++--
 src/scss/packages/usa-verification-badge/src/_styles.scss | 3 ++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9dcdde64..987cf91a 100644
--- a/CHANGELOG.md
+++ b/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`
diff --git a/docs/_components/badges.md b/docs/_components/badges.md
index 782acb74..65b78016 100644
--- a/docs/_components/badges.md
+++ b/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 %}
diff --git a/src/scss/packages/usa-verification-badge/src/_styles.scss b/src/scss/packages/usa-verification-badge/src/_styles.scss
index 7f225d4b..1003c15e 100644
--- a/src/scss/packages/usa-verification-badge/src/_styles.scss
+++ b/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);
   }
 }