Fixes to get ready release 3.x

README.md

@@ -10,9 +10,9 @@ Compatibility
 ------------------------------------------------------------------------------
 
 * Ember.js v3.28 or above
-- Embroider or ember-auto-import v2
+* Embroider or ember-auto-import v2
 
-If you are using an older version of Ember, see [our 2.x branch](https://github.com/FortAwesome/ember-fontawesome/tree/1.x).
+If you are using an older version of Ember, see [our 2.x branch](https://github.com/FortAwesome/ember-fontawesome/tree/2.x).
 If you are using an ancient version of Ember, see [our 1.x branch](https://github.com/FortAwesome/ember-fontawesome/tree/1.x).
 
 ------------------------------------------------------------------------------
@@ -29,6 +29,7 @@ If you are using an ancient version of Ember, see [our 1.x branch](https://githu
 - [Installation](#installation)
   * [Add more styles or Pro icons](#add-more-styles-or-pro-icons)
   * [Subsetting icons](#subsetting-icons)
+  * [Glint](#glint)
   * [Using within an addon](#using-within-an-addon)
 - [Usage](#usage)
   * [Configuration](#configuration)
@@ -80,25 +81,25 @@ You might also be interested in the larger umbrella project [UPGRADING.md](https
 This project is an Ember addon. So we'll add that first:
 
 ```
-$ ember install @fortawesome/ember-fontawesome @fortawesome/fontawesome-svg-core
+ember install @fortawesome/ember-fontawesome @fortawesome/fontawesome-svg-core
 ```
 
 We need at least one style. Let's start with the free version of Solid.
 
 ```
-$ npm i --save-dev @fortawesome/free-solid-svg-icons
+npm install --save-dev @fortawesome/free-solid-svg-icons
 ```
 
 or with pnpm 
 
 ```
-$ pnpm add -D @fortawesome/free-solid-svg-icons
+pnpm add -D @fortawesome/free-solid-svg-icons
 ```
 
 or with Yarn
 
 ```
-$ yarn add --dev @fortawesome/free-solid-svg-icons
+yarn add --dev @fortawesome/free-solid-svg-icons
 ```
 
 After installation you need to setup Font Awesome in your `app.js/ts` by adding the setup section part like bellow.
@@ -142,20 +143,33 @@ version 4 to 5 we have a limited number of Regular icons available.
 **Visit [fontawesome.com/icons](https://fontawesome.com/icons) to search for free and Pro icons**
 
 ```
-$ npm i --save-dev @fortawesome/free-brands-svg-icons
-$ npm i --save-dev @fortawesome/free-regular-svg-icons
+npm install --save-dev @fortawesome/free-solid-svg-icons
+npm install --save-dev @fortawesome/free-regular-svg-icons
+npm install --save-dev @fortawesome/free-brands-svg-icons
 ```
 
 Do this for each icon pack you'll use in your app. By default, all installed
 icon packs will be bundled into `vendor.js`.
 
-If you are a [Font Awesome Pro](https://fontawesome.com/pro) subscriber you can install Pro packages.
+If you are a [Font Awesome Pro](https://fontawesome.com/plans) subscriber you can install Pro packages.
 
 ```
-$ npm i --save-dev @fortawesome/pro-solid-svg-icons
-$ npm i --save-dev @fortawesome/pro-regular-svg-icons
-$ npm i --save-dev @fortawesome/pro-light-svg-icons
-$ npm i --save-dev @fortawesome/pro-duotone-svg-icons
+npm install --save-dev @fortawesome/pro-solid-svg-icons
+npm install --save-dev @fortawesome/pro-regular-svg-icons
+npm install --save-dev @fortawesome/pro-light-svg-icons
+npm install --save-dev @fortawesome/pro-thin-svg-icons
+npm install --save-dev @fortawesome/pro-duotone-svg-icons
+npm install --save-dev @fortawesome/duotone-regular-svg-icons
+npm install --save-dev @fortawesome/duotone-light-svg-icons
+npm install --save-dev @fortawesome/duotone-thin-svg-icons
+npm install --save-dev @fortawesome/sharp-solid-svg-icons
+npm install --save-dev @fortawesome/sharp-regular-svg-icons
+npm install --save-dev @fortawesome/sharp-light-svg-icons
+npm install --save-dev @fortawesome/sharp-thin-svg-icons
+npm install --save-dev @fortawesome/sharp-duotone-solid-svg-icons
+npm install --save-dev @fortawesome/sharp-duotone-regular-svg-icons
+npm install --save-dev @fortawesome/sharp-duotone-light-svg-icons
+npm install --save-dev @fortawesome/sharp-duotone-thin-svg-icons
 ```
 
 Using the Pro packages requires [additional configuration](https://fontawesome.com/docs/web/setup/packages).
@@ -380,7 +394,7 @@ being awesome contributors to this project. **We'd like to take a moment to reco
 | Robert Clancy     | [@robclancy](https://github.com/robclancy)                 |
 | maxwondercorn     | [@maxwondercorn](https://github.com/maxwondercorn)         |
 | Denis Toledo      | [@dnstld](https://github.com/dnstld)                       |
-| mkszepp           | [@mkszepp](https://github.com/mkszepp)                     |
+| Markus Sanin      | [@mkszepp](https://github.com/mkszepp)                     |
 | davideferre       | [@davideferre](https://github.com/davideferre)             |
 | st-h              | [@st-h](https://github.com/st-h)                           |
 | stopfstedt        | [@st-h](https://github.com/stopfstedt)                     |

UPGRADING.md

@@ -0,0 +1,88 @@
+# Upgrading Guide
+
+See the [CHANGELOG.md](./CHANGELOG.md) for detailed information about what has changed between versions.
+
+This guide is useful to figure out what you need to do between breaking changes.
+
+As always, [submit issues](https://github.com/FortAwesome/ember-fontawesome/issues/new) that you run into with this guide or with these upgrades to us.
+
+## 2.0.0 to 3.0.0
+
+The package has been migrated to an [Ember Addon v2](https://rfcs.emberjs.com/id/0507-embroider-v2-package-format/). This is an important and necessary step to ensure compatibility with future Ember versions.
+As part of this transition, outdated and unsupported dependencies have been removed, reducing the number of required dependencies to a minimum.
+
+
+### Icons
+
+Previously, icons were defined as strings inside `config/icons.js`. During the build process, the specified icons were searched for in Font Awesome icon packages and imported automatically.
+
+```ts
+module.exports = function () {
+  return {
+    'free-solid-svg-icons': [
+      'coffee',
+      'magic',
+      'trash-alt',
+    ],
+    'free-regular-svg-icons': 'all',
+    'free-brands-svg-icons': 'all',
+  };
+};
+```
+
+Now, you must import each icon directly in `app.js/ts`, as shown in this example:
+
+```ts
+// app.ts
+import { library } from '@fortawesome/fontawesome-svg-core';
+import {
+  faCoffee,
+  faMagic,
+  faTrashAlt,
+} from '@fortawesome/free-solid-svg-icons';
+import * as freeRegularSvgIcons from '@fortawesome/free-regular-svg-icons';
+import * as freeBrandSvgIcons from '@fortawesome/free-brands-svg-icons';
+
+library.add(
+  faCoffee,
+  faMagic,
+  faTrashAlt,
+);
+
+library.add(freeBrandSvgIcons['fab']); // option to import all icons of fab
+library.add(freeRegularSvgIcons['far']); // option to import all icons of far
+```
+
+Switching to this approach reduces maintenance costs for the addon while allowing you to use any newly released Font Awesome icon package without requiring updates to this addon.
+Additionally, you no longer need to restart your Ember when adding new icons.
+
+
+### Style
+
+Previously, the addon automatically included the basic Font Awesome CSS styles.
+With the v2 addon format, this behavior has been removed, meaning you must now manually import the styles into your project.
+
+To do so, add the following lines to your `app.js/ts`:
+
+```ts
+// app.ts
+import { config as faConfig } from '@fortawesome/fontawesome-svg-core';
+import '@fortawesome/fontawesome-svg-core/styles.css';
+
+faConfig.autoAddCss = false;
+```
+
+You might wonder why we manually import the CSS and disable `faConfig.autoAddCss`.
+1. The default value (`faConfig.autoAddCss = true`) does not work properly with [Fastboot](https://github.com/ember-fastboot/ember-cli-fastboot).
+2. When using `autoAddCss`, styles are loaded too late, causing icons to appear incorrectly at app startup.
+
+
+In previous versions (<3.0), this configuration was handled automatically within the addon. To avoid unwanted behavior, we recommend adding these lines explicitly to your project.
+
+
+After making these changes, your `app.js/ts` file should match the structure described in the [installation guide](https://github.com/FortAwesome/ember-fontawesome/tree/3.x?tab=readme-ov-file#installation)
+
+
+### Glint support
+
+If you are using [glint](https://typed-ember.gitbook.io/glint), you can set it up as described [here](https://github.com/FortAwesome/ember-fontawesome/tree/3.x?tab=readme-ov-file#glint)

ember-fontawesome/src/components/fa-icon.gts

@@ -127,7 +127,7 @@ export default class FaIconComponent extends Component<FaIconSignature> {
     const renderedIcon = icon(iconLookup, o);
     if (!renderedIcon) {
       console.warn(
-        `Could not find icon: iconName=${iconLookup.iconName}, prefix=${iconLookup.prefix}. You may need to add it to your icons.js.`,
+        `Could not find icon: iconName=${iconLookup.iconName}, prefix=${iconLookup.prefix}. You may need to add it to your app.js/ts.`,
       );
       return null;
     }
@@ -199,11 +199,15 @@ export default class FaIconComponent extends Component<FaIconSignature> {
 
     if (parse.icon) {
       if (typeof prefix === 'string' && typeof icon === 'string') {
-        return parse.icon(icon);
+        // Issue https://github.com/FortAwesome/Font-Awesome/issues/20231
+        // @ts-expect-error Argument of type '{ prefix: IconPrefix; iconName: IconName; }' is not assignable to parameter of type 'string'.
+        return parse.icon({ prefix: prefix, iconName: icon });
       }
 
       if (typeof icon === 'string') {
-        return parse.icon(icon);
+        // Issue https://github.com/FortAwesome/Font-Awesome/issues/20231
+        // @ts-expect-error Argument of type '{ prefix: IconPrefix; iconName: IconName; }' is not assignable to parameter of type 'string'.
+        return parse.icon({ prefix: defaultPrefix, iconName: icon });
       }
     }
 

test-app/tests/integration/components/fa-icon-test.js

@@ -35,6 +35,28 @@ module('Integration | Component | fa icon', function (hooks) {
     assert.dom('svg path').hasAttribute('d', faCoffee.icon[4]);
   });
 
+  test('it renders calendar with regular style (prefix test)', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.on('myAction', function(val) { ... });
+
+    let path =
+      'M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L64 64C28.7 64 0 92.7 0 128l0 16 0 48L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-256 0-48 0-16c0-35.3-28.7-64-64-64l-40 0 0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L152 64l0-40zM48 192l352 0 0 256c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16l0-256z';
+
+    if (!gte('@fortawesome/free-regular-svg-icons', '6.0.0')) {
+      path =
+        'M400 64h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V160h352v298c0 3.3-2.7 6-6 6z';
+    }
+
+    await render(hbs`<FaIcon @icon="calendar" @prefix="far" />`);
+
+    assert.dom('*').hasText('');
+    assert.dom('svg').hasAttribute('data-icon', 'calendar');
+    assert.ok(
+      find('svg').getAttribute('class').split(/\s+/).includes('fa-calendar'),
+    );
+    assert.dom('svg path').hasAttribute('d', path);
+  });
+
   test('it renders framework style', async function (assert) {
     this.set('faCoffee', faCoffee);
     await render(