Merge branch 'replace-icons' into 'develop'

Change icons for federation restrictions page

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

app/soapbox/features/federation_restrictions/components/instance_restrictions.js

@@ -50,7 +50,7 @@ class InstanceRestrictions extends ImmutablePureComponent {
       items.push((
         <div className='federation-restriction' key='followers_only'>
           <div className='federation-restriction__icon'>
-            <Icon id='lock' />
+            <Icon src={require('@tabler/icons/icons/lock.svg')} />
           </div>
           <div className='federation-restriction__message'>
             <FormattedMessage
@@ -64,7 +64,7 @@ class InstanceRestrictions extends ImmutablePureComponent {
       items.push((
         <div className='federation-restriction' key='federated_timeline_removal'>
           <div className='federation-restriction__icon'>
-            <Icon id='unlock' />
+            <Icon src={require('@tabler/icons/icons/lock-open.svg')} />
           </div>
           <div className='federation-restriction__message'>
             <FormattedMessage
@@ -80,7 +80,7 @@ class InstanceRestrictions extends ImmutablePureComponent {
       items.push((
         <div className='federation-restriction' key='full_media_removal'>
           <div className='federation-restriction__icon'>
-            <Icon id='photo' />
+            <Icon src={require('@tabler/icons/icons/photo-off.svg')} />
           </div>
           <div className='federation-restriction__message'>
             <FormattedMessage
@@ -94,7 +94,7 @@ class InstanceRestrictions extends ImmutablePureComponent {
       items.push((
         <div className='federation-restriction' key='partial_media_removal'>
           <div className='federation-restriction__icon'>
-            <Icon id='photo' />
+            <Icon src={require('@tabler/icons/icons/photo-off.svg')} />
           </div>
           <div className='federation-restriction__message'>
             <FormattedMessage

app/soapbox/features/federation_restrictions/components/restricted_instance.js

@@ -43,7 +43,7 @@ class RestrictedInstance extends ImmutablePureComponent {
       >
         <a href='#' className='restricted-instance__header' onClick={this.toggleExpanded}>
           <div className='restricted-instance__icon'>
-            <Icon id={expanded ? 'caret-down' : 'caret-right'} />
+            <Icon src={expanded ? require('@tabler/icons/icons/caret-down.svg') : require('@tabler/icons/icons/caret-right.svg')} />
           </div>
           <div className='restricted-instance__host'>
             {remoteInstance.get('host')}

app/styles/components/federation-restrictions.scss

@@ -20,6 +20,10 @@
 
   &__icon {
     width: 16px;
+
+    .svg-icon svg {
+      stroke-width: 1.3;
+    }
   }
 
   &--expanded &__icon i.fa {