Merge pull request #27 from IATI/inline-icons

Inline icons

Author: tillywoodfield

package.json

@@ -14,6 +14,7 @@
   },
   "files": [
     "src/scss/**/*.scss",
+    "src/assets/**/*",
     "dist/css/**/*.css",
     "dist/js/**/*.js"
   ],

src/scss/components/brand-background/_brand-background.scss

@@ -2,16 +2,13 @@
 @use "../../tokens/screens" as *;
 
 .iati-brand-background {
-  $var-background-image: --background-image;
-  #{$var-background-image}: url("/src/assets/svg/marque-white.svg");
-
   background-color: $color-teal-90;
   display: grid;
   @media (min-width: $screen-md) {
     &:after {
       content: "";
       grid-area: 1/-1;
-      background-image: var($var-background-image);
+      background-image: url("@assets/svg/marque-white.svg");
       background-repeat: no-repeat;
       background-position: right 2rem top;
       background-size: 32.3rem auto;

src/scss/components/button/_button.scss

@@ -22,8 +22,9 @@
     background-color: $color-teal-80;
   }
 
-  &__icon {
-    width: 1rem;
+  &__icon,
+  & .iati-icon {
+    height: 1rem;
   }
 
   &--light {

src/scss/components/button/button.stories.ts

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from "@storybook/web-components";
-import iconInfoUrl from "../../../assets/svg/icon-info.svg";
 
 import { html } from "lit";
 
@@ -38,7 +37,7 @@ export const WithIcon: Story = {
   render: () => html`
     <button class="iati-button iati-button--light">
       <span>Info</span>
-      <img class="iati-button__icon" src="${iconInfoUrl}" alt="" />
+      <i class="iati-icon iati-icon--info"></i>
     </button>
   `,
 };

src/scss/components/country-switcher/_country-switcher.scss

@@ -23,7 +23,7 @@
     font-family: $font-stack-heading;
     color: $color-grey-90;
     font-weight: 600;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath stroke='%23121212' stroke-linecap='square' stroke-width='1.3' d='M10 19c4.9706 0 9-4.0294 9-9 0-4.97056-4.0294-9-9-9-4.97056 0-9 4.02944-9 9 0 4.9706 4.02944 9 9 9Z'/%3E%3Cpath stroke='%23121212' stroke-linecap='round' stroke-linejoin='bevel' stroke-width='1.3' d='M9.99984 18.991C12.3938 16.8114 13.5908 13.8144 13.5908 10c0-3.81433-1.197-6.81133-3.59096-8.99097-2.394 2.17964-3.591 5.17664-3.591 8.99097 0 3.8144 1.197 6.8114 3.591 8.991Z'/%3E%3Cpath stroke='%23121212' stroke-linecap='round' stroke-width='1.3' d='M1.44991 7.29993H18.5499M1.44991 12.6999H18.5499'/%3E%3C/svg%3E");
+    background-image: url("@assets/svg/icon-globe.svg");
     background-repeat: no-repeat;
     background-position: 0.5em center;
   }

src/scss/components/footer/footer.stories.ts

@@ -4,7 +4,7 @@ import { html } from "lit";
 import { CountrySwitcher } from "../../components/country-switcher/country-switcher.stories";
 import {
   Facebook,
-  Linkedin,
+  LinkedIn,
   X,
   Youtube,
 } from "../../components/icon/icon.stories";
@@ -67,7 +67,7 @@ export const Footer: Story = {
                 href="https://www.linkedin.com/company/international-aid-transparency-initiative/"
                 aria-label="LinkedIn"
               >
-                ${Linkedin.render?.call({ ...args })}
+                ${LinkedIn.render?.call({ ...args })}
               </a>
               <a href="https://x.com/IATI_aid" aria-label="X">
                 ${X.render?.call({ ...args })}

src/scss/components/header/header.stories.ts

@@ -1,7 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/web-components";
 import { html } from "lit";
-import iconInfoUrl from "../../../assets/svg/icon-info.svg";
-import iconSearchUrl from "../../../assets/svg/icon-search.svg";
 import logoColourUrl from "../../../assets/svg/logo-colour.svg";
 import { CountrySwitcher } from "../../components/country-switcher/country-switcher.stories";
 import { Open as MenuToggle } from "../../components/menu-toggle/menu-toggle.stories";
@@ -62,11 +60,11 @@ export const Header: Story = {
             ${CountrySwitcher.render?.call({ ...args })}
             <button class="iati-button iati-button--light hide--mobile-nav">
               <span>Help Docs</span>
-              <img class="iati-button__icon" src="${iconInfoUrl}" alt="" />
+              <i class="iati-icon iati-icon--info"></i>
             </button>
             <button class="iati-button iati-button--light">
               <span>Search</span>
-              <img class="iati-button__icon" src="${iconSearchUrl}" alt="" />
+              <i class="iati-icon iati-icon--search"></i>
             </button>
             ${MenuToggle.render?.call({ ...args })}
           </div>

src/scss/components/icon/_icon.scss

@@ -6,20 +6,32 @@
   background-position: center;
   background-size: 100%;
 
+  &--info {
+    background-image: url("@assets/svg/icon-info.svg");
+  }
+
+  &--search {
+    background-image: url("@assets/svg/icon-search.svg");
+  }
+
+  &--globe {
+    background-image: url("@assets/svg/icon-globe.svg");
+  }
+
   &--youtube {
-    background-image: url("/src/assets/svg/youtube-logo.svg");
+    background-image: url("@assets/svg/youtube-logo.svg");
     aspect-ratio: 1.2 / 1;
   }
 
   &--x {
-    background-image: url("/src/assets/svg/x-logo.svg");
+    background-image: url("@assets/svg/x-logo.svg");
   }
 
   &--linkedin {
-    background-image: url("/src/assets/svg/linkedin-logo.svg");
+    background-image: url("@assets/svg/linkedin-logo.svg");
   }
 
   &--facebook {
-    background-image: url("/src/assets/svg/facebook-logo.svg");
+    background-image: url("@assets/svg/facebook-logo.svg");
   }
 }

src/scss/components/icon/icon.stories.ts

@@ -3,28 +3,27 @@ import { html } from "lit";
 
 const meta: Meta = {
   title: "Components/Icon",
-  parameters: {
-    backgrounds: {
-      default: "dark",
-    },
-  },
 };
 
 export default meta;
 type Story = StoryObj;
 
-export const Youtube: Story = {
-  render: () => html`<i class="iati-icon iati-icon--youtube"></i>`,
-};
-
-export const X: Story = {
-  render: () => html`<i class="iati-icon iati-icon--x"></i>`,
-};
-
-export const Linkedin: Story = {
-  render: () => html`<i class="iati-icon iati-icon--linkedin"></i>`,
+const createStory = (variant: string, background = "light") => {
+  const classes = `iati-icon iati-icon--${variant}`;
+  return {
+    parameters: {
+      backgrounds: {
+        default: background,
+      },
+    },
+    render: () => html`<i class=${classes}></i>`,
+  };
 };
 
-export const Facebook: Story = {
-  render: () => html`<i class="iati-icon iati-icon--facebook"></i>`,
-};
+export const Info: Story = createStory("info");
+export const Search: Story = createStory("search");
+export const Globe: Story = createStory("globe");
+export const Youtube: Story = createStory("youtube", "dark");
+export const X: Story = createStory("x", "dark");
+export const LinkedIn: Story = createStory("linkedin", "dark");
+export const Facebook: Story = createStory("facebook", "dark");

vite.config.js

@@ -1,5 +1,6 @@
 import path from "path";
 import { NodePackageImporter } from "sass";
+import { fileURLToPath } from "url";
 import { defineConfig } from "vite";
 
 export default defineConfig({
@@ -32,4 +33,9 @@ export default defineConfig({
       },
     },
   },
+  resolve: {
+    alias: {
+      "@assets": fileURLToPath(new URL("./src/assets", import.meta.url)),
+    },
+  },
 });