Merge branch 'icons' into 'develop'

I don't think it makes sense to have SvgIcon and ForkAwesomeIcon in a single component anymore

See merge request soapbox-pub/soapbox!2139

app/soapbox/components/icon-button.tsx

@@ -90,7 +90,7 @@ const IconButton: React.FC<IIconButton> = ({
       type='button'
     >
       <div>
-        <Icon className={iconClassName} src={src} fixedWidth aria-hidden='true' />
+        <Icon className={iconClassName} src={src} aria-hidden='true' />
       </div>
       {text && <span className='icon-button__text'>{text}</span>}
     </button>

app/soapbox/components/icon.tsx

@@ -1,27 +1,28 @@
 /**
- * Icon: abstract icon class that can render icons from multiple sets.
+ * Icon: abstact component to render SVG icons.
  * @module soapbox/components/icon
- * @see soapbox/components/fork_awesome_icon
- * @see soapbox/components/svg_icon
  */
 
+import classNames from 'clsx';
 import React from 'react';
+import InlineSVG from 'react-inlinesvg'; // eslint-disable-line no-restricted-imports
 
-import ForkAwesomeIcon, { IForkAwesomeIcon } from './fork-awesome-icon';
+export interface IIcon extends React.HTMLAttributes<HTMLDivElement> {
-import SvgIcon, { ISvgIcon } from './svg-icon';
+  src: string,
+  id?: string,
+  alt?: string,
+  className?: string,
+}
 
-export type IIcon = IForkAwesomeIcon | ISvgIcon;
+const Icon: React.FC<IIcon> = ({ src, alt, className, ...rest }) => {
-
+  return (
-const Icon: React.FC<IIcon> = (props) => {
+    <div
-  if ((props as ISvgIcon).src) {
+      className={classNames('svg-icon', className)}
-    const { src, ...rest } = (props as ISvgIcon);
+      {...rest}
-
+    >
-    return <SvgIcon src={src} {...rest} />;
+      <InlineSVG src={src} title={alt} loader={<></>} />
-  } else {
+    </div>
-    const { id, fixedWidth, ...rest } = (props as IForkAwesomeIcon);
+  );
-
-    return <ForkAwesomeIcon id={id} fixedWidth={fixedWidth} {...rest} />;
-  }
 };
 
 export default Icon;

app/soapbox/components/status-content.tsx

@@ -26,7 +26,7 @@ interface IReadMoreButton {
 const ReadMoreButton: React.FC<IReadMoreButton> = ({ onClick }) => (
   <button className='flex items-center text-gray-900 dark:text-gray-300 border-0 bg-transparent p-0 pt-2 hover:underline active:underline' onClick={onClick}>
     <FormattedMessage id='status.read_more' defaultMessage='Read more' />
-    <Icon className='inline-block h-5 w-5' src={require('@tabler/icons/chevron-right.svg')} fixedWidth />
+    <Icon className='inline-block h-5 w-5' src={require('@tabler/icons/chevron-right.svg')} />
   </button>
 );
 

app/soapbox/components/svg-icon.tsx

@@ -1,29 +0,0 @@
-/**
- * SvgIcon: abstact component to render SVG icons.
- * @module soapbox/components/svg_icon
- * @see soapbox/components/icon
- */
-
-import classNames from 'clsx';
-import React from 'react';
-import InlineSVG from 'react-inlinesvg'; // eslint-disable-line no-restricted-imports
-
-export interface ISvgIcon extends React.HTMLAttributes<HTMLDivElement> {
-  src: string,
-  id?: string,
-  alt?: string,
-  className?: string,
-}
-
-const SvgIcon: React.FC<ISvgIcon> = ({ src, alt, className, ...rest }) => {
-  return (
-    <div
-      className={classNames('svg-icon', className)}
-      {...rest}
-    >
-      <InlineSVG src={src} title={alt} loader={<></>} />
-    </div>
-  );
-};
-
-export default SvgIcon;

app/soapbox/features/list-adder/components/list.tsx

@@ -37,7 +37,7 @@ const List: React.FC<IList> = ({ listId }) => {
 
   return (
     <div className='flex items-center gap-1.5 px-2 py-4 text-black dark:text-white'>
-      <Icon src={require('@tabler/icons/list.svg')} fixedWidth />
+      <Icon src={require('@tabler/icons/list.svg')} />
       <span className='flex-grow'>
         {list.title}
       </span>

app/soapbox/features/lists/index.tsx

@@ -84,7 +84,7 @@ const Lists: React.FC = () => {
         >
           {lists.map((list: any) => (
             <Link key={list.id} to={`/list/${list.id}`} className='flex items-center gap-1.5 p-2 text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg'>
-              <Icon src={require('@tabler/icons/list.svg')} fixedWidth />
+              <Icon src={require('@tabler/icons/list.svg')} />
               <span className='flex-grow'>
                 {list.title}
               </span>

app/soapbox/features/soapbox-config/components/icon-picker-dropdown.tsx

@@ -3,7 +3,7 @@ import { defineMessages, useIntl } from 'react-intl';
 // @ts-ignore
 import Overlay from 'react-overlays/lib/Overlay';
 
-import Icon from 'soapbox/components/icon';
+import ForkAwesomeIcon from 'soapbox/components/fork-awesome-icon';
 
 import IconPickerMenu from './icon-picker-menu';
 
@@ -68,7 +68,7 @@ const IconPickerDropdown: React.FC<IIconPickerDropdown> = ({ value, onPickEmoji
         onKeyDown={onToggle}
         tabIndex={0}
       >
-        <Icon id={value} />
+        <ForkAwesomeIcon id={value} />
       </div>
 
       <Overlay show={active} placement={placement} target={target.current}>

app/soapbox/features/ui/components/list-panel.tsx

@@ -1,45 +0,0 @@
-import React, { useEffect } from 'react';
-import { NavLink } from 'react-router-dom';
-import { createSelector } from 'reselect';
-
-import { fetchLists } from 'soapbox/actions/lists';
-import Icon from 'soapbox/components/icon';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-
-import type { List as ImmutableList } from 'immutable';
-import type { RootState } from 'soapbox/store';
-import type { List as ListEntity } from 'soapbox/types/entities';
-
-const getOrderedLists = createSelector([(state: RootState) => state.lists], lists => {
-  if (!lists) {
-    return lists;
-  }
-
-  return lists.toList().filter(item => !!item).sort((a, b) => (a as ListEntity).title.localeCompare((b as ListEntity).title)).take(4) as ImmutableList<ListEntity>;
-});
-
-const ListPanel = () => {
-  const dispatch = useAppDispatch();
-
-  const lists = useAppSelector((state) => getOrderedLists(state));
-
-  useEffect(() => {
-    dispatch(fetchLists());
-  }, []);
-
-  if (!lists || lists.isEmpty()) {
-    return null;
-  }
-
-  return (
-    <div>
-      <hr />
-
-      {lists.map(list => (
-        <NavLink key={list.id} className='column-link column-link--transparent' strict to={`/list/${list.id}`}><Icon className='column-link__icon' id='list-ul' fixedWidth />{list.title}</NavLink>
-      ))}
-    </div>
-  );
-};
-
-export default ListPanel;

app/soapbox/features/ui/components/promo-panel.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Icon from 'soapbox/components/icon';
+import ForkAwesomeIcon from 'soapbox/components/fork-awesome-icon';
 import { Widget, Stack, Text } from 'soapbox/components/ui';
 import { useInstance, useSettings, useSoapboxConfig } from 'soapbox/hooks';
 
@@ -20,7 +20,7 @@ const PromoPanel: React.FC = () => {
         {promoItems.map((item, i) => (
           <Text key={i}>
             <a className='flex items-center' href={item.url} target='_blank'>
-              <Icon id={item.icon} className='flex-none text-lg mr-2 rtl:mr-0 rtl:ml-2' fixedWidth />
+              <ForkAwesomeIcon id={item.icon} className='flex-none text-lg mr-2 rtl:mr-0 rtl:ml-2' fixedWidth />
               {item.textLocales.get(locale) || item.text}
             </a>
           </Text>