]> git.localhorst.tv Git - alttp.git/blob - resources/js/components/common/Icon.js
d1376e3d9fcacbfef3ed1c9ea427350e195511f9
[alttp.git] / resources / js / components / common / Icon.js
1 import { library } from '@fortawesome/fontawesome-svg-core';
2 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
3 import { faJsSquare } from '@fortawesome/free-brands-svg-icons';
4 import { fab } from '@fortawesome/free-brands-svg-icons';
5 import { fas } from '@fortawesome/free-solid-svg-icons';
6 import React from 'react';
7 import PropTypes from 'prop-types';
8 import { withTranslation } from 'react-i18next';
9
10 import i18n from '../../i18n';
11
12 library.add(faJsSquare);
13 library.add(fab);
14 library.add(fas);
15
16 const Icon = ({
17         alt,
18         className,
19         name,
20         size,
21         title,
22 }) =>
23         <FontAwesomeIcon
24                 icon={name}
25                 alt={alt}
26                 className={name === Icon.LOADING ? `${className} fa-spin` : className}
27                 size={size}
28                 title={title}
29         />
30 ;
31
32 Icon.propTypes = {
33         name: PropTypes.oneOfType([
34                 PropTypes.string,
35                 PropTypes.arrayOf(PropTypes.string),
36         ]).isRequired,
37         alt: PropTypes.string,
38         className: PropTypes.string,
39         size: PropTypes.string,
40         title: PropTypes.string,
41 };
42
43 Icon.defaultProps = {
44         alt: null,
45         className: '',
46         size: null,
47         title: null,
48 };
49
50 const makePreset = (presetDisplayName, presetName) => {
51         const preset = ({ alt, className, name, size, title}) => <Icon
52                 alt={alt || i18n.t(`icon.${presetDisplayName}`)}
53                 className={className}
54                 name={name || presetName}
55                 size={size}
56                 title={title !== '' ? title || alt || i18n.t(`icon.${presetDisplayName}`) : null}
57         />;
58         preset.displayName = presetDisplayName;
59         return withTranslation()(preset);
60 };
61
62 Icon.DISCORD = makePreset('DiscordIcon', ['fab', 'discord']);
63 Icon.LOGOUT = makePreset('LogoutIcon', 'sign-out-alt');
64
65 export default Icon;