react-icons

StyleShare에서 사용하는 아이콘 리액트 컴포넌트.

Usage

react-icons 컴포넌트의 스타일을 다양한 방법으로 커스터마이즈 할 수 있습니다.

1. 가장 기본적인 className 또는 inline style

import React from 'react';
import { Icon } from '@styleshare/react-icons';

import './custom-icon.css';

<Icon className="ml-4 text-red w-6 h-6" style={{ display: 'block' }} />;

/* custom-icon.css */

.icon {
  margin-left: 8px;
  color: #ff0000;
  width: 24px;
  height: 24px;
}

2. css-in-jss 라이브러리로 extend

import React from 'react';
import styled from 'styled-components'; // or @emotion/styled
import { Icon } from '@styleshare/react-icons';

const StyledIcon = styled(Icon)`
  margin-left: 8px;
  color: #ff0000;
  width: 24px;
  height: 24px;
`;

<StyledIcon />;

3. css prop

import React from 'react';
import { Icon } from '@styleshare/react-icons';

<Icon
  css={{
    marginLeft: '8px',
    color: '#ff0000',
    width: '24px',
    height: '24px',
  }}
/>;

4. css prop + styled-system theme

import React from 'react';
import { Icon } from '@styleshare/react-icons';
import css from '@styled-system/css';

<Icon
  css={css({
    ml: [0, 1, 2],
    color: 'red',
    width: 4,
    height: 4,
  })}
/>;