fix: use inline SVGs

docs/examples/timeline/index.njk

@@ -19,25 +19,35 @@ arguments: timeline
     </span>
   </summary>
   <div class="govuk-details__text">
-    Ut quam nunc, vulputate ac metus pharetra, posuere maximus velit. <a href="https://www.google.com">Etiam nec interdum velit.</a> Suspendisse molestie lectus in eros ornare
+    Ut quam nunc, vulputate ac metus pharetra, posuere maximus velit. <a class="govuk-link" href="#">Etiam nec interdum velit.</a> Suspendisse molestie lectus in eros ornare
   </div>
 </details>
 {% endset -%}
 
 {%- set listHtml %}
   <ul class="govuk-list govuk-list--bullet">
-    <li><a class="govuk-link" href="#">Item 1</li>
-    <li><a class="govuk-link" href="#">Item 2</li>
+    <li><a class="govuk-link" href="#">Item 1</a></li>
+    <li><a class="govuk-link" href="#">Item 2</a></li>
   </ul>
 {% endset -%}
 
 {%- set documentsHtml %}
   <ul class="moj-timeline__documents">
     <li class="moj-timeline__document-item">
-      <a class="moj-timeline__document-link" href="#">Document 1</a>
+      <a class="govuk-link" href="#">
+        <svg class="moj-timeline__document-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 20" width="20" height="16">
+          <path d="M9 7V1.5L14.5 7H9zM2 0C.9 0 0 .9 0 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6l-6-6H2z"/>
+        </svg>
+        Document 1
+      </a>
     </li>
     <li class="moj-timeline__document-item">
-      <a class="moj-timeline__document-link" href="#">Document 1</a>
+      <a class="govuk-link" href="#">
+        <svg class="moj-timeline__document-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 20" width="20" height="16">
+          <path d="M9 7V1.5L14.5 7H9zM2 0C.9 0 0 .9 0 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6l-6-6H2z"/>
+        </svg>
+        Document 2
+      </a>
     </li>
   </ul>
 {% endset -%}

src/moj/components/search-toggle/search-toggle.js

@@ -7,7 +7,9 @@ MOJFrontend.SearchToggle = function(options) {
 
   this.options.search.container.data('moj-search-toggle-initialised', true);
 
-  this.toggleButton = $('<button class="moj-search-toggle__button" type="button" aria-haspopup="true" aria-expanded="false">'+this.options.toggleButton.text+'</button>');
+  const svg = '<svg viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="moj-search-toggle__button__icon"><path d="M7.433,12.5790048 C6.06762625,12.5808611 4.75763941,12.0392925 3.79217348,11.0738265 C2.82670755,10.1083606 2.28513891,8.79837375 2.28699522,7.433 C2.28513891,6.06762625 2.82670755,4.75763941 3.79217348,3.79217348 C4.75763941,2.82670755 6.06762625,2.28513891 7.433,2.28699522 C8.79837375,2.28513891 10.1083606,2.82670755 11.0738265,3.79217348 C12.0392925,4.75763941 12.5808611,6.06762625 12.5790048,7.433 C12.5808611,8.79837375 12.0392925,10.1083606 11.0738265,11.0738265 C10.1083606,12.0392925 8.79837375,12.5808611 7.433,12.5790048 L7.433,12.5790048 Z M14.293,12.579 L13.391,12.579 L13.071,12.269 C14.2300759,10.9245158 14.8671539,9.20813198 14.866,7.433 C14.866,3.32786745 11.5381325,-1.65045755e-15 7.433,-1.65045755e-15 C3.32786745,-1.65045755e-15 -1.65045755e-15,3.32786745 -1.65045755e-15,7.433 C-1.65045755e-15,11.5381325 3.32786745,14.866 7.433,14.866 C9.208604,14.8671159 10.9253982,14.2296624 12.27,13.07 L12.579,13.39 L12.579,14.294 L18.296,20 L20,18.296 L14.294,12.579 L14.293,12.579 Z"></path></svg>';
+
+  this.toggleButton = $('<button class="moj-search-toggle__button" type="button" aria-haspopup="true" aria-expanded="false">' + this.options.toggleButton.text + svg + '</button>');
 	this.toggleButton.on('click', $.proxy(this, 'onToggleButtonClick'));
   this.options.toggleButton.container.append(this.toggleButton);
 };

src/moj/components/search-toggle/search-toggle.scss

@@ -12,15 +12,17 @@
   -webkit-font-smoothing: antialiased;
   -webkit-appearance: none;
 
-  &:after {
-    background-repeat: no-repeat;
-    background-image: url(#{$moj-images-path}icon-search-blue.svg);
-    content: '';
+  &__icon {
     display: inline-block;
     height: 20px;
     margin-left: govuk-spacing(2);
     vertical-align: middle;
     width: 20px;
+    fill: currentColor;
+
+    @media screen and (forced-colors: active) {
+      fill: windowText;
+    }
   }
 
   &:focus {
@@ -30,43 +32,30 @@
     outline: none;
     position: relative;
     z-index: 1;
-
-    &:after {
-      background-image: url(#{$moj-images-path}icon-search-black.svg);
-    }
   }
-
 }
 
-
 .moj-search--toggle {
-
   padding: govuk-spacing(3);
 
   @include govuk-media-query($until: desktop) {
     padding-left: 0 !important;
     padding-right: 0 !important;
   }
-
 }
 
-
 // JS enabled
 .js-enabled .moj-search--toggle {
-
   @include govuk-media-query($until: desktop) {
     padding-top: 0 !important;
   }
-
 }
 
 .js-enabled .moj-search-toggle {
   position: relative;
 }
 
-
 .js-enabled .moj-search-toggle__search {
-
   background-color: govuk-colour("light-grey");
 
   @include govuk-media-query($from: desktop) {
@@ -77,5 +66,4 @@
     width: 450px;
     z-index: 10;
   }
-
 }

src/moj/components/timeline/_timeline.scss

@@ -85,6 +85,17 @@
 
 }
 
+.moj-timeline__document-icon {
+  float: left;
+  margin-top: 4px;
+  margin-right: 4px;
+  fill: currentColor;
+
+  @media screen and (forced-colors: active) {
+    fill: linkText;
+  }
+}
+
 .moj-timeline__document-link {
   background-image: url(#{$moj-images-path}icon-document.svg);
   background-repeat: no-repeat;