Ditch ember-fontawesome in favor of manual SVG usage

Add missing fontawesome dependency Fontawesome is searching for a package only at the root of the repo, but it wasn't installed there. This behavior is probably wrong, but I need to dig deeper Apparently, svg-core was introduced in fontawesome v6, and the problem here is is that CI was not blocking PR merges
NullVoxPopuli · May 1, 2022 · 6f9639f · 6f9639f
1 parent 1eaf395
commit 6f9639f
Show file tree

Hide file tree

Showing 10 changed files with 468 additions and 242 deletions.
diff --git a/frontend/app/components/external-link.gts b/frontend/app/components/external-link.gts
@@ -1,4 +1,4 @@
-import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
+import Icon from './icon';
 
 <template>
   <a
@@ -10,6 +10,6 @@ import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
   >
     <span>{{yield}}</span>
 
-    <FaIcon @icon="external-link-alt" />
+    <Icon @name="solid/arrow-up-right-from-square" />
   </a>
 </template>
diff --git a/frontend/app/components/icon.gts b/frontend/app/components/icon.gts
@@ -0,0 +1,14 @@
+const size = (size?: string) => size ? `fa-${size}` : 'fa-1';
+
+<template>
+  <svg
+    class="fa {{size @size}}"
+    fill="currentColor"
+    width="24"
+    height="24"
+    xmlns="http://www.w3.org/2000/svg"
+    ...attributes
+  >
+    <use href="/assets/svg/{{@name}}.svg#{{@name}}"></use>
+  </svg>
+</template>
diff --git a/frontend/app/components/limber/demo-select.gts b/frontend/app/components/limber/demo-select.gts
@@ -5,7 +5,7 @@ import { fn } from '@ember/helper';
 import { inject as service } from '@ember/service';
 import { waitFor } from '@ember/test-waiters';
 
-import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
+import Icon from '../icon';
 
 import { getFromLabel, NAMES } from 'limber/snippets';
 import Menu from './menu';
