barista: Use images instead of inline svgs for icons.

apps/barista-design-system/src/app/app.html

@@ -19,7 +19,7 @@
 
   <router-outlet></router-outlet>
 
-  <button ba-scroll-to-top></button>
+  <button ba-scroll-to-top aria-label="Scroll to top of page"></button>
 
   <ba-footer></ba-footer>
 </div>

apps/barista-design-system/src/app/components/footer/footer.html

@@ -5,59 +5,19 @@ <h3>Join us on</h3>
       href="https://github.com/dynatrace-oss/barista"
       class="ba-footer-sociallink ba-btn ba-btn-secondary"
     >
-      <svg viewBox="0 0 23 23">
-        <title>Github</title>
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-          <path
-            id="github"
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M255.988 64C149.97 64 64 149.962 64 256.015c0 84.822 55.009 156.787 131.31 182.18 9.601 1.761 13.105-4.167 13.105-9.255 0-4.558-.166-16.633-.259-32.656-53.408 11.603-64.677-25.738-64.677-25.738-8.73-22.18-21.318-28.086-21.318-28.086-17.432-11.913 1.32-11.671 1.32-11.671 19.267 1.358 29.408 19.787 29.408 19.787 17.128 29.34 44.937 20.868 55.878 15.953 1.744-12.408 6.704-20.868 12.19-25.668-42.635-4.846-87.457-21.318-87.457-94.894 0-20.961 7.481-38.1 19.763-51.522-1.974-4.858-8.563-24.38 1.882-50.814 0 0 16.121-5.162 52.799 19.683 15.314-4.258 31.739-6.388 48.067-6.462 16.305.074 32.73 2.204 48.067 6.462 36.656-24.845 52.747-19.683 52.747-19.683 10.475 26.435 3.885 45.956 1.91 50.814 12.306 13.422 19.736 30.561 19.736 51.522 0 73.76-44.89 89.99-87.663 94.744 6.894 5.928 13.035 17.646 13.035 35.557 0 25.668-.236 46.377-.236 52.672 0 5.134 3.458 11.108 13.202 9.233C393.037 412.733 448 340.815 448 256.015 448 149.962 362.028 64 255.988 64z"
-          />
-        </svg>
-      </svg>
+      <img src="/assets/github-white.svg" alt="Dynatrace on GitHub" />
     </a>
     <a
       href="https://www.behance.net/dynatrace/"
       class="ba-footer-sociallink ba-btn ba-btn-secondary"
     >
-      <svg viewBox="0 0 23 23">
-        <title>Behance</title>
-        <svg
-          data-name="Layer 1"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 512 512"
-        >
-          <path
-            id="behance"
-            d="M331.72 236.52c-24.7 0-28.14 24.65-28.14 24.65h52.52s.34-24.65-24.38-24.65zm-119.16 24.65H166v42.75h44.2c6.63-.16 19.2-2.09 19.2-20.78 0-22.14-16.84-21.97-16.84-21.97z"
-          />
-          <path
-            d="M256.35 64.07c-105.85 0-191.66 85.8-191.66 191.65s85.81 191.66 191.66 191.66S448 361.57 448 255.72 362.18 64.07 256.35 64.07zm40.34 117.76h66v19.69h-66zm-33.35 103.3c0 48.81-50.78 47.2-50.78 47.2h-83.22V172.41h83.22c25.28 0 45.23 14 45.23 42.58s-24.4 30.43-24.4 30.43c32.17 0 29.95 39.71 29.95 39.71zm123.43-2.62H303.9c0 29.71 28.14 27.84 28.14 27.84 26.57 0 25.64-17.21 25.64-17.21h28.16c0 45.66-54.74 42.53-54.74 42.53-65.66 0-61.44-61.13-61.44-61.13s-.06-61.44 61.44-61.44c64.73 0 55.67 69.41 55.67 69.41z"
-          />
-          <path
-            d="M223.87 217.47c0-16.63-11.31-16.63-11.31-16.63H166v35.68h43.67c7.54 0 14.2-2.42 14.2-19.05z"
-          />
-        </svg>
-      </svg>
+      <img src="/assets/behance-white.svg" alt="Dynatrace on Behance" />
     </a>
     <a
       href="https://dribbble.com/dynatrace/"
       class="ba-footer-sociallink ba-btn ba-btn-secondary"
     >
