bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add Tabler icons

Browse source
This commit is contained in:
Alex Gleason 2021-09-20 15:33:28 -05:00
parent ecdca93c84
commit 26c7068d66
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
8 changed files with 67 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
app/soapbox/components/icon.js
View file

@ -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} />;
}
}

36
app/soapbox/components/sidebar_menu.js
View file

@ -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>

5
app/styles/components/icon.scss
View file

@ -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%;
}
}

8
app/styles/components/sidebar-menu.scss
View file

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

2
package.json
View file

@ -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",

15
webpack/rules/assets.js
View file

@ -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',

5
webpack/shared.js
View file

@ -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'),

10
yarn.lock
View file

@ -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"