@sbjr-react-utils-components/icons NPM

Sbjr-React-Utils-Components - Icons - V3.0.1

React image

Styled-Components image

Sommaire

Description

This is a a Icons React Component based on Font-Awesome.

Precondition

This module is a React component and uses Styled-Components.

It depends on its two modules, so you must have them installed.

NPM

npm i -S react styled-components

CDN

As described in the styled-components documentation:

if you use styled-components from CDN, in v5 the "react-is" dependency was added (make sure you add this to your project).

<script crossorigin src="https://unpkg.com/react-is/umd/react-is.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/styled-components/dist/styled-components.min.js" ></script>

Installation

NPM

npm i -S @sbjr-react-utils-components/icons

CDN

<script
  type="text/javascript"
  src="https://unpkg.com/@sbjr-react-utils-components/icons@latest"
></script>

Usage

NPM

import React from 'react';
import { render } from 'react-dom';
import { Icon, CLASS_ICON } from '@sbjr-react-utils-components/icons';

render(
  <Icon classIcon={CLASS_ICON.BOX_OPEN} />,
  document.getElementById('react-container'),
);

To access the icons, you must load the css file.

import '@sbjr-react-utils-components/icons/dist/index.css';

If you are using webpack, you will probably have to use loaders like: style-loader, css-loader or url-loader.
You can see an example here.

CDN:

ReactDOM.render(
  <SbjrRUCIcon.Icon classIcon={SbjrRUCIcon.CLASS_ICON.BOX_OPEN} />,
  document.getElementById('react-container'),
);

To access the icons, you must load the css file.

<link
  rel="stylesheet"
  href="https://unpkg.com/@sbjr-react-utils-components/icons@latest/dist/index.css"
/>

Docs

This package as 3 components:

<Icon />
<Loader />
<ExampleIcons />

1 configuration file that contains all the icons:

CLASS_ICON

And 1 typescript interface:

IIconProps.

You can access it by:

import { Icon, Loader, ExampleIcons, CLASS_ICON, IIconProps } from '@sbjr-react-utils-components/icons';

const { Icon, Loader, ExampleIcons, CLASS_ICON, IIconProps } = window.SbjrRUCIcons;

Icon Props `IIconProps`

Props Name	Description	Type	default value
classIcon	The icon to display (available in the CLASS_ICON object)	`string` in `CLASS_ICON`	CLASS_ICON.TIMES
className	Class html of the Component	`string`
disabled	If the card is activated/deactivated	`boolean`	false
onClick	Function called when clicking on the icon.	`(e: MouseEvent) => void`	null

Examples

Example for Icon

import React, { useState } from 'react';
import { render } from 'react-dom';
import { Icon, CLASS_ICON } from '@sbjr-react-utils-components/icons';

const CustomComponent = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Icon
      classIcon={isOpen ? CLASS_ICON.BOX_OPEN : CLASS_ICON.BOX}
      className="my-icon"
      disabled={isOpen}
      onClick={() => {
        setIsOpen(!isOpen);
      }}
    />
  );
};

render(<CustomComponent />, document.getElementById('react-container'));

Example for Loader

import React from 'react';
import { render } from 'react-dom';
import { Loader } from '@sbjr-react-utils-components/icons';

render(
  <div>
    <Loader />
  </div>,
  document.getElementById('react-container'),
);

Exemple for ExampleIcons

import React from 'react';
import { render } from 'react-dom';
import { ExampleIcons } from '@sbjr-react-utils-components/icons';

render(
  <div>
    <ExampleIcons />
  </div>,
  document.getElementById('react-container'),
);