From 786d576481b609bebbdea37019b173efb10cd9d6 Mon Sep 17 00:00:00 2001 From: Yasin Date: Fri, 10 Jul 2026 14:37:08 +0200 Subject: [PATCH 01/10] refactor(icons): migrate inline SVGs to @heroicons/react Replace the site's hand-inlined SVG icons with the @heroicons/react library so all UI icons come from one consistent source. The previous inline paths were Heroicons already, so the visual result is unchanged while the markup gets far leaner. Brand logos (LinkedIn, GitHub, Bluesky), the service-status loading spinner, and the breadcrumb separator have no Heroicon equivalent and stay inline. --- package.json | 1 + pnpm-lock.yaml | 12 +++++ src/components/callout.tsx | 22 ++++---- src/components/carousel.tsx | 12 ++--- src/components/featured-news.astro | 4 +- src/components/highlights-carousel.tsx | 18 +++---- src/components/listing-filters.tsx | 9 ++-- src/components/people.astro | 5 +- src/components/pricing.tsx | 6 +-- src/components/project-filters.tsx | 13 ++--- src/components/sections/latest-news.astro | 17 ++----- src/components/sections/org-contact.astro | 23 ++++----- src/components/sections/org-hero.astro | 6 +-- src/components/sections/services-overview.tsx | 23 +++++---- src/components/service-status-summary.tsx | 9 ++-- src/components/service-status.tsx | 13 ++--- src/components/share-buttons.tsx | 13 ++--- src/components/site-banner.astro | 9 ++-- src/layouts/page.astro | 25 +++------- src/pages/about/everyone.astro | 20 ++------ src/pages/events/index.astro | 21 +++----- src/pages/funding-and-projects/index.astro | 21 +++----- src/pages/news/index.astro | 9 ++-- src/pages/research-support.astro | 37 ++++---------- src/pages/services/index.astro | 9 ++-- src/pages/training/index.astro | 50 ++++++++----------- 26 files changed, 151 insertions(+), 256 deletions(-) diff --git a/package.json b/package.json index 1df259a6..78ffe157 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "@astrojs/sitemap": "^3.7.2", "@astrojs/tailwind": "^6.0.2", "@headlessui/react": "^2.2.10", + "@heroicons/react": "^2.2.0", "@tailwindcss/forms": "^0.5.7", "astro": "^5.18.1", "dayjs": "^1.11.20", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c54ce680..3c14b9f9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -48,6 +48,9 @@ importers: '@headlessui/react': specifier: ^2.2.10 version: 2.2.10(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@heroicons/react': + specifier: ^2.2.0 + version: 2.2.0(react@18.3.1) '@tailwindcss/forms': specifier: ^0.5.7 version: 0.5.9(tailwindcss@3.4.14) @@ -642,6 +645,11 @@ packages: react: ^18 || ^19 || ^19.0.0-rc react-dom: ^18 || ^19 || ^19.0.0-rc + '@heroicons/react@2.2.0': + resolution: {integrity: sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==} + peerDependencies: + react: '>= 16 || ^19.0.0-rc' + '@img/colour@1.1.0': resolution: {integrity: sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==} engines: {node: '>=18'} @@ -3812,6 +3820,10 @@ snapshots: react-dom: 18.3.1(react@18.3.1) use-sync-external-store: 1.6.0(react@18.3.1) + '@heroicons/react@2.2.0(react@18.3.1)': + dependencies: + react: 18.3.1 + '@img/colour@1.1.0': optional: true diff --git a/src/components/callout.tsx b/src/components/callout.tsx index 5c8c0939..9bae0199 100644 --- a/src/components/callout.tsx +++ b/src/components/callout.tsx @@ -1,4 +1,10 @@ import React from 'react'; +import { + CheckCircleIcon, + ExclamationTriangleIcon, + InformationCircleIcon, + XCircleIcon, +} from '@heroicons/react/24/outline'; const variants = { info: { @@ -7,9 +13,7 @@ const variants = { title: 'text-blue-900 dark:text-blue-200', text: 'text-blue-800 dark:text-blue-300', icon: ( - +