Merge branch 'next-icons' into 'next'

Use custom SvgIcon component wrapper around InlineSVG

See merge request soapbox-pub/soapbox-fe!1195

.eslintrc.js

@@ -94,6 +94,12 @@ module.exports = {
     'no-loop-func': 'error',
     'no-mixed-spaces-and-tabs': 'error',
     'no-nested-ternary': 'warn',
+    'no-restricted-imports': ['error', {
+      patterns: [{
+        group: ['react-inlinesvg'],
+        message: 'Use the SvgIcon component instead.',
+      }],
+    }],
     'no-trailing-spaces': 'warn',
     'no-undef': 'error',
     'no-unreachable': 'error',

app/soapbox/components/__mocks__/react-inlinesvg.js

@@ -1,10 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-export default function InlineSVG({ src }) {
-  return <svg id={src} />;
-}
-
-InlineSVG.propTypes = {
-  src: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
-};

app/soapbox/components/__mocks__/react-inlinesvg.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+interface IInlineSVG {
+  loader?: JSX.Element,
+}
+
+const InlineSVG: React.FC<IInlineSVG> = ({ loader }): JSX.Element => {
+  if (loader) {
+    return loader;
+  } else {
+    throw 'You used react-inlinesvg without a loader! This will cause jumpy loading during render.';
+  }
+};
+
+export default InlineSVG;

app/soapbox/components/sidebar-navigation-link.tsx

@@ -37,16 +37,14 @@ const SidebarNavigationLink = ({ icon, text, to, count }: ISidebarNavigationLink
           </span>
         ) : null}
 
-        <div className='h-5 w-5'>
-          <Icon
-            src={icon}
-            className={classNames({
-              'h-full w-full': true,
-              'text-primary-700 dark:text-white': !isActive,
-              'text-white': isActive,
-            })}
-          />
-        </div>
+        <Icon
+          src={icon}
+          className={classNames({
+            'h-5 w-5': true,
+            'text-primary-700 dark:text-white': !isActive,
+            'text-white': isActive,
+          })}
+        />
       </span>
 
       <Text weight='semibold' theme='inherit'>{text}</Text>

app/soapbox/components/sidebar-navigation.tsx

