soapbox/app/soapbox/components/fork-awesome-icon.tsx

35 wiersze
973 B
TypeScript

/**
* ForkAwesomeIcon: renders a ForkAwesome icon.
* Full list: https://forkaweso.me/Fork-Awesome/icons/
* @module soapbox/components/fork_awesome_icon
* @see soapbox/components/icon
*/
import clsx from 'clsx';
import React from 'react';
export interface IForkAwesomeIcon extends React.HTMLAttributes<HTMLLIElement> {
id: string
className?: string
fixedWidth?: boolean
}
const ForkAwesomeIcon: React.FC<IForkAwesomeIcon> = ({ id, className, fixedWidth, ...rest }) => {
// Use the Fork Awesome retweet icon, but change its alt
// tag. There is a common adblocker rule which hides elements with
// alt='retweet' unless the domain is twitter.com. This should
// change what screenreaders call it as well.
// const alt = (id === 'retweet') ? 'repost' : id;
return (
<i
role='img'
// alt={alt}
className={clsx('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })}
{...rest}
/>
);
};
export default ForkAwesomeIcon;