Skip to content

Commit e4204a1

Browse files
kelvinkiprutokelvinkipruto
authored
Merge pull request #20 from CodeForAfrica/ft/fix-icons
refactor(icons): replace local icons with third-party icon packages
2 parents 708aa3c + 9615d75 commit e4204a1

74 files changed

Lines changed: 289 additions & 479 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎components/about/AboutTeam.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Icon } from "@/components/ui/Icon";
1+
import { FaLinkedinIn } from "react-icons/fa";
22
import { Container, SectionHeading } from "@/components/ui/SectionHeading";
33
import { ABOUT_TEAM, type TeamMember } from "@/lib/about-content";
44

@@ -10,8 +10,8 @@ function TeamCard({ member }: { member: TeamMember }) {
1010
<p className="text-sm font-bold leading-5 text-neutral-900">
1111
{member.name}
1212
</p>
13-
<span className="flex size-4 items-center justify-center rounded-[3px] bg-neutral-600">
14-
<Icon name="linkedin" size={9} alt={`${member.name} on LinkedIn`} />
13+
<span className="flex size-5 items-center justify-center rounded-full bg-neutral-600">
14+
<FaLinkedinIn size={11} color="white" aria-hidden />
1515
</span>
1616
</div>
1717
<p className="mt-1 text-sm font-medium leading-5 text-neutral-500">

‎components/about/ContactForm.tsx‎

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Image from "next/image";
2-
import { Icon } from "@/components/ui/Icon";
2+
import { FiChevronDown, FiMail, FiMapPin, FiPhoneCall } from "react-icons/fi";
33
import { Container, SectionHeading } from "@/components/ui/SectionHeading";
44
import {
55
CONTACT_FORM,
@@ -64,18 +64,19 @@ function FormControl({ field }: { field: ContactField }) {
6464
</option>
6565
))}
6666
</select>
67-
<Icon
68-
name="chevron-down"
67+
<FiChevronDown
6968
size={16}
7069
className="pointer-events-none absolute right-3.5 top-1/2 -translate-y-1/2"
70+
aria-hidden
7171
/>
7272
</div>
7373
);
7474
}
7575

