Add Tabler icons

app/soapbox/components/icon.js

@@ -2,27 +2,29 @@
  * Icon: abstract icon class that can render icons from multiple sets.
  * @module soapbox/components/icon
  * @see soapbox/components/fork_awesome_icon
+ * @see soapbox/components/svg_icon
  */
 
 import React from 'react';
 import PropTypes from 'prop-types';
 import ForkAwesomeIcon from './fork_awesome_icon';
+import SvgIcon from './svg_icon';
 
 export default class Icon extends React.PureComponent {
 
   static propTypes = {
     id: PropTypes.string.isRequired,
-    iconset: PropTypes.string,
+    src: PropTypes.string,
     className: PropTypes.string,
-    fixedWidth: PropTypes.bool,
   };
 
   render() {
-    const { iconset, ...rest } = this.props;
+    const { id, src, ...rest } = this.props;
 
-    switch(iconset) {
-    default:
-      return <ForkAwesomeIcon {...rest} />;
+    if (src) {
+      return <SvgIcon src={src} {...rest} />;
+    } else {
+      return <ForkAwesomeIcon id={id} {...rest} />;
     }
   }
 

app/soapbox/components/sidebar_menu.js

@@ -200,84 +200,84 @@ class SidebarMenu extends ImmutablePureComponent {
 
             <div className='sidebar-menu__section sidebar-menu__section'>
               <NavLink className='sidebar-menu-item' to={`/@${acct}`} onClick={this.handleClose}>
-                <Icon id='user' />
+                <Icon src={require('@tabler/icons/icons/user.svg')} />
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.profile)}</span>
               </NavLink>
               {donateUrl && <a className='sidebar-menu-item' href={donateUrl} onClick={this.handleClose}>
-                <Icon id='dollar' />
+                <Icon src={require('@tabler/icons/icons/coin.svg')} />
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.donate)}</span>
               </a>}
               {hasCrypto && <NavLink className='sidebar-menu-item' to='/donate/crypto' onClick={this.handleClose}>
-                <Icon id='bitcoin' />
+                <Icon src={require('@tabler/icons/icons/currency-bitcoin.svg')} />
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.donate_crypto)}</span>
               </NavLink>}
               {features.lists && <NavLink className='sidebar-menu-item' to='/lists' onClick={this.handleClose}>
-                <Icon id='list' />
+                <Icon src={require('@tabler/icons/icons/list.svg')} />
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.lists)}</span>
               </NavLink>}
               {features.bookmarks && <NavLink className='sidebar-menu-item' to='/bookmarks' onClick={this.handleClose}>
-                <Icon id='bookmark' />
+                <Icon src={require('@tabler/icons/icons/bookmarks.svg')} />
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.bookmarks)}</span>
               </NavLink>}
             </div>
 
             <div className='sidebar-menu__section'>
               <NavLink className='sidebar-menu-item' to='/follow_requests' onClick={this.handleClose}>
-                <Icon id='user-plus' />
+                <Icon src={require('@tabler/icons/icons/user-plus.svg')} />
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.follow_requests)}</span>
               </NavLink>
               <NavLink className='sidebar-menu-item' to='/blocks' onClick={this.handleClose}>
-                <Icon id='ban' />
+                <Icon src={require('@tabler/icons/icons/ban.svg')} />
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.blocks)}</span>
               </NavLink>
               {features.federating && <NavLink className='sidebar-menu-item' to='/domain_blocks' onClick={this.handleClose}>
-                <Icon id='ban' />
+                <Icon src={require('@tabler/icons/icons/ban.svg')} />
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.domain_blocks)}</span>
               </NavLink>}
               <NavLink className='sidebar-menu-item' to='/mutes' onClick={this.handleClose}>
-                <Icon id='times-circle' />
+                <Icon src={require('@tabler/icons/icons/circle-x.svg')} />
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.mutes)}</span>
               </NavLink>
               <NavLink className='sidebar-menu-item' to='/filters' onClick={this.handleClose}>
-                <Icon id='filter' />
+                <Icon src={require('@tabler/icons/icons/filter.svg')} />
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.filters)}</span>
               </NavLink>
               {isAdmin(account) && <a className='sidebar-menu-item' href='/pleroma/admin' target='_blank' onClick={this.handleClose}>
-                <Icon id='shield' />
+                <Icon src={require('@tabler/icons/icons/shield.svg')} />
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.admin_settings)}</span>
               </a>}
               {isAdmin(account) && <NavLink className='sidebar-menu-item' to='/soapbox/config' onClick={this.handleClose}>
-                <Icon id='cog' />
+                <Icon src={require('@tabler/icons/icons/settings.svg')} />
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.soapbox_config)}</span>
               </NavLink>}
               <NavLink className='sidebar-menu-item' to='/settings/preferences' onClick={this.handleClose}>
-                <Icon id='cog' />
+                <Icon src={require('@tabler/icons/icons/settings.svg')} />
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.preferences)}</span>
               </NavLink>
               <NavLink className='sidebar-menu-item' to='/settings/import' onClick={this.handleClose}>
