react-icon React component


021.1.432 years ago3 years agoMinified + gzip package size for @crpt/react-icon in KB



Travis npm package Coveralls Storybook

Icon component. Icons are kept in svg-format.

To see demonstration of this component, follow this link: Storybook.


Classic method

import { Icon } from "@crpt/react-icon";

<Icon type="calendar" />
PropName Описание Пример
type(required): String Icon name. <Icon type="search" />
onClick: Function Callback for the click event. <Icon type="calendar" onClick={e => console.log(e)} />
size: Integer Set size in pixels. <Icon size={16} type="calendar" />
spacingLeft: Integer Set left margin in pixels. <Icon type="calendar" spacingLeft={16} />
spacingRight: Integer Set right margin in pixels. <Icon type="calendar" spacingRight={16} />
withoutMask : bool It disabling mask for svg (If you aren't see svg, try to use this flag)

React way ))

You have to receive React Component with svg icon and use it as you wish

import { Icon } from "@crpt/react-icon";
  const ObjectWithIconsAsReactComponent = Icon.svgIconsAsComponents;
  const IconComponent = ObjectWithIconsAsReactComponent['iconFileName'];
  at render:
  <IconComponent {some props} />

How to add the icon

Just copy svg icon to src/svg folder and make.

  npm run build


  npm start

Icon will be converted to React Component and moved to src/svgComponents folder.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.