diff options
Diffstat (limited to 'src/components/icons.tsx')
-rw-r--r-- | src/components/icons.tsx | 58 |
1 files changed, 58 insertions, 0 deletions
diff --git a/src/components/icons.tsx b/src/components/icons.tsx new file mode 100644 index 0000000..5f3b40f --- /dev/null +++ b/src/components/icons.tsx | |||
@@ -0,0 +1,58 @@ | |||
1 | /* | ||
2 | * SPDX-FileCopyrightText: 2023 Kristóf Marussy | ||
3 | * | ||
4 | * SPDX-License-Identifier: MIT | ||
5 | */ | ||
6 | |||
7 | import { useId } from 'react'; | ||
8 | import { | ||
9 | siGithub, | ||
10 | siGooglescholar, | ||
11 | siLinkedin, | ||
12 | siOrcid, | ||
13 | } from 'simple-icons'; | ||
14 | |||
15 | import fediverse from './icons/fediverse'; | ||
16 | |||
17 | export function Icon({ path, alt }: { | ||
18 | path: string; | ||
19 | alt: string; | ||
20 | }) { | ||
21 | const titleId = useId(); | ||
22 | |||
23 | return ( | ||
24 | <> | ||
25 | <svg | ||
26 | version="1.1" | ||
27 | xmlns="http://www.w3.org/2000/svg" | ||
28 | role="img" | ||
29 | aria-labelledby={titleId} | ||
30 | viewBox="0 0 24 24" | ||
31 | width="24" | ||
32 | height="24" | ||
33 | > | ||
34 | <path fill="currentColor" d={path} /> | ||
35 | </svg> | ||
36 | <span className="sr-only" id={titleId}>{alt}</span> | ||
37 | </> | ||
38 | ); | ||
39 | } | ||
40 | |||
41 | export function SimpleIcon({ icon: { path, title } }: { | ||
42 | icon: { | ||
43 | path: string; | ||
44 | title: string; | ||
45 | }; | ||
46 | }) { | ||
47 | return <Icon path={path} alt={title} />; | ||
48 | } | ||
49 | |||
50 | export const FediverseIcon = () => <SimpleIcon icon={fediverse} />; | ||
51 | |||
52 | export const GithubIcon = () => <SimpleIcon icon={siGithub} />; | ||
53 | |||
54 | export const GoogleScholarIcon = () => <SimpleIcon icon={siGooglescholar} />; | ||
55 | |||
56 | export const LinkedInIcon = () => <SimpleIcon icon={siLinkedin} />; | ||
57 | |||
58 | export const OrcidIcon = () => <SimpleIcon icon={siOrcid} />; | ||