Merge branch 'tabler-new-icons' into 'develop'

Update Tabler to v1.71.0, use new pencil-plus and message-circle-2 icons

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

app/icons/COPYING.md

@@ -1,9 +1,6 @@
 # Custom icons
 
 - fediverse.svg - Modified from Wikipedia, CC0  
-- pen-plus.svg - Modified from Tabler icons, MIT  
 - verified.svg - Created by Alex Gleason. CC0
 
-Tabler: https://tabler-icons.io/  
-Feather: https://feathericons.com/  
 Fediverse logo: https://en.wikipedia.org/wiki/Fediverse#/media/File:Fediverse_logo_proposal.svg  

app/icons/pen-plus.svg

@@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler" viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <path d="M6 20h4L20.5 9.5a2.83 2.83 0 0 0 0-4 2.83 2.83 0 0 0-4 0L6 16v4M5.5 3v7"/>
-  <path d="M2 6.5h7m6.5 0l4 4"/>
-</svg>

app/soapbox/components/status_action_bar.tsx

@@ -644,7 +644,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
       <div className='pt-4 flex flex-row space-x-2'>
         <StatusActionButton
           title={replyTitle}
-          icon={require('@tabler/icons/icons/message-circle.svg')}
+          icon={require('@tabler/icons/icons/message-circle-2.svg')}
           onClick={this.handleReplyClick}
           count={replyCount}
         />

app/soapbox/features/status/components/action-bar.tsx

@@ -563,7 +563,7 @@ class ActionBar extends React.PureComponent<IActionBar, IActionBarState> {
       <HStack justifyContent='between'>
         <IconButton
           title={intl.formatMessage(messages.reply)}
-          src={require('@tabler/icons/icons/message-circle.svg')}
+          src={require('@tabler/icons/icons/message-circle-2.svg')}
           className='text-gray-400 hover:text-gray-600'
           onClick={this.handleReplyClick}
           text={intl.formatMessage(messages.reply)}

app/soapbox/features/ui/components/compose-button.tsx

@@ -11,7 +11,7 @@ const ComposeButton = () => {
 
   return (
     <div className='mt-4'>
-      <Button icon={require('icons/pen-plus.svg')} block size='lg' onClick={onOpenCompose}>
+      <Button icon={require('@tabler/icons/icons/pencil-plus.svg')} block size='lg' onClick={onOpenCompose}>
         <span><FormattedMessage id='navigation.compose' defaultMessage='Compose' /></span>
       </Button>
     </div>

app/soapbox/features/ui/index.tsx

@@ -650,7 +650,7 @@ const UI: React.FC = ({ children }) => {
       className='floating-action-button'
       aria-label={intl.formatMessage(messages.publish)}
     >
-      <Icon src={require('icons/pen-plus.svg')} />
+      <Icon src={require('@tabler/icons/icons/pencil-plus.svg')} />
     </button>
   );
 

package.json

@@ -67,7 +67,7 @@
     "@sentry/browser": "^7.2.0",
     "@sentry/react": "^7.2.0",
     "@sentry/tracing": "^7.2.0",
-    "@tabler/icons": "^1.53.0",
+    "@tabler/icons": "^1.71.0",
     "@tailwindcss/forms": "^0.4.0",
     "@tailwindcss/typography": "^0.5.1",
     "@testing-library/react": "^12.1.4",

yarn.lock

@@ -2279,10 +2279,10 @@
     remark "^13.0.0"
     unist-util-find-all-after "^3.0.2"
 
-"@tabler/icons@^1.53.0":
-  version "1.53.0"
-  resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-1.53.0.tgz#51536e01b343cfaf26b701df306b2c0369769e3c"
-  integrity sha512-Skk1BqXEOEhiRsXJgZBYtjFa/+4dMSFA5UyzTUW20oyyUSd3iizhEWrYt0jT87iFu771gWoqVV2/OGobBcGjgQ==
+"@tabler/icons@^1.71.0":
+  version "1.71.0"
+  resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-1.71.0.tgz#74d771aa18487ea92af07c67048e411ada0f0427"
+  integrity sha512-hOeXAWSXGgT2S8O9QrRTomEq6YE1AtuXrcOy5DgGVI93xub1JnGSA3Z9gZzuND4pSJ+Ee+geI5u8hTYbfIsuGw==
 
 "@tailwindcss/forms@^0.4.0":
   version "0.4.0"