Merge pull request #20334 from dannon/fontawesome-standardization

Standardize FontAwesome usage

Author: mvdbeek

client/docs/headings.md

@@ -49,4 +49,4 @@ Following properties allow for further styling the component:
 - `bold` - makes a heading bold
 - `inline` - displays the heading inline
 - `separator` - draws a separating line, to better distinguish sections
-- `icon="..."` - adds a font-awesome icon decoration to the left of the heading. Make sure to also load the icon with `library.add(...)`.
+- `icon={iconObject}` - adds an icon to the left of the heading. Import from FontAwesome (`@fortawesome/free-solid-svg-icons`) or Galaxy icons (`@/components/icons/galaxyIcons`).

client/gulpfile.js

@@ -66,6 +66,8 @@ function stageLibs(callback) {
 
 async function icons() {
     await buildIcons("./src/assets/icons.json");
+    const generateIconsTypeScript = require("./icons/generate_ts_icons");
+    generateIconsTypeScript();
 }
 
 function cleanPlugins(callback) {

client/icons/all-icons.md

@@ -1,13 +1,25 @@
 # Icons
 
-All custom icons available
+Galaxy custom icons
 
-This file is auto-generated by `build_icons.js`. Manual changes will be lost!
+Auto-generated by `build_icons.js`
+
+## Usage
+
+```vue
+<script setup>
+import { galaxyLogo } from "@/components/icons/galaxyIcons";
+</script>
+
+<template>
+    <FontAwesomeIcon :icon="galaxyLogo" />
+</template>
+```
 
 ---
 
-- `<FontAwesomeIcon :icon="['gxd', 'galaxyLogo']" />`
-- `<FontAwesomeIcon :icon="['gxd', 'textLarger']" />`
-- `<FontAwesomeIcon :icon="['gxd', 'textSmaller']" />`
+- **galaxyLogo**: `import { galaxyLogo } from "@/components/icons/galaxyIcons";`
+- **textLarger**: `import { textLarger } from "@/components/icons/galaxyIcons";`
+- **textSmaller**: `import { textSmaller } from "@/components/icons/galaxyIcons";`
 
 ---

client/icons/build_icons.js

@@ -96,12 +96,21 @@ function findAllPaths(element) {
 
 function makeMarkdown(iconDefinitions) {
     let content = "# Icons\n\n";
-    content += "All custom icons available\n\n";
-    content += "This file is auto-generated by `build_icons.js`. Manual changes will be lost!\n\n";
+    content += "Galaxy custom icons\n\n";
+    content += "Auto-generated by `build_icons.js`\n\n";
+    content += "## Usage\n\n";
+    content += "```vue\n";
+    content += "<script setup>\n";
+    content += 'import { galaxyLogo } from "@/components/icons/galaxyIcons";\n';
+    content += "</script>\n\n";
+    content += "<template>\n";
+    content += '    <FontAwesomeIcon :icon="galaxyLogo" />\n';
+    content += "</template>\n";
+    content += "```\n\n";
     content += "---\n\n";
 
     iconDefinitions.forEach((icon) => {
-        content += `- \`<FontAwesomeIcon :icon="['${icon.prefix}', '${icon.iconName}']" />\`\n`;
+        content += `- **${icon.iconName}**: \`import { ${icon.iconName} } from "@/components/icons/galaxyIcons";\`\n`;
     });
 
     content += "\n---\n";

client/icons/generate_ts_icons.js

@@ -0,0 +1,76 @@
+const fs = require("fs");
+const path = require("path");
+
+/**
+ * Generate TypeScript exports for Galaxy custom icons
+ */
+function generateIconsTypeScript() {
+    // Read the generated icons JSON
+    const iconsJsonPath = path.resolve(__dirname, "../src/assets/icons.json");
+    const outputPath = path.resolve(__dirname, "../src/components/icons/galaxyIcons.ts");
+
+    if (!fs.existsSync(iconsJsonPath)) {
+        console.error(`Icons JSON not found at ${iconsJsonPath}`);
+        console.error("Run 'npm run icons' first to generate the icons JSON");
+        return;
+    }
+
+    const iconsJson = fs.readFileSync(iconsJsonPath, "utf8");
+    const icons = JSON.parse(iconsJson);
+
+    // Generate TypeScript content
+    let content = `import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+
+// Galaxy custom icons
+// Generated from: client/src/assets/icons.json
+// To regenerate: node icons/generate_ts_icons.js
+
+// Matches FontAwesome's structure
+export interface GalaxyIconDefinition {
+    iconName: string;
+    prefix: string;
+    icon: [number, number, never[], string, string | string[]];
+}
+
+// Accepts both FA and Galaxy icons
+export type IconLike = IconDefinition | GalaxyIconDefinition;
+
+`;
+
+    icons.forEach((icon) => {
+        // Convert icon name to camelCase for JavaScript export
+        const exportName = icon.iconName;
+
+        // Format the icon data manually to match the expected style
+        const iconData = icon.icon;
+        const formattedIcon = `{
+    iconName: "${icon.iconName}",
+    prefix: "${icon.prefix}",
+    icon: [
+        ${iconData[0]},
+        ${iconData[1]},
+        [],
+        "",
+        [
+            ${iconData[4].map((path) => `"${path}"`).join(",\n            ")},
+        ],
+    ],
+};`;
+
+        content += `export const ${exportName}: GalaxyIconDefinition = ${formattedIcon}
+
+`;
+    });
+
+    // Write the TypeScript file
+    fs.writeFileSync(outputPath, content.trimEnd() + "\n");
+    console.log(`Generated Galaxy icons TypeScript exports at: ${outputPath}`);
+    console.log(`Exported ${icons.length} icons: ${icons.map((i) => i.iconName).join(", ")}`);
+}
+
+// Run if called directly
+if (require.main === module) {
+    generateIconsTypeScript();
+}
+
+module.exports = generateIconsTypeScript;

client/src/components/AboutGalaxy.vue

@@ -5,6 +5,7 @@
 import { computed } from "vue";
 import { RouterLink } from "vue-router";
 
+import { galaxyLogo } from "@/components/icons/galaxyIcons";
 import { useConfig } from "@/composables/config";
 import { getAppRoot } from "@/onload/loadConfig";
 
@@ -29,7 +30,7 @@ const versionUserDocumentationUrl = computed(() => {
 
 <template>
     <div v-if="isConfigLoaded" class="about-galaxy">
-        <Heading h1 :icon="['gxd', 'galaxyLogo']" size="lg">Help and Support</Heading>
+        <Heading h1 :icon="galaxyLogo" size="lg">Help and Support</Heading>
         <div class="p-2">
             <Heading h2 separator size="md">Support</Heading>
             <div v-if="config.wiki_url">

client/src/components/Citation/CitationItem.vue

@@ -1,13 +1,10 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed } from "vue";
 
 import type { Citation } from ".";
 
-library.add(faExternalLinkAlt);
-
 interface Props {
     citation: Citation;
     outputFormat?: string;

client/src/components/Collections/common/CellDiscardComponent.vue

@@ -1,21 +1,19 @@
 <script lang="ts">
 /* cannot use a setup block and get params injection in Vue 2.7 I think */
 
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import type { ICellRendererParams } from "ag-grid-community";
 import { defineComponent } from "vue";
 
-library.add(faTimes);
-
 export default defineComponent({
     components: {
         FontAwesomeIcon,
     },
     data() {
         return {
             params: {} as ICellRendererParams,
+            faTimes,
         };
     },
     computed: {},
@@ -28,7 +26,7 @@ export default defineComponent({
 </script>
 <template>
     <div>
-        <FontAwesomeIcon size="2x" icon="fa-times" @click="onRemove" />
+        <FontAwesomeIcon size="2x" :icon="faTimes" @click="onRemove" />
     </div>
 </template>
 

client/src/components/Collections/common/CellStatusComponent.vue

@@ -1,15 +1,12 @@
 <script lang="ts">
 /* cannot use a setup block and get params injection in Vue 2.7 I think */
 
-import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCheck, faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import type { ICellRendererParams } from "ag-grid-community";
 import { BPopover } from "bootstrap-vue";
 import { defineComponent } from "vue";
 
-library.add(faCheck, faExclamationTriangle);
-
 export default defineComponent({
     components: {
         BPopover,
@@ -18,6 +15,8 @@ export default defineComponent({
     data() {
         return {
             params: {} as ICellRendererParams,
+            faCheck,
+            faExclamationTriangle,
         };
     },
     computed: {
@@ -48,9 +47,9 @@ export default defineComponent({
         },
         icon() {
             if (this.isDuplicate || this.requiresPairing) {
-                return "fa-exclamation-triangle";
+                return this.faExclamationTriangle;
             } else {
-                return "fa-check";
+                return this.faCheck;
             }
         },
     },

client/src/components/Collections/common/CollectionEditView.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faBars, faCog, faDatabase, faSave, faTable, faUser } from "@fortawesome/free-solid-svg-icons";
+import { faBars, faCog, faDatabase, faSave, faTable } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import axios from "axios";
 import { BAlert, BSpinner, BTab, BTabs } from "bootstrap-vue";
@@ -26,8 +25,6 @@ import Heading from "@/components/Common/Heading.vue";
 import FormDisplay from "@/components/Form/FormDisplay.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
-library.add(faBars, faCog, faDatabase, faSave, faTable, faUser);
-
 interface Props {
     collectionId: string;
 }