@@ -33,7 +33,7 @@ const SidebarNavigation = () => {
         {account && (
           <>
             <SidebarNavigationLink
-              to={`/@${account.get('acct')}`}
+              to={`/@${account.acct}`}
               icon={require('icons/user.svg')}
               text={<FormattedMessage id='tabs_bar.profile' defaultMessage='Profile' />}
             />
@@ -79,7 +79,7 @@ const SidebarNavigation = () => {
           />
         )} */}
 
-        {(account && instance.get('invites_enabled')) && (
+        {(account && instance.invites_enabled) && (
           <SidebarNavigationLink
             to={`${baseURL}/invites`}
             icon={require('@tabler/icons/icons/mailbox.svg')}
@@ -101,7 +101,7 @@ const SidebarNavigation = () => {
               src={require('@tabler/icons/icons/users.svg')}
               className={classNames('primary-navigation__icon', { 'svg-icon--active': location.pathname === '/timeline/local' })}
             />
-            {instance.get('title')}
+            {instance.title}
           </NavLink>
         ) : (
           <NavLink to='/timeline/local' className='btn grouped'>

app/soapbox/components/status-action-button.tsx

@@ -1,8 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
-import InlineSVG from 'react-inlinesvg';
 
-import { Text } from 'soapbox/components/ui';
+import { Text, Icon } from 'soapbox/components/ui';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
 
 const COLORS = {
@@ -53,10 +52,10 @@ const StatusActionButton = React.forwardRef((props: IStatusActionButton, ref: Re
       )}
       {...filteredProps}
     >
-      <InlineSVG
+      <Icon
         src={icon}
         className={classNames(
-          'p-1 rounded-full box-content',
+          'rounded-full',
           'group-focus:outline-none group-focus:ring-2 group-focus:ring-offset-2 dark:ring-offset-0 group-focus:ring-primary-500',
           {
             'fill-accent-300 hover:fill-accent-300': active && filled && color === COLORS.accent,

app/soapbox/components/svg_icon.js

@@ -7,7 +7,7 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import InlineSVG from 'react-inlinesvg';
+import InlineSVG from 'react-inlinesvg'; // eslint-disable-line no-restricted-imports
 
 export default class SvgIcon extends React.PureComponent {
 
@@ -25,7 +25,7 @@ export default class SvgIcon extends React.PureComponent {
         className={classNames('svg-icon', className)}
         {...other}
       >
-        <InlineSVG src={src} title={alt} />
+        <InlineSVG src={src} title={alt} loader={<></>} />
       </div>
     );
   }

app/soapbox/components/ui/card/card.tsx

@@ -1,10 +1,10 @@
 import classNames from 'classnames';
 import React from 'react';
-import InlineSVG from 'react-inlinesvg';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 import { Text } from 'soapbox/components/ui';
+import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 
 const sizes = {
   md: 'p-4 sm:rounded-xl',
@@ -54,7 +54,7 @@ const CardHeader: React.FC<ICardHeader> = ({ children, backHref, onBackClick }):
 
     return (
       <Comp {...backAttributes} className='mr-2 text-gray-900 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
-        <InlineSVG src={require('@tabler/icons/icons/arrow-left.svg')} className='h-6 w-6' />
+        <SvgIcon src={require('@tabler/icons/icons/arrow-left.svg')} className='h-6 w-6' />
         <span className='sr-only' data-testid='back-button'>Back</span>
       </Comp>
     );

app/soapbox/components/ui/icon-button/icon-button.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
-import InlineSVG from 'react-inlinesvg';
 
+import SvgIcon from '../icon/svg-icon';
 import Text from '../text/text';
 
 interface IIconButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -24,7 +24,7 @@ const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef
       {...filteredProps}
       data-testid='icon-button'
     >
-      <InlineSVG src={src} className={iconClassName} />
+      <SvgIcon src={src} className={iconClassName} />
 
       {text ? (
         <Text tag='span' theme='muted' size='sm'>

app/soapbox/components/ui/icon/__tests__/svg-icon.test.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import { render, screen } from '../../../../jest/test-helpers';
+import SvgIcon from '../svg-icon';
+
+describe('<SvgIcon />', () => {
+  it('renders loading element with default size', () => {
+    render(<SvgIcon className='text-primary-500' src={require('@tabler/icons/icons/code.svg')} />);
+
+    const svg = screen.getByTestId('svg-icon-loader');
+    expect(svg.getAttribute('width')).toBe('24');
+    expect(svg.getAttribute('height')).toBe('24');
+    expect(svg.getAttribute('class')).toBe('text-primary-500');
+  });
+});

app/soapbox/components/ui/icon/icon.tsx

@@ -1,14 +1,16 @@
 import React from 'react';
-import InlineSVG from 'react-inlinesvg';
+
+import SvgIcon from './svg-icon';
 
 interface IIcon {
   className?: string,
   count?: number,
   alt?: string,
   src: string,
+  size?: number,
 }
 
-const Icon = ({ src, alt, count, ...filteredProps }: IIcon): JSX.Element => (
+const Icon = ({ src, alt, count, size, ...filteredProps }: IIcon): JSX.Element => (
   <div className='relative' data-testid='icon'>
     {count ? (
       <span className='absolute -top-2 -right-3 block px-1.5 py-0.5 bg-accent-500 text-xs text-white rounded-full ring-2 ring-white'>
@@ -16,7 +18,7 @@ const Icon = ({ src, alt, count, ...filteredProps }: IIcon): JSX.Element => (
       </span>
     ) : null}
 
-    <InlineSVG src={src} title={alt} {...filteredProps} />
+    <SvgIcon src={src} size={size} alt={alt} {...filteredProps} />
   </div>
 );
 

app/soapbox/components/ui/icon/svg-icon.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import InlineSVG from 'react-inlinesvg'; // eslint-disable-line no-restricted-imports
+
+interface ISvgIcon {
+  className?: string,
+  alt?: string,
+  src: string,
+  size?: number,
+}
+
+/** Renders an inline SVG with an empty frame loading state */
+const SvgIcon: React.FC<ISvgIcon> = ({ src, alt, size = 24, className }): JSX.Element => {
+  const loader = (
+    <svg
+      className={className}
+      width={size}
+      height={size}
+      data-src={src}
+      data-testid='svg-icon-loader'
+    />
+  );
+
+  return (
+    <InlineSVG
+      className={className}
+      src={src}
+      title={alt}
+      width={size}
+      height={size}
+      loader={loader}
+      data-testid='svg-icon'
+    >
+      /* If the fetch fails, fall back to displaying the loader */
+      {loader}
+    </InlineSVG>
+  );
+};
+
+export default SvgIcon;

app/soapbox/components/ui/input/input.tsx

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
 import React from 'react';
-import InlineSVG from 'react-inlinesvg';
 import { defineMessages, useIntl } from 'react-intl';
 
 import Icon from '../icon/icon';
+import SvgIcon from '../icon/svg-icon';
 import Tooltip from '../tooltip/tooltip';
 
 const messages = defineMessages({
@@ -72,7 +72,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
                 tabIndex={-1}
                 className='text-gray-400 hover:text-gray-500 h-full px-2 focus:ring-primary-500 focus:ring-2'
               >
-                <InlineSVG
+                <SvgIcon
                   src={revealed ? require('@tabler/icons/icons/eye-off.svg') : require('@tabler/icons/icons/eye.svg')}
                   className='h-4 w-4'
                 />

app/soapbox/features/account/components/header.js

@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import InlineSVG from 'react-inlinesvg';
 import { defineMessages, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
@@ -16,6 +15,7 @@ import Avatar from 'soapbox/components/avatar';
 import Badge from 'soapbox/components/badge';
 import StillImage from 'soapbox/components/still_image';
 import { HStack, IconButton, Menu, MenuButton, MenuItem, MenuList, MenuLink, MenuDivider } from 'soapbox/components/ui';
+import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import ActionButton from 'soapbox/features/ui/components/action_button';
 import {
   isLocal,
@@ -614,7 +614,7 @@ class Header extends ImmutablePureComponent {
                           return (
                             <Comp key={idx} {...itemProps} className='group'>
                               <div className='flex items-center'>
-                                <InlineSVG src={menuItem.icon} className='mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500' />
+                                <SvgIcon src={menuItem.icon} className='mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500' />
 
                                 <div className='truncate'>{menuItem.text}</div>
                               </div>

app/soapbox/features/compose/components/search.tsx

@@ -2,12 +2,12 @@ import classNames from 'classnames';
 import { Map as ImmutableMap } from 'immutable';
 import debounce from 'lodash/debounce';
 import * as React from 'react';
-import InlineSVG from 'react-inlinesvg';
 import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 
 import AutosuggestAccountInput from 'soapbox/components/autosuggest_account_input';
+import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import { useAppSelector } from 'soapbox/hooks';
 
 import {
@@ -140,12 +140,12 @@ const Search = (props: ISearch) => {
           className='absolute inset-y-0 right-0 px-3 flex items-center cursor-pointer'
           onClick={handleClear}
         >
-          <InlineSVG
+          <SvgIcon
             src={require('@tabler/icons/icons/search.svg')}
             className={classNames('h-4 w-4 text-gray-400', { hidden: hasValue })}
           />
 
-          <InlineSVG
+          <SvgIcon
             src={require('@tabler/icons/icons/x.svg')}
             className={classNames('h-4 w-4 text-gray-400', { hidden: !hasValue })}
             aria-label={intl.formatMessage(messages.placeholder)}

app/soapbox/features/developers/developers_menu.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import InlineSVG from 'react-inlinesvg';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 import { Link, useHistory } from 'react-router-dom';
@@ -7,6 +6,7 @@ import { Link, useHistory } from 'react-router-dom';
 import { changeSettingImmediate } from 'soapbox/actions/settings';
 import snackbar from 'soapbox/actions/snackbar';
 import { Text } from 'soapbox/components/ui';
+import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 
 import Column from '../ui/components/column';
 
@@ -32,7 +32,7 @@ const Developers = () => {
     <Column label={intl.formatMessage(messages.heading)}>
       <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2'>
         <Link to='/developers/apps/create' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
-          <InlineSVG src={require('@tabler/icons/icons/apps.svg')} className='dark:text-gray-100' />
+          <SvgIcon src={require('@tabler/icons/icons/apps.svg')} className='dark:text-gray-100' />
 
           <Text>
             <FormattedMessage id='developers.navigation.app_create_label' defaultMessage='Create an app' />
@@ -40,7 +40,7 @@ const Developers = () => {
         </Link>
 
         <Link to='/developers/settings_store' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
-          <InlineSVG src={require('@tabler/icons/icons/code-plus.svg')} className='dark:text-gray-100' />
+          <SvgIcon src={require('@tabler/icons/icons/code-plus.svg')} className='dark:text-gray-100' />
 
           <Text>
             <FormattedMessage id='developers.navigation.settings_store_label' defaultMessage='Settings store' />
@@ -48,7 +48,7 @@ const Developers = () => {
         </Link>
 
         <Link to='/error' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
-          <InlineSVG src={require('@tabler/icons/icons/mood-sad.svg')} className='dark:text-gray-100' />
+          <SvgIcon src={require('@tabler/icons/icons/mood-sad.svg')} className='dark:text-gray-100' />
 
           <Text>
             <FormattedMessage id='developers.navigation.intentional_error_label' defaultMessage='Trigger an error' />
@@ -56,7 +56,7 @@ const Developers = () => {
         </Link>
 
         <button onClick={leaveDevelopers} className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
-          <InlineSVG src={require('@tabler/icons/icons/logout.svg')} className='dark:text-gray-100' />
+          <SvgIcon src={require('@tabler/icons/icons/logout.svg')} className='dark:text-gray-100' />
 
           <Text>
             <FormattedMessage id='developers.navigation.leave_developers_label' defaultMessage='Leave developers' />