import Icon from '@atoms/icon/Icon';
import { FaUser } from 'react-icons/fa';
const IconBasic = () => {
return (
<>
<Icon icon={<FaUser />} />
</>
);
};
export default IconBasic;
Icon
An icon is a visual representation of a file, application, or action.
- Examples
- API
Basic
Flip
import Icon from '@atoms/icon/Icon';
import { FaBiking } from 'react-icons/fa';
const IconFlip = () => {
return (
<>
<Icon icon={<FaBiking />} />
<Icon icon={<FaBiking />} flip="horizontal" />
<Icon icon={<FaBiking />} flip="vertical" />
<Icon icon={<FaBiking />} flip="both" />
</>
);
};
export default IconFlip;
Rotate
import Icon from '@atoms/icon/Icon';
import { FaHorse } from 'react-icons/fa';
const IconRotate = () => {
return (
<>
<Icon icon={<FaHorse />} />
<Icon icon={<FaHorse />} rotate={90} />
<Icon icon={<FaHorse />} rotate={180} />
<Icon icon={<FaHorse />} rotate={270} />
</>
);
};
export default IconRotate;
Animation
import Icon from '@atoms/icon/Icon';
import { FaSpinner } from 'react-icons/fa';
const IconAnimation = () => {
return (
<>
<Icon icon={<FaSpinner />} animation="spin" />
<Icon icon={<FaSpinner />} animation="pulse" />
<Icon icon={<FaSpinner />} animation="fade" />
<Icon icon={<FaSpinner />} animation="beat" />
<Icon icon={<FaSpinner />} animation="bounce" />
</>
);
};
export default IconAnimation;