76+
const FieldIcon = field.icon;
7677
return (
7778
<div className="relative flex h-12 items-center gap-2 rounded-lg border border-neutral-200 bg-white px-3.5 focus-within:border-pesacheck-blue">
78-
{field.icon && <Icon name={field.icon} size={16} className="shrink-0" />}
79+
{FieldIcon && <FieldIcon size={16} className="shrink-0" aria-hidden />}
7980
<input
8081
id={field.name}
8182
name={field.name}
@@ -88,15 +89,15 @@ function FormControl({ field }: { field: ContactField }) {
8889
}
8990

9091
function ContactRow({
91-
icon,
92+
icon: ContactIcon,
9293
children,
9394
}: {
94-
icon: string;
95+
icon: React.ElementType;
9596
children: React.ReactNode;
9697
}) {
9798
return (
9899
<div className="flex items-start gap-2 text-sm font-medium text-neutral-900">
99-
<Icon name={icon} size={24} className="mt-px shrink-0" />
100+
<ContactIcon size={24} className="mt-px shrink-0" aria-hidden />
100101
<span>{children}</span>
101102
</div>
102103
);
@@ -145,23 +146,26 @@ export function ContactForm() {
145146

146147
{/* HQ contact details */}
147148
<div className="mt-10 flex flex-col gap-3">
148-
<ContactRow icon="marker-pin">{CONTACT_HQ.address}</ContactRow>
149-
<ContactRow icon="mail">{CONTACT_HQ.email}</ContactRow>
150-
<ContactRow icon="phone-call">{CONTACT_HQ.phone}</ContactRow>
149+
<ContactRow icon={FiMapPin}>{CONTACT_HQ.address}</ContactRow>
150+
<ContactRow icon={FiMail}>{CONTACT_HQ.email}</ContactRow>
151+
<ContactRow icon={FiPhoneCall}>{CONTACT_HQ.phone}</ContactRow>
151152

152153
<div className="mt-2 flex items-center gap-4">
153154
<span className="text-sm font-medium text-neutral-900">
154155
Follow Us:
155156
</span>
156157
<div className="flex items-center gap-3">
157-
{CONTACT_SOCIALS.map((social, i) => (
158-
<div key={social.name} className="flex items-center gap-3">
159-
{i > 0 && <span className="h-2.5 w-px bg-neutral-200" />}
160-
<a href={social.href} aria-label={social.label}>
161-
<Icon name={social.name} size={24} alt={social.label} />
162-
</a>
163-
</div>
164-
))}
158+
{CONTACT_SOCIALS.map((social, i) => {
159+
const SocialIcon = social.icon;
160+
return (
161+
<div key={social.label} className="flex items-center gap-3">
162+
{i > 0 && <span className="h-2.5 w-px bg-neutral-200" />}
163+
<a href={social.href} aria-label={social.label}>
164+
<SocialIcon size={24} color={social.color} aria-hidden />
165+
</a>
166+
</div>
167+
);
168+
})}
165169
</div>
166170
</div>
167171
</div>

‎components/about/FundingBody.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import { FiArrowUpRight } from "react-icons/fi";
12
import { FundingSectionNav } from "@/components/about/FundingSectionNav";
2-
import { Icon } from "@/components/ui/Icon";
33
import { Container, SectionHeading } from "@/components/ui/SectionHeading";
44
import {
55
FUNDING_SECTIONS,
@@ -68,7 +68,7 @@ function Section({ section }: { section: FundingSection }) {
6868
className="mt-5 inline-flex items-center gap-1 text-sm font-medium text-neutral-900 transition-colors hover:text-pesacheck-blue"
6969
>
7070
Learn More
71-
<Icon name="arrow-up-right" size={20} />
71+
<FiArrowUpRight size={20} aria-hidden />
7272
</button>
7373
)}
7474

‎components/about/MethodologyBody.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import { FiArrowUpRight } from "react-icons/fi";
12
import { MethodologySectionNav } from "@/components/about/MethodologySectionNav";
2-
import { Icon } from "@/components/ui/Icon";
33
import { Container, SectionHeading } from "@/components/ui/SectionHeading";
44
import {
55
type ImageSlot,
@@ -68,7 +68,7 @@ function Section({ section }: { section: MethodologySection }) {
6868
className="mt-5 inline-flex items-center gap-1 text-sm font-medium text-neutral-900 transition-colors hover:text-pesacheck-blue"
6969
>
7070
Learn More
71-
<Icon name="arrow-up-right" size={20} />
71+
<FiArrowUpRight size={20} aria-hidden />
7272
</button>
7373
)}
7474

‎components/about/PrinciplesBody.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import { FiArrowUpRight } from "react-icons/fi";
12
import { PrinciplesSectionNav } from "@/components/about/PrinciplesSectionNav";
2-
import { Icon } from "@/components/ui/Icon";
33
import { Container, SectionHeading } from "@/components/ui/SectionHeading";
44
import {
55
type ImageSlot,
@@ -68,7 +68,7 @@ function Section({ section }: { section: PrinciplesSection }) {
6868
className="mt-5 inline-flex items-center gap-1 text-sm font-medium text-neutral-900 transition-colors hover:text-pesacheck-blue"
6969
>
7070
Learn More
71-
<Icon name="arrow-up-right" size={20} />
71+
<FiArrowUpRight size={20} aria-hidden />
7272
</button>
7373
)}
7474

‎components/article/ArticleHero.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Image from "next/image";
2-
import { Icon } from "@/components/ui/Icon";
2+
import { FiCalendar, FiClock, FiUser } from "react-icons/fi";
33
import { VerdictBadge } from "@/components/ui/VerdictBadge";
44
import type { Article } from "@/lib/article-content";
55
import { ShareButtons } from "./ShareButtons";
@@ -61,17 +61,21 @@ export function ArticleHero({ article }: { article: Article }) {
6161
{/* Date · read-time · author */}
6262
<div className="flex flex-wrap items-center gap-2 text-sm font-medium text-white">
6363
<span className="flex items-center gap-[5px]">
64-
<Icon name="calendar" size={20} className="brightness-0 invert" />
64+
<FiCalendar
65+
size={20}
66+
className="brightness-0 invert"
67+
aria-hidden
68+
/>
6569
{article.date}
6670
</span>
6771
<span className="size-1.5 rounded-full bg-white/60" />
6872
<span className="flex items-center gap-[5px]">
69-
<Icon name="clock" size={20} className="brightness-0 invert" />
73+
<FiClock size={20} className="brightness-0 invert" aria-hidden />
7074
{article.readTime}
7175
</span>
7276
<span className="size-1.5 rounded-full bg-white/60" />
7377
<span className="flex items-center gap-[5px]">
74-
<Icon name="user-03" size={20} className="brightness-0 invert" />
78+
<FiUser size={20} className="brightness-0 invert" aria-hidden />
7579
{article.author}
7680
</span>
7781
</div>

‎components/article/RelatedStories.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client";
22

33
import { useState } from "react";
4-
import { Icon } from "@/components/ui/Icon";
4+
import { FiChevronLeft, FiChevronRight } from "react-icons/fi";
55
import { SectionHeading } from "@/components/ui/SectionHeading";
66
import { StoryCard } from "@/components/ui/StoryCard";
77
import type { Story } from "@/lib/home-content";
@@ -28,7 +28,7 @@ export function RelatedStories({ stories }: { stories: Story[] }) {
2828
aria-label="Previous page"
2929
className="flex size-[38px] items-center justify-center rounded-full bg-neutral-200 transition-colors hover:bg-neutral-300 disabled:opacity-40"
3030
>
31-
<Icon name="chevron-left" size={18} />
31+
<FiChevronLeft size={18} aria-hidden />
3232
</button>
3333
<button
3434
type="button"
@@ -37,7 +37,7 @@ export function RelatedStories({ stories }: { stories: Story[] }) {
3737
aria-label="Next page"
3838
className="flex size-[38px] items-center justify-center rounded-full bg-neutral-200 transition-colors hover:bg-neutral-300 disabled:opacity-40"
3939
>
40-
<Icon name="chevron-right" size={18} />
40+
<FiChevronRight size={18} aria-hidden />
4141
</button>
4242
</div>
4343
)}

‎components/article/ShareButtons.tsx‎

Lines changed: 49 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,54 @@
11
"use client";
22

3-
import Image from "next/image";
3+
import type { IconType } from "react-icons";
4+
import {
5+
FaFacebook,
6+
FaInstagram,
7+
FaLinkedinIn,
8+
FaWhatsapp,
9+
} from "react-icons/fa";
10+
import { FaXTwitter } from "react-icons/fa6";
11+
import { FiMail } from "react-icons/fi";
412

5-
const SOCIAL_SHARE = [
13+
const SOCIAL_SHARE: {
14+
name: string;
15+
Icon: IconType;
16+
color: string;
17+
getUrl: (url: string, title: string) => string | null;
18+
}[] = [
619
{
720
name: "LinkedIn",
8-
icon: "/icons/social-linkedin.svg",
9-
getUrl: (url: string) =>
21+
Icon: FaLinkedinIn,
22+
color: "#0A66C2",
23+
getUrl: (url) =>
1024
`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}`,
1125
},
1226
{
1327
name: "Instagram",
14-
icon: "/icons/social-instagram.svg",
28+
Icon: FaInstagram,
29+
color: "#E1306C",
1530
getUrl: () => null,
1631
},
1732
{
1833
name: "Facebook",
19-
icon: "/icons/facebook.svg",
20-
getUrl: (url: string) =>
34+
Icon: FaFacebook,
35+
color: "#0866FF",
36+
getUrl: (url) =>
2137
`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`,
2238
},
2339
{
2440
name: "WhatsApp",
25-
icon: "/icons/social-whatsapp.svg",
26-
getUrl: (url: string, title: string) =>
41+
Icon: FaWhatsapp,
42+
color: "#25D366",
43+
getUrl: (url, title) =>
2744
`https://wa.me/?text=${encodeURIComponent(`${title} ${url}`)}`,
2845
},
2946
{
30-
name: "Email",
31-
icon: "/icons/mail.svg",
32-
getUrl: (url: string, title: string) =>
33-
`mailto:?subject=${encodeURIComponent(title)}&body=${encodeURIComponent(url)}`,
47+
name: "X",
48+
Icon: FaXTwitter,
49+
color: "#000000",
50+
getUrl: (url, title) =>
51+
`https://x.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(url)}`,
3452
},
3553
];
3654

@@ -60,23 +78,33 @@ export function ShareButtons({
6078
labelColor === "text-white" ? "bg-white/50" : "bg-neutral-300"
6179
}`}
6280
/>
63-
{SOCIAL_SHARE.map(({ name, icon, getUrl }) => (
81+
{SOCIAL_SHARE.map(({ name, Icon, color, getUrl }) => (
6482
<button
6583
key={name}
6684
onClick={() => handleShare(getUrl)}
6785
aria-label={`Share on ${name}`}
6886
type="button"
6987
className="shrink-0 cursor-pointer transition-opacity hover:opacity-70"
7088
>
71-
<Image
72-
src={icon}
73-
alt={name}
74-
width={20}
75-
height={20}
76-
className={iconClassName}
77-
/>
89+
<Icon color={color} aria-hidden className={iconClassName} />
7890
</button>
7991
))}
92+
<button
93+
onClick={() => {
94+
const url = `mailto:?subject=${encodeURIComponent(title)}&body=${encodeURIComponent(window.location.href)}`;
95+
window.open(url);
96+
}}
97+
aria-label="Share via Email"
98+
type="button"
99+
className="shrink-0 cursor-pointer transition-opacity hover:opacity-70"
100+
>
101+
<FiMail
102+
size={20}
103+
color={labelColor === "text-white" ? "white" : "#374151"}
104+
aria-hidden
105+
className={iconClassName}
106+
/>
107+
</button>
80108
</div>
81109
);
82110
}

‎components/fact-checks/FilterBar.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
"use client";
22

3-
import { useEffect, useRef } from "react";
4-
import { Icon } from "@/components/ui/Icon";
3+
import { type ElementType, useEffect, useRef } from "react";
54
import { FILTERS, type FilterDimension } from "@/lib/fact-checks-content";
65

76
export type Selection = Record<FilterDimension, string[]>;
@@ -64,7 +63,7 @@ function Check() {
6463
function Dropdown({
6564
dimension,
6665
label,
67-
icon,
66+
icon: FilterIcon,
6867
options,
6968
selected,
7069
open,
@@ -73,7 +72,7 @@ function Dropdown({
7372
}: {
7473
dimension: FilterDimension;
7574
label: string;
76-
icon: string;
75+
icon: ElementType;
7776
options: string[];
7877
selected: string[];
7978
open: boolean;
@@ -89,7 +88,7 @@ function Dropdown({
8988
onClick={onToggleOpen}
9089
className="flex h-11 items-center gap-2 rounded-[10px] border-[0.5px] border-neutral-300 bg-white px-[18px] text-sm font-medium text-neutral-900 transition-colors hover:border-pesacheck-blue"
9190
>
92-
<Icon name={icon} size={20} className="shrink-0" />
91+
<FilterIcon size={20} className="shrink-0" aria-hidden />
9392
{label}
9493
{selected.length > 0 && (
9594
<span className="flex size-5 items-center justify-center rounded-full bg-pesacheck-blue text-xs font-semibold text-white">

‎components/home/Tools.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import Image from "next/image";
2-
import { Icon } from "@/components/ui/Icon";
2+
import { FiArrowUpRight } from "react-icons/fi";
33
import { Container, SectionHeading } from "@/components/ui/SectionHeading";
44
import { TOOLS, type Tool } from "@/lib/home-content";
55
import { ABOUT_BLURB } from "@/lib/site";
@@ -28,10 +28,10 @@ function ToolCard({ tool }: { tool: Tool }) {
2828
<span className="my-1 h-0.5 w-10 rounded bg-white" />
2929
<span className="flex items-center gap-1 text-sm font-medium">
3030
{tool.cta}
31-
<Icon
32-
name="arrow-up-right"
31+
<FiArrowUpRight
3332
size={10}
3433
className="brightness-0 invert"
34+
aria-hidden
3535
/>
3636
</span>
3737
</div>

0 commit comments

Comments
 (0)