Implement React Icons in the Sidebar - potentially other parts of the site as well

[futuresoup]

• How do we use these in Markdown and Sidebar?

[futuresoup]

@sbasken I believe you installed React Icons for the admonitions. How can we use them elsewhere on the site?

Particularly the sidebar

[sbasken]

@futuresoup Let me check!

[sbasken]

@futuresoup To use react-icons, you can simply import the library in other component files you want to use but since sidebar is a Docusaurus built in component, you would first need to run npm run swizzle, eject DocSidebarItem component from @docusaurus/theme-classic. Once you have the component in the src/theme folder, you should be able to import react icon in the index.js file like below:

<div style={{ display: 'flex', alignItems: 'center' }}>
    <FaBookOpen style={{ marginRight: '8px' }} />
    {label}
 </div>

This will generate the same icon for every item on the side bar so we would have to use if statement to generate different icons if you want to use different ones.

[sbasken]

And 'Resources' and 'Contribute' have 'doc' as type in sidebar.js so it's probably another component.