Font Awesome in Figma Make

I came across this issue today as well! My method of using our FA kit in a <script> has been working perfectly until now. I had to scold Make and ask it to fix it. This is what it told me, why it happened. I guess it previously wasn’t doing this, but now it is. Additionally, I had to do this for each component/UI file in my Make project, it didn’t fix them all in one go intiailly.

Note: I noticed this happening only after we upgraded to the new Font Awesome 7 icon components:

What it said to add to Guidelines.md

Figma to Code - Icon Handling: When encountering text layers that represent icons (often named like "xmark", "chevron-down", or using Font Awesome fonts):

1. Do not render them as <p> or <div> tags with text content.
2. Do identify the icon name (e.g., "xmark") and render a standard Font Awesome <i> tag: <i className="fa-solid fa-xmark"></i>.
3. If the style (solid, regular, light) is ambiguous, default to fa-regular or fa-solid based on context.

If it helps anyone, this is my entire guidelines snippet/section for Font Awesome implementation:

### Font Awesome Icon Implementation

For Font Awesome Pro icons, always use the following pattern to ensure proper rendering in React:

**Loading the Font Awesome Kit:**

- **DO NOT** include the Font Awesome script in `index.html`
- **DO** load the Font Awesome kit dynamically in the main `App.tsx` component using a `useEffect` hook:

```tsx
useEffect(() => {
  // Load Font Awesome Kit
  const script = document.createElement("script");
  script.src = "https://kit.fontawesome.com/[your kit id].js";
  script.crossOrigin = "anonymous";
  document.head.appendChild(script);

  return () => {
    // Cleanup script on unmount
    const existingScript = document.querySelector(
      'script[src="https://kit.fontawesome.com/[your id].js"]',
    );
    if (existingScript) {
      document.head.removeChild(existingScript);
    }
  };
}, []);
```

**Rendering Font Awesome Icons:**

- In Figma, for the "Font Awesome 7 component"s, please ignore the complex, absolute-positioned structures/nested layers with the "v7-icon (pro)" instance. Just naturally implement the icons the way shadcn components support it.
- Always use `<i>` tags with Font Awesome classes (e.g., `<i className="fa-solid fa-shield"></i>`)
- Use proper font awesome sizing classes we needed (e.g., className="fa-lg")
- Reference Font Awesome docs for correct class names: https://docs.fontawesome.com/web/add-icons/how-to

Example:

`<i className="fa-solid fa-user fa-lg"></i>`