Sbjr-React-Utils-Components - Icons - V3.0.1
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';
Or
const { Icon, Loader, ExampleIcons, CLASS_ICON, IIconProps } = window.SbjrRUCIcons;
IIconProps
Icon Props 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