matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Use custom SvgIcon component wrapper around InlineSVG

Browse Source
This commit is contained in:
Alex Gleason
2022-04-07 13:47:06 -05:00
parent 17ee19aca7
commit 423c005437
11 changed files with 58 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/soapbox/features/account/components/header.js
View File

@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import InlineSVG from 'react-inlinesvg';
import { defineMessages, injectIntl } from 'react-intl';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
@ -16,6 +15,7 @@ import Avatar from 'soapbox/components/avatar';
import Badge from 'soapbox/components/badge';
import StillImage from 'soapbox/components/still_image';
import { HStack, IconButton, Menu, MenuButton, MenuItem, MenuList, MenuLink, MenuDivider } from 'soapbox/components/ui';
import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
import ActionButton from 'soapbox/features/ui/components/action_button';
import {
isLocal,
@ -614,7 +614,7 @@ class Header extends ImmutablePureComponent {
return (
<Comp key={idx} {...itemProps} className='group'>
<div className='flex items-center'>
<InlineSVG src={menuItem.icon} className='mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500' />
<SvgIcon src={menuItem.icon} className='mr-3 h-5 w-5 text-gray-400 group-hover:text-gray-500' />
<div className='truncate'>{menuItem.text}</div>
</div>

6
app/soapbox/features/compose/components/search.tsx
View File

@ -2,12 +2,12 @@ import classNames from 'classnames';
import { Map as ImmutableMap } from 'immutable';
import debounce from 'lodash/debounce';
import * as React from 'react';
import InlineSVG from 'react-inlinesvg';
import { defineMessages, useIntl } from 'react-intl';
import { useDispatch } from 'react-redux';
import { useHistory } from 'react-router-dom';
import AutosuggestAccountInput from 'soapbox/components/autosuggest_account_input';
import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
import { useAppSelector } from 'soapbox/hooks';
import {
@ -140,12 +140,12 @@ const Search = (props: ISearch) => {
className='absolute inset-y-0 right-0 px-3 flex items-center cursor-pointer'
onClick={handleClear}
>
<InlineSVG
<SvgIcon
src={require('@tabler/icons/icons/search.svg')}
className={classNames('h-4 w-4 text-gray-400', { hidden: hasValue })}
/>
<InlineSVG
<SvgIcon
src={require('@tabler/icons/icons/x.svg')}
className={classNames('h-4 w-4 text-gray-400', { hidden: !hasValue })}
aria-label={intl.formatMessage(messages.placeholder)}

10
app/soapbox/features/developers/developers_menu.js
View File

@ -1,5 +1,4 @@
import React from 'react';
import InlineSVG from 'react-inlinesvg';
import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
import { useDispatch } from 'react-redux';
import { Link, useHistory } from 'react-router-dom';
@ -7,6 +6,7 @@ import { Link, useHistory } from 'react-router-dom';
import { changeSettingImmediate } from 'soapbox/actions/settings';
import snackbar from 'soapbox/actions/snackbar';
import { Text } from 'soapbox/components/ui';
import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
import Column from '../ui/components/column';
@ -32,7 +32,7 @@ const Developers = () => {
<Column label={intl.formatMessage(messages.heading)}>
<div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2'>
<Link to='/developers/apps/create' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
<InlineSVG src={require('@tabler/icons/icons/apps.svg')} className='dark:text-gray-100' />
<SvgIcon src={require('@tabler/icons/icons/apps.svg')} className='dark:text-gray-100' />
<Text>
<FormattedMessage id='developers.navigation.app_create_label' defaultMessage='Create an app' />
@ -40,7 +40,7 @@ const Developers = () => {
</Link>
<Link to='/developers/settings_store' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
<InlineSVG src={require('@tabler/icons/icons/code-plus.svg')} className='dark:text-gray-100' />
<SvgIcon src={require('@tabler/icons/icons/code-plus.svg')} className='dark:text-gray-100' />
<Text>
<FormattedMessage id='developers.navigation.settings_store_label' defaultMessage='Settings store' />
@ -48,7 +48,7 @@ const Developers = () => {
</Link>
<Link to='/error' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
<InlineSVG src={require('@tabler/icons/icons/mood-sad.svg')} className='dark:text-gray-100' />
<SvgIcon src={require('@tabler/icons/icons/mood-sad.svg')} className='dark:text-gray-100' />
<Text>
<FormattedMessage id='developers.navigation.intentional_error_label' defaultMessage='Trigger an error' />
@ -56,7 +56,7 @@ const Developers = () => {
</Link>
<button onClick={leaveDevelopers} className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
<InlineSVG src={require('@tabler/icons/icons/logout.svg')} className='dark:text-gray-100' />
<SvgIcon src={require('@tabler/icons/icons/logout.svg')} className='dark:text-gray-100' />
<Text>
<FormattedMessage id='developers.navigation.leave_developers_label' defaultMessage='Leave developers' />