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

@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import Icon from 'flavours/glitch/components/icon';
const ColumnLink = ({ icon, text, to, onClick, href, method, badge }) => {
const badgeElement = typeof badge !== 'undefined' ? <span className='column-link__badge'>{badge}</span> : null;
@ -8,7 +9,7 @@ const ColumnLink = ({ icon, text, to, onClick, href, method, badge }) => {
if (href) {
return (
<a href={href} className='column-link' data-method={method}>
<i className={`fa fa-fw fa-${icon} column-link__icon`} />
<Icon id={icon} fixedWidth className='column-link__icon' />
{text}
{badgeElement}
</a>
@ -16,7 +17,7 @@ const ColumnLink = ({ icon, text, to, onClick, href, method, badge }) => {
} else if (to) {
return (
<Link to={to} className='column-link'>
<i className={`fa fa-fw fa-${icon} column-link__icon`} />
<Icon id={icon} fixedWidth className='column-link__icon' />
{text}
{badgeElement}
</Link>
@ -29,7 +30,7 @@ const ColumnLink = ({ icon, text, to, onClick, href, method, badge }) => {
}
return (
<a href='#' onClick={onClick && handleOnClick} className='column-link' tabIndex='0'>
<i className={`fa fa-fw fa-${icon} column-link__icon`} />
<Icon id={icon} fixedWidth className='column-link__icon' />
{text}
{badgeElement}
</a>