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

Sommaire

• Description

• Precondition

  • NPM
  • CDN

• Installation

  • NPM
  • CDN

• Usage

  • NPM
  • CDN

• Docs

  • Icon Props

• Examples

  • Example for Icon
  • Example for Loader
  • Exemple for ExampleIcons
  • Other examples

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';

Or

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

Icon Props IIconProps

| Props Name | Description | Type | required | 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'),
);

Other examples

Another examples can be found here and here.

Have fun