1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
/*
* SPDX-FileCopyrightText: 2023-2024 Kristóf Marussy
*
* SPDX-License-Identifier: MIT
*/
import { useId } from 'react';
import {
siCreativecommons,
siDblp,
siGithub,
siGooglescholar,
siLinkedin,
siOrcid,
siScopus,
} from 'simple-icons';
import fediverse from './icons/fediverse';
import mtmt from './icons/mtmt';
export interface IconProps {
hidden?: boolean;
className?: string;
alt?: string;
}
export function Icon({
path,
alt,
hidden,
className,
}: IconProps & {
path: string;
}) {
const titleId = useId();
return (
<>
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
role="img"
{...(hidden ? { 'aria-hidden': true } : { 'aria-labelledby': titleId })}
viewBox="0 0 24 24"
width="24"
height="24"
{...(className ? { className } : {})}
>
<path fill="currentColor" d={path} />
</svg>
{!hidden && (
<span className="sr-only" id={titleId}>
{alt}
</span>
)}
</>
);
}
export interface SimpleIcon {
path: string;
title: string;
}
export function SimpleIcon({
icon: { path, title },
...props
}: IconProps & {
icon: SimpleIcon;
}) {
return <Icon path={path} {...{ ...props, alt: props.alt ?? title }} />;
}
function makeSimpleIcon(icon: SimpleIcon): (props: IconProps) => JSX.Element {
return (props) => <SimpleIcon icon={icon} {...props} />;
}
export const CreativeCommonsIcon = makeSimpleIcon(siCreativecommons);
export const DBLPIcon = makeSimpleIcon(siDblp);
export const FediverseIcon = makeSimpleIcon(fediverse);
export const GithubIcon = makeSimpleIcon(siGithub);
export const GoogleScholarIcon = makeSimpleIcon(siGooglescholar);
export const LinkedInIcon = makeSimpleIcon(siLinkedin);
export const MTMTIcon = makeSimpleIcon(mtmt);
export const OrcidIcon = makeSimpleIcon(siOrcid);
export const ScopusIcon = makeSimpleIcon(siScopus);
|
