From 40ddfe17e049d13473a25fd431d554773bff7c66 Mon Sep 17 00:00:00 2001 From: Tilly Woodfield <22456167+tillywoodfield@users.noreply.github.com> Date: Wed, 13 Nov 2024 11:36:38 +0200 Subject: [PATCH 1/2] feat: inline svg icons into css at build time Consuming apps no longer have to serve the image files --- src/scss/components/button/_button.scss | 5 +-- src/scss/components/button/button.stories.ts | 3 +- .../country-switcher/_country-switcher.scss | 2 +- src/scss/components/footer/footer.stories.ts | 4 +-- src/scss/components/header/header.stories.ts | 6 ++-- src/scss/components/icon/_icon.scss | 12 +++++++ src/scss/components/icon/icon.stories.ts | 35 +++++++++---------- 7 files changed, 38 insertions(+), 29 deletions(-) diff --git a/src/scss/components/button/_button.scss b/src/scss/components/button/_button.scss index ca96dca..eeeca24 100644 --- a/src/scss/components/button/_button.scss +++ b/src/scss/components/button/_button.scss @@ -22,8 +22,9 @@ background-color: $color-teal-80; } - &__icon { - width: 1rem; + &__icon, + & .iati-icon { + height: 1rem; } &--light { diff --git a/src/scss/components/button/button.stories.ts b/src/scss/components/button/button.stories.ts index 3ffbf05..bfafab1 100644 --- a/src/scss/components/button/button.stories.ts +++ b/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` `, }; diff --git a/src/scss/components/country-switcher/_country-switcher.scss b/src/scss/components/country-switcher/_country-switcher.scss index 08b05d3..34dbb73 100644 --- a/src/scss/components/country-switcher/_country-switcher.scss +++ b/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("/src/assets/svg/icon-globe.svg"); background-repeat: no-repeat; background-position: 0.5em center; } diff --git a/src/scss/components/footer/footer.stories.ts b/src/scss/components/footer/footer.stories.ts index 0a065ba..c820d8b 100644 --- a/src/scss/components/footer/footer.stories.ts +++ b/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 })} ${X.render?.call({ ...args })} diff --git a/src/scss/components/header/header.stories.ts b/src/scss/components/header/header.stories.ts index 885ac8e..07c1478 100644 --- a/src/scss/components/header/header.stories.ts +++ b/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 })} ${MenuToggle.render?.call({ ...args })} diff --git a/src/scss/components/icon/_icon.scss b/src/scss/components/icon/_icon.scss index d720280..1299997 100644 --- a/src/scss/components/icon/_icon.scss +++ b/src/scss/components/icon/_icon.scss @@ -6,6 +6,18 @@ background-position: center; background-size: 100%; + &--info { + background-image: url("/src/assets/svg/icon-info.svg"); + } + + &--search { + background-image: url("/src/assets/svg/icon-search.svg"); + } + + &--globe { + background-image: url("/src/assets/svg/icon-globe.svg"); + } + &--youtube { background-image: url("/src/assets/svg/youtube-logo.svg"); aspect-ratio: 1.2 / 1; diff --git a/src/scss/components/icon/icon.stories.ts b/src/scss/components/icon/icon.stories.ts index 9aefa22..01cd047 100644 --- a/src/scss/components/icon/icon.stories.ts +++ b/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``, -}; - -export const X: Story = { - render: () => html``, -}; - -export const Linkedin: Story = { - render: () => html``, +const createStory = (variant: string, background = "light") => { + const classes = `iati-icon iati-icon--${variant}`; + return { + parameters: { + backgrounds: { + default: background, + }, + }, + render: () => html``, + }; }; -export const Facebook: Story = { - render: () => html``, -}; +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"); From cd247bfaeeac0a69299b3ddf6c25d65571b46c78 Mon Sep 17 00:00:00 2001 From: Tilly Woodfield <22456167+tillywoodfield@users.noreply.github.com> Date: Thu, 14 Nov 2024 15:34:58 +0200 Subject: [PATCH 2/2] feat: expose assets for consumers of sass package --- package.json | 1 + .../brand-background/_brand-background.scss | 5 +---- .../country-switcher/_country-switcher.scss | 2 +- src/scss/components/icon/_icon.scss | 14 +++++++------- vite.config.js | 6 ++++++ 5 files changed, 16 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index f1f58b1..348ad59 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ }, "files": [ "src/scss/**/*.scss", + "src/assets/**/*", "dist/css/**/*.css", "dist/js/**/*.js" ], diff --git a/src/scss/components/brand-background/_brand-background.scss b/src/scss/components/brand-background/_brand-background.scss index 21feea4..2755f26 100644 --- a/src/scss/components/brand-background/_brand-background.scss +++ b/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; diff --git a/src/scss/components/country-switcher/_country-switcher.scss b/src/scss/components/country-switcher/_country-switcher.scss index 34dbb73..b124f80 100644 --- a/src/scss/components/country-switcher/_country-switcher.scss +++ b/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("/src/assets/svg/icon-globe.svg"); + background-image: url("@assets/svg/icon-globe.svg"); background-repeat: no-repeat; background-position: 0.5em center; } diff --git a/src/scss/components/icon/_icon.scss b/src/scss/components/icon/_icon.scss index 1299997..d600161 100644 --- a/src/scss/components/icon/_icon.scss +++ b/src/scss/components/icon/_icon.scss @@ -7,31 +7,31 @@ background-size: 100%; &--info { - background-image: url("/src/assets/svg/icon-info.svg"); + background-image: url("@assets/svg/icon-info.svg"); } &--search { - background-image: url("/src/assets/svg/icon-search.svg"); + background-image: url("@assets/svg/icon-search.svg"); } &--globe { - background-image: url("/src/assets/svg/icon-globe.svg"); + 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"); } } diff --git a/vite.config.js b/vite.config.js index 0314e59..a5fef16 100644 --- a/vite.config.js +++ b/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)), + }, + }, });