-                <Icon id='cloud-upload' />
+                <Icon src={require('@tabler/icons/icons/cloud-upload.svg')} />
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.import_data)}</span>
               </NavLink>
               {(features.federating && features.accountAliasesAPI) && <NavLink className='sidebar-menu-item' to='/settings/aliases' onClick={this.handleClose}>
-                <Icon id='suitcase' />
+                <Icon src={require('@tabler/icons/icons/briefcase.svg')} />
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.account_aliases)}</span>
               </NavLink>}
               <NavLink className='sidebar-menu-item' to='/auth/edit' onClick={this.handleClose}>
-                <Icon id='lock' />
+                <Icon src={require('@tabler/icons/icons/shield-lock.svg')} />
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.security)}</span>
               </NavLink>
             </div>
 
             <div className='sidebar-menu__section'>
               <Link className='sidebar-menu-item' to='/info' onClick={this.handleClose}>
-                <Icon id='info' />
+                <Icon src={require('@tabler/icons/icons/info-circle.svg')} />
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.info)}</span>
               </Link>
             </div>
 
             <div className='sidebar-menu__section'>
               <Link className='sidebar-menu-item' to='/auth/sign_out' onClick={onClickLogOut}>
-                <Icon id='sign-out' />
+                <Icon src={require('@tabler/icons/icons/logout.svg')} />
                 <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.logout)}</span>
               </Link>
             </div>

app/styles/components/icon.scss

@@ -6,8 +6,9 @@
   justify-content: center;
 
   > svg {
-    max-width: 100%;
-    max-height: 100%;
+    // Apparently this won't skew the image as long as it has a viewbox
+    width: 100%;
+    height: 100%;
   }
 }
 

app/styles/components/sidebar-menu.scss

@@ -158,9 +158,13 @@
   }
 
   > .svg-icon {
-    width: 24px;
-    height: 24px;
+    width: 28px;
+    height: 28px;
     margin-right: 15px;
+
+    svg.icon-tabler {
+      stroke-width: 1px;
+    }
   }
 
   &:hover {

package.json

@@ -56,6 +56,7 @@
     "@sentry/browser": "^6.12.0",
     "@sentry/react": "^6.12.0",
     "@sentry/tracing": "^6.12.0",
+    "@tabler/icons": "^1.41.2",
     "array-includes": "^3.0.3",
     "autoprefixer": "^10.0.0",
     "axios": "^0.21.4",
@@ -100,6 +101,7 @@
     "mark-loader": "^0.1.6",
     "marky": "^1.2.1",
     "mini-css-extract-plugin": "^1.6.2",
+    "mini-svg-data-uri": "^1.3.3",
     "object-assign": "^4.1.1",
     "object-fit-images": "^3.2.3",
     "object.values": "^1.1.0",

webpack/rules/assets.js

@@ -2,6 +2,7 @@
 // https://webpack.js.org/guides/asset-modules/
 
 const { resolve } = require('path');
+const svgToMiniDataURI = require('mini-svg-data-uri');
 
 // These are processed in reverse-order
 // We use the name 'packs' instead of 'assets' for legacy reasons
@@ -40,6 +41,20 @@ module.exports = [{
   generator: {
     filename: 'packs/emoji/[name]-[contenthash:8][ext]',
   },
+}, {
+  test: /\.svg$/,
+  type: 'asset/inline',
+  include: resolve('node_modules', '@material-design-icons'),
+  generator: {
+    dataUrl: content => svgToMiniDataURI(content.toString()),
+  },
+}, {
+  test: /\.svg$/,
+  type: 'asset/inline',
+  include: resolve('node_modules', '@tabler'),
+  generator: {
+    dataUrl: content => svgToMiniDataURI(content.toString()),
+  },
 }, {
   test: /\.svg$/,
   type: 'asset/resource',

webpack/shared.js

@@ -106,6 +106,11 @@ module.exports = {
       resolve(settings.source_path),
       'node_modules',
     ],
+    alias: {
+      // Override tabler's package.json to allow importing .svg files directly
+      // https://stackoverflow.com/a/35990101/8811886
+      '@tabler': resolve('node_modules', '@tabler'),
+    },
     fallback: {
       path: require.resolve('path-browserify'),
       util: require.resolve('util'),

yarn.lock

@@ -1519,6 +1519,11 @@
     remark "^13.0.0"
     unist-util-find-all-after "^3.0.2"
 
+"@tabler/icons@^1.41.2":
+  version "1.41.2"
+  resolved "https://registry.yarnpkg.com/@tabler/icons/-/icons-1.41.2.tgz#effccbb261539b68609cc7dc660a058683170ee1"
+  integrity sha512-X6cQmMC24hiwg0p2BzasvU3IeCCdOk0f/9d6gNNtJM4lzG2TCloTns1bVvU5MAFkITGukxUqjPFE3Ecd6kGsfw==
+
 "@tootallnate/once@1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
@@ -6488,6 +6493,11 @@ mini-css-extract-plugin@^1.6.2:
     schema-utils "^3.0.0"
     webpack-sources "^1.1.0"
 
+mini-svg-data-uri@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.3.3.tgz#91d2c09f45e056e5e1043340b8b37ba7b50f4fac"
+  integrity sha512-+fA2oRcR1dJI/7ITmeQJDrYWks0wodlOz0pAEhKYJ2IVc1z0AnwJUsKY2fzFmPAM3Jo9J0rBx8JAA9QQSJ5PuA==
+
 minimalistic-assert@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"