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;