docs: Fuselage usage docs and npm links fix

[sidmohanty11]

• Added docs about "how to use fuselage icons" in a project
• Added a note section about the possible error we might face while developing an application with Next.js and Fuselage
• Fixed all the npm links on the first page of the repository

Issue(s)

Closes #640

Further comments

[sidmohanty11]

@dougfabris should I keep this part under fuselage or also shift it to icons

" Note: If you are using Next.js for development and wish to use Rocket.Chat Fuselage components, you need to dynamically import the component. More on this can be found here.

For example,

import dynamic from 'next/dynamic';
export const TextInput = dynamic(
  () => import('@rocket.chat/fuselage').then((module) => module.TextInput),
  { ssr: false }
);

"

[sidmohanty11]

And under icons, should I add the info like this, "

Usage

To use the fuselage icons, you need to import the css first:

@import url('@rocket.chat/icons/dist/rocketchat.css');

then you can use,

<Icon name="hash" size="x20" />

"

Thank you

[dougfabris]

And under icons, should I add the info like this, "

Usage

To use the fuselage icons, you need to import the css first:

@import url('@rocket.chat/icons/dist/rocketchat.css');

then you can use,

<Icon name="hash" size="x20" />

"

Thank you

Yes, let's keep the information related to nextJS on fuselage.

About the icon, we can say we recommend the usage of the fuselage component but you can also add something like: <i class='rcx-icon'>{icon}</i>

[sidmohanty11]

@dougfabris done, please have a look when you have time. Sorry for all the rebasing, yarn update-readme didn't let me update the npm badges and I looked into this repo after a while, so this happened. Please let me know if something needs to be changed. Thank you.

[CLAassistant]

All committers have signed the CLA.