feat: fontawesome 6 (#969)

[![PR App][icn]][demo] | Fix RM-XYZ
:-------------------:|:----------:

## 🧰 Changes

Should be able to have this go live before the `readme` changes. Keeping
the (no longer used) `.fa` classes should be enough for backwards
compatibility.

## 🧬 QA & Testing

- [Broken on production][prod].
- [Working in this PR app][demo].


[demo]: https://markdown-pr-PR_NUMBER.herokuapp.com
[prod]: https://SUBDOMAIN.readme.io
[icn]:
https://user-images.githubusercontent.com/886627/160426047-1bee9488-305a-4145-bb2b-09d8b757d38a.svg

components/Accordion/index.tsx

@@ -8,9 +8,9 @@ const Accordion = ({ children, icon, iconColor, title }) => {
   return (
     <details className="Accordion" onToggle={() => setIsOpen(!isOpen)}>
       <summary className="Accordion-title">
-       <i className={`Accordion-toggleIcon${isOpen ? '_opened' : ''} fa fa-chevron-right`}></i>
-       {icon && <i className={`Accordion-icon fa ${icon}`} style={{ color: `${iconColor}` }}></i>}
-       {title}
+        <i className={`Accordion-toggleIcon${isOpen ? '_opened' : ''} <i class="fa fa-regular fa-chevron-right"></i>`}></i>
+        {icon && <i className={`Accordion-icon fa-duotone fa-solid ${icon}`} style={{ color: `${iconColor}` }}></i>}
+        {title}
       </summary>
       <div className="Accordion-content">{children}</div>
     </details>

components/Callout/style.scss

@@ -91,7 +91,7 @@
       right: 100%;
       width: 2.4em;
       text-align: center;
-      font: normal normal normal 1em/1 FontAwesome;
+      font: normal normal normal 1em/1 var(--icon-font);
     }
   }
   .callout-icon {
@@ -102,7 +102,7 @@
 }
 @mixin calloutCustomIcons($R: callout) {
   --emoji: 1em;
-  --icon-font: FontAwesome;
+  --icon-font: var(--fa-style-family, 'Font Awesome 6 Pro');
   &-icon {
     font-size: var(--emoji, 0);
     color: var(--icon-color, inherit) !important;

components/Cards/index.tsx

@@ -6,7 +6,7 @@ export const Card = ({ children, href, icon, iconColor, target, title }) => {
   const Tag = href ? 'a' : 'div';
   return (
     <Tag className="Card" href={href} target={target}>
-      {icon && <i className={`Card-icon fa ${icon}`} style={{ color: `${iconColor}` }}></i>}
+      {icon && <i className={`Card-icon fa-duotone fa-solid ${icon}`} style={{ color: `${iconColor}` }}></i>}
       {title && <p className='Card-title'>{title}</p>}
       <div className="Card-content">{children}</div>
     </Tag>

components/Heading/index.tsx

@@ -19,7 +19,7 @@ const Heading = ({ tag: Tag = 'h3', depth = 3, id, children, ...attrs }: Props)
       <a
         key={`heading-anchor-icon-${id}`}
         aria-label={`Skip link to ${children}`}
-        className="heading-anchor-icon fa fa-anchor"
+        className="heading-anchor-icon fa fa-regular fa-anchor"
         href={`#${id}`}
       />
     </Tag>

components/Tabs/index.tsx

@@ -17,9 +17,9 @@ const Tabs = ({ children }) => {
     <div className="TabGroup">
       <header>
         <nav className="TabGroup-nav">
-          {children?.map((tab, index: number) => 
+          {children?.map((tab, index: number) =>
             <button className={`TabGroup-tab${activeTab === index ? '_active' : ''}`} key={tab.props.title} onClick={() => setActiveTab(index)}>
-              {tab.props.icon && <i className={`TabGroup-icon fa ${tab.props.icon}`} style={{ color: `${tab.props.iconColor}` }}></i>}
+              {tab.props.icon && <i className={`TabGroup-icon fa-duotone fa-solid ${tab.props.icon}`} style={{ color: `${tab.props.iconColor}` }}></i>}
               {tab.props.title}
             </button>
           )}

docs/callouts.md

@@ -84,6 +84,7 @@ Callouts come in [various themes](#section--examples-). These can be customized
   --border: #8b939c;
 }
 ```
+
 ```scss Theme Selectors
 .markdown-body .callout.callout_default {
 } /* gray */
@@ -108,11 +109,13 @@ Each callout will also have a `theme` attribute that's set to it's emoji prefix.
   --text: #f5fffa;
 }
 ```
+
 ```markdown Markdown Syntax
 > 🎅 Old Saint Nick
 >
 > 'Twas the night before Christmas, when all through the house not a creature was stirring, not even a mouse. The stockings were hung by the chimney with care, in hopes that St. Nicholas soon would be there. The children were nestled all snug in their beds, while visions of sugar plums danced in their heads.
 ```
+
 ```html Generated HTML
 <!-- condensed for clarity! -->
 <blockquote class="callout callout_default" theme="🎅">
@@ -140,10 +143,11 @@ With a touch of Custom CSS, we should be able to get a callout using the 📷 em
 ```css Custom CSS
 .callout[theme='📷'] {
   --emoji: unset;
-  --icon: '\f083'; /* copied from FontAwesome */
+  --icon: '\f030'; /* https://fontawesome.com/icons/camera?f=classic&s=solid */
   --icon-color: #c50a50;
 }
 ```
+
 ```Markdown Syntax
 > 📷 Cool pix!
 >
@@ -187,7 +191,7 @@ The custom icon font defaults to `FontAwesome`, but you can use any font family
 
 ```css
 .callout[theme='📷'] {
-  --icon-font-family: FontAwesome; /* copied from https://fontawesome.com/v4.7.0/icon/camera-retro */
+  --icon-font: 'Font Awesome 6 Pro';
 }
 ```