@@ -31,9 +31,9 @@ export default class DemoSelect extends Component {
         <span class="grid grid-flow-col gap-2 items-center">
           Select demo
           {{#if menu.isOpen}}
-            <FaIcon @icon="angle-up" class="min-w-3" />
+            <Icon @name="solid/angle-up" class="min-w-3" />
           {{else}}
-            <FaIcon @icon="angle-right" class="min-w-3" />
+            <Icon @name="solid/angle-right" class="min-w-3" />
           {{/if}}
         </span>
       </:trigger>

diff --git a/frontend/app/components/limber/editor/controls/index.gts b/frontend/app/components/limber/editor/controls/index.gts
@@ -1,7 +1,7 @@
 import { fn } from '@ember/helper';
 import { on } from '@ember/modifier'
 
-import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
+import Icon from 'limber/components/icon';
 
 import State from './state';
 
@@ -43,19 +43,19 @@ const Controls = <template>
         {{on 'click' (fn @send 'MAXIMIZE')}}
       >
         {{#if @isMaximized}}
-          <FaIcon @icon='columns' />
+          <Icon @name='solid/table-columns' />
         {{else}}
-          <FaIcon @icon="window-maximize" @prefix='far' />
+          <Icon @name="regular/window-maximize" />
         {{/if}}
       </Button>
       <Button
         title={{if @isMinimized 'Back to split view' 'Minimize Editor'}}
         {{on 'click' (fn @send 'MINIMIZE')}}
       >
         {{#if @isMinimized}}
-          <FaIcon @icon='columns' />
+          <Icon @name='solid/table-columns' />
         {{else}}
-          <FaIcon @icon='window-minimize' @prefix='far' />
+          <Icon @name='regular/window-minimize' />
         {{/if}}
       </Button>
     </div>

diff --git a/frontend/app/components/limber/header.gts b/frontend/app/components/limber/header.gts
@@ -1,4 +1,4 @@
-import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
+import Icon from '../icon';
 
 import ExternalLink from '../external-link';
 import DemoSelect from './demo-select';
@@ -12,10 +12,10 @@ import DemoSelect from './demo-select';
         target="_blank"
         rel="noreferrer noopener"
       >
-        <FaIcon @icon="ember" @prefix="fab" @size="3x" class="-mb-3 -mt-2" />
+        <Icon @name="brands/ember" @size="3x" class="-mb-3 -mt-2" />
         <span class="sr-only">Ember.JS homepage</span>
       </a>
-      <FaIcon @icon="markdown" @prefix="fab" @size="2x" class="-mb-2 -mt-2" />
+      <Icon @name="brands/markdown" @size="2x" class="-mb-2 -mt-2" />
     </h1>
 
     <nav class='text-white mt-1 flex gap-2 items-baseline'>

diff --git a/frontend/app/components/limber/navigation.gts b/frontend/app/components/limber/navigation.gts
@@ -3,7 +3,7 @@ import { action } from '@ember/object';
 import { on } from '@ember/modifier';
 import { service } from '@ember/service';
 
-import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
+import Icon from '../icon';
 
 import isEditing from 'limber/helpers/is-editing';
 import DemoSelect from './demo-select';
@@ -62,7 +62,7 @@ class TabLink extends Component<{href: string}> {
       <TabLink @href="/ember" class="relative">
         Ember
         <span class="z-10 absolute right-[-5px] inline-block">
-          <FaIcon @icon="caret-right" @transform="grow-6"/>
+          <Icon @name="solid/caret-right" @size="6x"/>
         </span>
       </TabLink>
 
@@ -75,7 +75,7 @@ class TabLink extends Component<{href: string}> {
           @href="/"
           class="flex gap-2 items-center border border-2"
         >
-          <FaIcon @icon="pencil" @transform="grow-4"/>
+          <Icon @name="solid/pencil" @size="4x" />
           <span>Edit</span>
         </TabLink>
       {{/unless}}

diff --git a/frontend/config/icons.js b/frontend/config/icons.js
diff --git a/frontend/ember-cli-build.js b/frontend/ember-cli-build.js
@@ -1,5 +1,6 @@
 'use strict';
 
+const path = require('path');
 const yn = require('yn');
 const EmberApp = require('ember-cli/lib/broccoli/ember-app');
 
@@ -44,6 +45,15 @@ module.exports = function (defaults) {
 
   return require('@embroider/compat').compatBuild(app, Webpack, {
     extraPublicTrees: [
+      // Icons
+      require('@html-next/svg-icon-optimizer')({
+        svgPaths: [
+          path.join(
+            path.dirname(require.resolve('@fortawesome/fontawesome-free/package.json')),
+            'svgs'
+          ),
+        ],
+      }),
       // Mobile Editor
       require('@nullvoxpopuli/limber-codemirror/broccoli-funnel')(),
       // Desktop Editor

diff --git a/frontend/package.json b/frontend/package.json
@@ -41,10 +41,8 @@
     "@embroider/compat": "^1.5.0",
     "@embroider/core": "^1.5.0",
     "@embroider/webpack": "^1.5.0",
-    "@fortawesome/ember-fontawesome": "^0.3.2",
-    "@fortawesome/free-brands-svg-icons": "^6.1.0",
-    "@fortawesome/free-regular-svg-icons": "^6.1.0",
-    "@fortawesome/free-solid-svg-icons": "^6.1.0",
+    "@html-next/svg-icon-optimizer": "github:NullVoxPopuli/svg-icon-optimizer#embroider-safe-limber-experiment",
+    "@fortawesome/fontawesome-free": "^6.1.1",
     "@nullvoxpopuli/eslint-configs": "2.2.5",
     "@types/babel__core": "^7.1.18",
     "@types/codemirror": "5.60.5",
@@ -77,6 +75,7 @@
     "@typescript-eslint/eslint-plugin": "^5.18.0",
     "@typescript-eslint/parser": "^5.0.0",
     "broccoli-asset-rev": "^3.0.0",
+    "broccoli-funnel": "^3.0.8",
     "broccoli-merge-trees": "^4.2.0",
     "build-time-reporter-webpack-plugin": "^1.3.0",
     "chalk": "^5.0.1",
@@ -106,6 +105,7 @@
     "execa": "^6.1.0",
     "file-loader": "^6.2.0",
     "fractal-page-object": "^0.3.0",
+    "globby": "^11.0.0",
     "loader.js": "^4.7.0",
     "monaco-editor": "^0.33.0",
     "npm-run-all": "^4.1.5",