-      <svg viewBox="0 0 23 23">
-        <title>Dribbble</title>
-        <svg
-          data-name="Layer 1"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 512 512"
-        >
-          <path
-            id="dribbble"
-            d="M256 447.38c-105.66 0-191.63-85.86-191.63-191.38S150.34 64.62 256 64.62 447.63 150.48 447.63 256 361.66 447.38 256 447.38zm161.6-165.24c-5.59-1.76-50.66-15.19-102-7C337 334 345.78 381.82 347.49 391.75a163.7 163.7 0 0 0 70.11-109.61zm-97.66 124.52A680.47 680.47 0 0 0 285 282.7l-1.08.37c-92.33 32.13-125.47 96.07-128.41 102.08a163.64 163.64 0 0 0 164.43 21.51zm-185.6-41.17c3.71-6.34 48.64-80.62 133.06-107.87 2.13-.68 4.27-1.31 6.44-1.93-4.1-9.3-8.59-18.59-13.27-27.75-81.74 24.43-161.06 23.41-168.21 23.26 0 1.66-.09 3.32-.09 5a162.66 162.66 0 0 0 42.17 109.34zM95.78 222.77c7.32.1 74.75.38 151.32-19.91a1042.71 1042.71 0 0 0-60.69-94.56 164.1 164.1 0 0 0-90.63 114.46zM217.64 97.3a870 870 0 0 1 61.08 95.7c58.2-21.79 82.84-54.9 85.78-59.06a163.63 163.63 0 0 0-146.86-36.6zm165.07 55.57c-3.46 4.67-30.89 39.79-91.41 64.47 3.81 7.84 7.47 15.68 10.86 23.67q1.81 4.23 3.52 8.43c54.47-6.84 108.59 4.13 114 5.23a162.69 162.69 0 0 0-37-101.84z"
-          />
-        </svg>
-      </svg>
+      <img src="/assets/dribbble-white.svg" alt="Dynatrace on Dribbble" />
     </a>
   </div>
   <div class="ba-footer-legal">

apps/barista-design-system/src/app/components/scroll-to-top/scroll-to-top.html

@@ -1,9 +1 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  width="30"
-  height="30"
-  viewBox="0 0 23 23"
->
-  <path d="M17.9 13.9l-5.1-5.1V19h-2.6V8.8l-5.1 5.1-1.8-1.8L11.5 4l8.2 8.1" />
-  <title>Scroll to top</title>
-</svg>
+<img src="assets/arrow-up-white.svg" alt="Scroll to top" />

apps/barista-design-system/src/app/components/scroll-to-top/scroll-to-top.scss

@@ -15,7 +15,6 @@
   opacity: 0;
   transition: opacity 0.6s ease-in-out, background-color 150ms ease-in-out;
   margin: 2rem;
-  fill: #fff;
   text-align: center;
   pointer-events: none;
   background-color: $turquoise-600;

apps/barista-design-system/src/pages/overview-page/components/tile/tile.html

@@ -8,62 +8,35 @@
   <svg class="ba-tile-status-icon-triangle" viewBox="0 0 50 50">
     <polygon points="50,0 0,0 50,50" />
   </svg>
-  <svg
+  <img
     *ngIf="_workinprogress"
+    src="/assets/maintenance-royalblue.svg"
+    alt="Work in progress indicator"
     class="ba-tile-status-icon"
-    xmlns="http://www.w3.org/2000/svg"
-    width="512"
-    height="512"
-    viewBox="0 0 512 512"
-  >
-    <path
-      d="M64.199 343.67l58.577-58.577 82.13 22.008 22.005 82.131-58.569 58.569c30.577 1.826 61.757-8.91 85.12-32.272 29.481-29.49 38.894-71.431 28.264-108.889l160.531-160.53c7.657-7.657 7.657-20.07.002-27.727L393.63 69.744c-7.656-7.658-20.071-7.659-27.729-.001L205.368 230.277c-37.458-10.624-79.406-1.212-108.889 28.264-23.365 23.366-34.104 54.556-32.28 85.13z"
-    />
-    <path
-      d="M112.476 399.53l35.707 9.544 26.164-26.161-9.544-35.709-35.709-9.545-26.164 26.162z"
-    />
-  </svg>
-  <svg
+  />
+  <img
     *ngIf="_experimental"
+    src="/assets/laboratory-white.svg"
+    alt="Experimental indicator"
     class="ba-tile-status-icon"
-    xmlns="http://www.w3.org/2000/svg"
-    width="512"
-    height="512"
-    viewBox="0 0 512 512"
-  >
-    <path
-      d="M443.9 436.6l-4.2-28.7c-.9-6.3-4.4-15.8-7.7-21.2L311 189.1c-3.3-5.4-6-15-6-21.3V115c0-6.3 5.1-11.5 11.4-11.5h2.1c6.3 0 12.8-5 14.6-11.1l5-17.3c1.8-6.1-1.9-11.1-8.2-11.1H182.1c-6.3 0-9.9 5-8.2 11.1l5 17.3c1.8 6.1 8.3 11.1 14.6 11.1h2.1c6.3 0 11.4 5.2 11.4 11.5v52.8c0 6.3-2.7 15.9-6 21.3L80 386.7c-3.3 5.4-6.7 14.9-7.7 21.2l-4.2 28.7c-.9 6.3 3.4 11.4 9.7 11.4h356.4c6.2 0 10.6-5.1 9.7-11.4zm-71.4-30.1h-233c-4 0-5.6-2.8-3.5-6.3l33.6-55.3c2.1-3.5 7.1-6.3 11.2-6.3H335c4 0 8.9 2.9 10.9 6.5l30.4 55c1.9 3.5.3 6.4-3.8 6.4z"
-    />
-  </svg>
-  <svg
+  />
+  <img
     *ngIf="_favorite"
