Use the Icon component instead of directly using i tag

This commit is contained in:
Thibaut Girka
2019-09-09 16:41:41 +02:00
committed by ThibG
parent f154d9d6e9
commit 2aa0cdf7e6
32 changed files with 116 additions and 79 deletions

View File

@ -5,6 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import punycode from 'punycode';
import classnames from 'classnames';
import { decode as decodeIDNA } from 'flavours/glitch/util/idna';
import Icon from 'flavours/glitch/components/icon';
const getHostname = url => {
const parser = document.createElement('a');
@ -170,8 +171,8 @@ export default class Card extends React.PureComponent {
<div className='status-card__actions'>
<div>
<button onClick={this.handleEmbedClick}><i className={`fa fa-${iconVariant}`} /></button>
{horizontal && <a href={card.get('url')} target='_blank' rel='noopener'><i className='fa fa-external-link' /></a>}
<button onClick={this.handleEmbedClick}><Icon id={iconVariant} /></button>
{horizontal && <a href={card.get('url')} target='_blank' rel='noopener'><Icon id='external-link' /></a>}
</div>
</div>
</div>
@ -193,7 +194,7 @@ export default class Card extends React.PureComponent {
} else {
embed = (
<div className='status-card__image'>
<i className='fa fa-file-text' />
<Icon id='file-text' />
</div>
);
}

View File

@ -16,6 +16,7 @@ import VisibilityIcon from 'flavours/glitch/components/status_visibility_icon';
import scheduleIdleTask from 'flavours/glitch/util/schedule_idle_task';
import classNames from 'classnames';
import PollContainer from 'flavours/glitch/containers/poll_container';
import Icon from 'flavours/glitch/components/icon';
export default class DetailedStatus extends ImmutablePureComponent {
@ -197,11 +198,11 @@ export default class DetailedStatus extends ImmutablePureComponent {
}
if (status.get('visibility') === 'private') {
reblogLink = <i className={`fa fa-${reblogIcon}`} />;
reblogLink = <Icon id={reblogIcon} />;
} else if (this.context.router) {
reblogLink = (
<Link to={`/statuses/${status.get('id')}/reblogs`} className='detailed-status__link'>
<i className={`fa fa-${reblogIcon}`} />
<Icon id={reblogIcon} />
<span className='detailed-status__reblogs'>
<FormattedNumber value={status.get('reblogs_count')} />
</span>
@ -210,7 +211,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
} else {
reblogLink = (
<a href={`/interact/${status.get('id')}?type=reblog`} className='detailed-status__link' onClick={this.handleModalLink}>
<i className={`fa fa-${reblogIcon}`} />
<Icon id={reblogIcon} />
<span className='detailed-status__reblogs'>
<FormattedNumber value={status.get('reblogs_count')} />
</span>
@ -221,7 +222,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
if (this.context.router) {
favouriteLink = (
<Link to={`/statuses/${status.get('id')}/favourites`} className='detailed-status__link'>
<i className='fa fa-star' />
<Icon id='star' />
<span className='detailed-status__favorites'>
<FormattedNumber value={status.get('favourites_count')} />
</span>
@ -230,7 +231,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
} else {
favouriteLink = (
<a href={`/interact/${status.get('id')}?type=favourite`} className='detailed-status__link' onClick={this.handleModalLink}>
<i className='fa fa-star' />
<Icon id='star' />
<span className='detailed-status__favorites'>
<FormattedNumber value={status.get('favourites_count')} />
</span>