@comparaonline/ui-offer-icons

@comparaonline/ui-offer-icons

A package for manager fontawesome icons.

Getting Started

To getting started with this package you will first install it, so

yarn add @comparaonline/ui-offer-icons

or

npm install @comparaonline/ui-offer-icons

Then just use it as you were using @fortawesome/fontawesome-react package

import React from 'react';
import { FontAwesomeIcon, Props } from '@comparaonline/ui-offer-icons';

interface MyIconProps extends Props {}

const MyWrapperIcon: React.FC<MyIconProps> = props => {
  return <FontAwesomeIcon {...props} />;
};

This package is a wrapper for the FontAwesomeIcon component, you will receive the normal props as you were using @fortawesome/fontawesome-react, the only different is that this package only contains certain icons, you can render the icons that are already registered, so here a simple example.

import React from 'react';
import MyWrapperIcon from './FontAwesomeWrapper';

class View extends React.Component {
  render() {
    return (
      <Grid>
        <MyWrapperIcon icon={'times'} /> // will render the solid version
        <MyWrapperIcon icon={['fal', 'times']} /> // will render the light version
      </Grid>
    );
  }
}

notice that is you just put the icon name as times will render the solid version of the pro icons, if you need the light version so you can render too, but with a little different the prefix, should be specified as icon={['fal', 'times']}, in that way you will render the light icons version.

if your don't know the FontAwesomeIcon props, yopu can find them here

registering new icons to our library

For registering new icons for our library, you can do it like this way:

1. Open the file setup.ts
2. import the new icon, so suppose you will need to import the code icon, so you should do it like

import { faCode } from '@fortawesome/pro-solid-svg-icons/faCode';
// you can import the @fortawesome/pro-light-svg-icons/faCode version too and follow the same steps

// append it to the icons array

const icons = [
  ...,
  faCode
];

// then add it to the mapIcons object

const mapIcons = {
  [...]: [...],
  [faCode.iconName]: faCode.iconName
}

3. Then publish the new package version
4. Enjoy you new icon :D

Happy Coding :sunglasses: