@styleshare/react-icons

3.2.24 • Public • Published

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;
}
  1. 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 />;
  1. css prop
import React from 'react';
import { Icon } from '@styleshare/react-icons';

<Icon
  css={{
    marginLeft: '8px',
    color: '#ff0000',
    width: '24px',
    height: '24px',
  }}
/>;
  1. 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,
  })}
/>;

Readme

Keywords

none

Package Sidebar

Install

npm i @styleshare/react-icons

Weekly Downloads

0

Version

3.2.24

License

UNLICENSED

Unpacked Size

744 kB

Total Files

666

Last publish

Collaborators

  • styleshare