+    src="/assets/favorite-white.svg"
+    alt="Favorite indicator"
     class="ba-tile-status-icon"
-    xmlns="http://www.w3.org/2000/svg"
-    width="512"
-    height="512"
-    viewBox="0 0 512 512"
-  >
-    <path
-      d="M394.44 468l-52.875-161.952L480 205.956H308.888L255.998 44l-52.872 161.956H32l138.44 100.092L117.57 468l138.427-100.09z"
-    />
-  </svg>
-  <svg
+  />
+  <img
     *ngIf="_deprecated"
+    src="/assets/incident-white.svg"
+    alt="Deprecated indicator"
     class="ba-tile-status-icon"
-    xmlns="http://www.w3.org/2000/svg"
-    width="512"
-    height="512"
-    viewBox="0 0 512 512"
-  >
-    <path
-      d="M256 44L32.224 431.602h447.552L256 44zm28 352h-56v-56.002h56V396zm-56-108V156h56v132h-56z"
-    />
-  </svg>
+  />
 </div>
 <div class="ba-tile-content">
   <div class="ba-tile-header">
-    <div class="ba-tile-img">
-      <span>{{ data.identifier }}</span>
+    <div class="ba-tile-identifier">
+      {{ data.identifier }}
     </div>
     <div class="ba-tile-headertext">
       <div class="ba-tile-title">{{ data.title }}</div>

apps/barista-design-system/src/pages/overview-page/components/tile/tile.scss

@@ -42,9 +42,8 @@ $gridgap: 20px;
       fill: #ffffff;
     }
 
-    svg {
+    img {
       transform: rotate(90deg);
-      fill: $link-color;
     }
   }
 }
@@ -84,17 +83,11 @@ $gridgap: 20px;
     font-size: 1.2rem;
   }
 
-  .ba-tile-img {
+  .ba-tile-identifier {
     font-size: $tilefontsize-big;
     margin-right: 1.5rem;
     min-width: 60px;
     text-align: center;
-
-    svg {
-      max-width: 50px;
-      height: 100%;
-      vertical-align: middle;
-    }
   }
 
   .ba-tile-type {
@@ -132,7 +125,6 @@ $gridgap: 20px;
     position: absolute;
     top: 3px;
     right: 5px;
-    fill: #ffffff;
   }
 }
 

apps/barista-design-system/src/pages/overview-page/overview-page.html

@@ -11,23 +11,15 @@ <h1>{{ content.title }}</h1>
       aria-label="Show links to subpages as list items."
       (click)="_switchOverviewPageDisplay()"
     >
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 425 184">
-        <path
-          d="M111.97 0h312.057v64H111.97V0zM.001 0h64v64h-64V0zM111.97 120h312.057v64H111.97v-64zM.001 120h64v64h-64v-64z"
-        />
-      </svg>
+      <img src="/assets/list-view.svg" alt="List view icon" />
     </button>
     <button
       class="ba-button-group-button"
       [ngClass]="{ 'ba-is-active': !_listViewActive }"
       aria-label="Show links to subpages as tiles."
       (click)="_switchOverviewPageDisplay()"
     >
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="-78 0 425 269">
-        <path
-          d="M0 0h112v112H0V0zm156 0h112v112H156V0zM0 156.001h112v112H0v-112zm156 0h112v112H156v-112z"
-        />
-      </svg>
+      <img src="/assets/tile-view.svg" alt="Tile view icon" />
     </button>
   </div>
 </div>

apps/barista-design-system/src/pages/overview-page/overview-page.scss

@@ -87,8 +87,7 @@ ul {
   line-height: 1;
   padding: 4px 12px;
 
-  svg {
-    fill: $gray-700;
+  img {
     width: 28px;
     height: 28px;
   }

apps/barista-design-system/src/pages/single-page/components/icon-overview-content/icon-overview-content.ts

@@ -111,7 +111,6 @@ export class BaIconOverviewContent implements OnInit, AfterViewInit, OnDestroy {
  * the icon's name or in the list of tags.
  */
 export function filterIcons(icons: BaIcon[], filterValue: string): BaIcon[] {
-  console.log(filterValue);
   if (!filterValue.length) {
     return icons;
   }