@hashicorp/flight-icons 4.1.1-rc-20251218214528 → 4.1.1-rc-20251231193629

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/flight-icons",
-  "version": "4.1.1-rc-20251218214528",
+  "version": "4.1.1-rc-20251231193629",
   "description": "Flight: HashiCorp SVG icon set",
   "keywords": [
     "hashicorp",
@@ -15,7 +15,16 @@
   },
   "license": "MPL-2.0",
   "author": "HashiCorp Design Systems <design-systems@hashicorp.com>",
+  "files": [
+    "scripts",
+    "svg",
+    "svg-original",
+    "svg-react",
+    "svg-sprite",
+    "symbol-js"
+  ],
   "devDependencies": {
+    "@carbon/icons": "^11.71.0",
     "@figma-export/cli": "^6.0.2",
     "@figma-export/core": "^6.2.0",
     "@figma-export/output-components-as-svg": "^6.0.1",

package/scripts/@types/AssetsCatalog.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+
+import { ConfigData } from "./ConfigData"
+
+export type AssetCatalogItem = {
+    // eg. "702:143"
+    id: AssetCoreData[id],
+    // eg. "bitbucket-color-16"
+    fileName: string,
+    // eg. "bitbucket"
+    iconName: AssetCoreData[iconName],
+    // eg. "bitbucket, atlassian"
+    description: AssetCoreData[description],
+    // eg. "products"
+    category: AssetCoreData[category],
+    // eg. "16" (but in the future it may become "sm")
+    size: string;
+    // eg 16
+    width: number,
+    height: number,
+};
+
+export type AssetsCatalog = {
+    lastRunTimeISO: string,
+    lastRunFigma: ConfigData[figmaFile],
+    assets: AssetCatalogItem[]
+}

package/scripts/@types/AssetsMetadata.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export type AssetCoreData = {
+    // the Figma NodeID of the component
+    id: string,
+    // the name of the component variant (e.g. "Size=16, Style=Mono")
+    variantName: string,
+    // the variant props extracted from the variant name as independent key/value entries
+    variantProps?: {
+        [key: string]: string
+    },
+    // the name of the component set parent of the variant (e.g. "alert-circle")
+    iconName: string,
+    // the (optional) description contained in the "description" field of the parent component_set
+    description
+    // the icon's category (by convention it's the containing frame's name)
+    category: string,
+}
+
+export type AssetsMetadata = {
+    [AssetNodeId: string]: AssetCoreData,
+}

package/scripts/@types/ConfigData.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export type ConfigData = {
+    // the metadata for the Figma file we sync with
+    figmaFile: {
+        id: string,
+        page: string,
+        excludeFrames: string[],
+    },
+    mainFolder: string,
+    tempFolder: string,
+    emberPublicFolder: string,
+    syncConcurrency: number,
+};

package/scripts/build-parts/generateBundleSVG.ts

@@ -0,0 +1,65 @@
+/**
+ * Copyright IBM Corp. 2021, 2025
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import fs from 'fs-extra';
+import cheerio  from 'cheerio';
+import { uniq } from 'lodash';
+
+import { ConfigData } from '../@types/ConfigData';
+import { AssetsCatalog } from '../@types/AssetsCatalog';
+import { getCssForIconAnimation } from './getCssForIconAnimation';
+
+export async function generateBundleSVG({ config, catalog } : { config: ConfigData, catalog: AssetsCatalog }): Promise<void> {
+
+    // remove the generated content from the destination folder
+    try {
+        await fs.emptyDir(`${config.mainFolder}/svg`)
+    } catch (err) {
+        console.error(err);
+    }
+
+    // used to store the icons names and generate an index file
+    const allIcons = [];
+
+    // process the SVG files
+    for(const { fileName, iconName } of catalog.assets) {
+        let svgSource = await fs.readFile(`${config.tempFolder}/${fileName}.svg`, 'utf8');
+
+        // replace #000001 ("dynamic" color in Figma) with "currentColor"
+        svgSource = svgSource.replace(/"#000001"/gi, '"currentColor"');
+
+        // add CSS class for animation (for certain icons)
+        if (['loading', 'running'].includes(iconName)) {
+
+            const $ = cheerio.load(svgSource, { xmlMode: true });
+            $(`svg`).addClass(`hds-flight-icon--animation-${iconName}`);
+
+            // overwrite the SVG source with the version with extra CSS class
+            svgSource = $.xml();
+        }
+
+        // save the processed SVG files to the `svg/` directory
+        await fs.writeFile(`${config.mainFolder}/svg/${fileName}.svg`, svgSource);
+
+        // add the icon name to the list of icons (notice: SVGs different in size have the same "iconName" value)
+        allIcons.push(`'${iconName}'`);
+    }
+
+    const animationIconCss : string = await getCssForIconAnimation();
+
+    // add CSS used to animate "loading" and "running" icons
+    await fs.writeFile(`${config.mainFolder}/svg/animation.css`, animationIconCss);
+   
+    // generate an "index.js" file
+    let svgModuleContent = '/**\n * Copyright IBM Corp. 2021, 2025\n * SPDX-License-Identifier: MPL-2.0\n */\n\n';
+    svgModuleContent += `export const iconNames = [ ${uniq(allIcons).join(', ')} ];`;
+    await fs.writeFile(`${config.mainFolder}/svg/index.js`, svgModuleContent);
+
+    // generate an "index.d.ts" file
+    let svgModuleDeclarationContent = '/**\n * Copyright IBM Corp. 2021, 2025\n * SPDX-License-Identifier: MPL-2.0\n */\n\n';
+    svgModuleDeclarationContent += `export declare const iconNames: readonly [${uniq(allIcons).join(', ')}];\n`;
+    svgModuleDeclarationContent += `export type IconName = typeof iconNames[number];\n`;
+    await fs.writeFile(`${config.mainFolder}/svg/index.d.ts`, svgModuleDeclarationContent);
+}

package/scripts/build-parts/generateBundleSVGReact.ts

@@ -0,0 +1,134 @@
+/**
+ * Copyright IBM Corp. 2021, 2025
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import fs from 'fs-extra';
+// @ts-ignore svgr/core doesn't have type definitions available yet - see https://github.com/gregberge/svgr/pull/555
+import svgr from '@svgr/core';
+import cheerio  from 'cheerio';
+import prettier from 'prettier';
+import { camelCase, upperFirst } from 'lodash';
+
+import { ConfigData } from '../@types/ConfigData';
+import { AssetsCatalog } from '../@types/AssetsCatalog';
+import { getCssForIconAnimation } from './getCssForIconAnimation';
+
+const prettierConfig = {
+    parser: 'typescript',
+    tabWidth: 4,
+    singleQuote: true,
+    trailingComma: 'none'
+} as const;
+
+const getComponentName = (fileName: string) => {
+    return upperFirst(camelCase(`Icon ${fileName}`));
+};
+
+const getComponentSource = ({ componentName, svgReact }: { componentName: string; svgReact: any }) => {
+    return `
+        import { forwardRef, useMemo } from 'react';
+        import { IconProps } from './types';
+
+        export const ${componentName} = forwardRef<SVGSVGElement, IconProps>(({ color = 'currentColor', title, ...props }, svgRef) => {
+            const titleId = useMemo(() => title ? 'title-' + Math.random().toString(36).substr(2, 9) : undefined, [title]);
+            return (
+                ${svgReact}
+            );
+        })
+    `;
+};
+
+export async function generateBundleSVGReact({ config, catalog } : { config: ConfigData, catalog: AssetsCatalog }): Promise<void> {
+
+    const tempSVGFolderPath = config.tempFolder;
+
+    // remove the generated content from the destination folder
+    try {
+        await fs.emptyDir(`${config.mainFolder}/svg-react`)
+    } catch (err) {
+        console.error(err);
+    }
+
+    // process the SVGs and convert them to React
+    for(const { fileName, iconName } of catalog.assets) {
+        let svgSource = await fs.readFile(`${tempSVGFolderPath}/${fileName}.svg`, 'utf8');
+
+        // add CSS class for animation (for certain icons)
+        if (['loading', 'running'].includes(iconName)) {
+
+            const $ = cheerio.load(svgSource, { xmlMode: true });
+            $(`svg`).addClass(`hds-flight-icon--animation-${iconName}`);
+
+            // overwrite the SVG source with the version with extra CSS class
+            svgSource = $.xml();
+        }
+
+        const componentName = getComponentName(fileName);
+
+        // convert SVG to React/JSX
+        // see: https://github.com/gregberge/svgr/blob/v5.5.0/packages/core/src/convert.js (notice: this is for v5.5.0)
+        let svgReact = await svgr(svgSource,
+            // CONFIG
+            // for all the options see: https://github.com/gregberge/svgr/blob/v5.5.0/packages/core/src/index.d.ts (notice: this is for v5.5.0)
+            // for the "outDir" option see: https://github.com/gregberge/svgr/issues/532 (essentially, it's only for CLI)
+            // for the "plugins" option: we don't need to use it, SVGO has already been run on the source "temp" files, and prettier will be run by us before saving the files
+            {
+                icon: false,
+                dimensions: true,
+                typescript: true,
+                expandProps: 'end',
+                svgo: false,
+                prettier: false,
+                ref: true,
+                titleProp: true,
+                svgProps: { 'aria-hidden': '{!title}' },
+                replaceAttrValues: { '#000001': '{color}' },
+                // we're using a custom template here so that we just convert the SVG to JSX
+                // @ts-ignore
+                template: ({ template }, opts, { jsx }) => template.ast`${jsx}`,
+                // for more information about using custom templates in svgr (it's not easy, it uses babel AST):
+                // - https://react-svgr.com/docs/custom-templates/
+                // - https://github.com/gregberge/svgr/issues/363
+                // - https://github.com/gregberge/svgr/issues/530)
+                // - have a look at this commit, where we had done a few tests: 59120837b54b2666d8ef2e68c01a24c04e5a0600
+            },
+            // STATE
+            {
+                componentName: componentName
+            }
+        );
+
+        // remove the extra semi-colon added at the end of the output by the SVGR AST transformer
+        svgReact = svgReact.replace(/;$/,'');
+
+        const componentSource = getComponentSource({ componentName, svgReact});
+        const fileContent = await prettier.format(componentSource, prettierConfig);
+
+        await fs.writeFile(`${config.mainFolder}/svg-react/${fileName}.tsx`, fileContent);
+    }
+
+    // generate an "index.tsx" file
+    let indexContent = '';
+    for(const { fileName } of catalog.assets) {
+        const componentName = getComponentName(fileName);
+        indexContent += `export { ${componentName} } from './${fileName}';\n` ;
+    }
+    await fs.writeFile(`${config.mainFolder}/svg-react/index.ts`, indexContent);
+
+    // generate a "types.ts" file
+    const typesContent = await prettier.format(`
+        import { SVGAttributes } from 'react';
+        export interface IconProps extends SVGAttributes<SVGElement> {
+            children?: never,
+            color?: string,
+            title?: string,
+        }
+    `, prettierConfig);
+
+    await fs.writeFile(`${config.mainFolder}/svg-react/types.ts`, typesContent);
+
+    // add CSS used to animate "loading" and "running" icons
+    const animationIconCss : string = await getCssForIconAnimation();
+    await fs.writeFile(`${config.mainFolder}/svg-react/animation.css`, animationIconCss);
+}

package/scripts/build-parts/generateBundleSVGSprite.ts

@@ -0,0 +1,70 @@
+/**
+ * Copyright IBM Corp. 2021, 2025
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import fs from 'fs-extra';
+
+// @ts-ignore svgstore doesn't have type definitions available
+import svgstore from 'svgstore';
+
+import { ConfigData } from '../@types/ConfigData';
+import { AssetsCatalog } from '../@types/AssetsCatalog';
+
+export async function generateBundleSVGSprite({ config, catalog } : { config: ConfigData, catalog: AssetsCatalog }): Promise<void> {
+
+    const tempSVGFolderPath = config.tempFolder;
+
+    // remove the generated content from the destination folder
+    try {
+        await fs.emptyDir(`${config.mainFolder}/svg-sprite`)
+    } catch (err) {
+        console.error(err);
+    }
+
+    // generate the sprite via "svgstore"
+    const sprites = svgstore({
+        // see https://github.com/svgstore/svgstore#options for details
+        renameDefs: false, // we already create unique IDs (using the icon name) in the SVGO step
+        svgAttrs: { 
+            width: '0',
+            height: '0',
+            // some browsers will not correctly render remote <use> references unless the remote document has the correct namespace
+            xmlns: "http://www.w3.org/2000/svg",
+            // Next.js expects there to be a viewBox attribute to calculate dimensions; while this isn't actually useful in the case of an SVG sprite, it does prevent Next.js from throwing an error about being unable to parse the file
+            viewBox: "0 0 0 0",
+            class: 'flight-sprite-container',
+            'aria-hidden': 'true'
+        },
+    });
+
+    // add the SVGs to the sprite
+    for(const { fileName } of catalog.assets) {
+        let svgSource = await fs.readFile(`${tempSVGFolderPath}/${fileName}.svg`, 'utf8');
+        // completely remove any "fill" attribute that has #000001 ("dynamic" color in Figma, equivalent of "currentColor") as value
+        // the reason for this is that the Ember addon uses the "fill" attribute with "currentColor" value (or a value passed as prop by the user)
+        // to set the color of the children <path> elements (see https://github.com/hashicorp/flight/issues/200) so the only way to have it work properly
+        // is not to use `fill="currentColor"` on the <path> elements, but to completely remove the fill attribute so it's inherited from the parent <SVG> element
+        svgSource = svgSource.replace(/ fill="#000001"/gi, '');
+        // add the processed SVG content to the sprite (notice: the first argument is the symbol ID)
+        sprites.add(`flight-${fileName}`, svgSource);
+    }
+
+    // transform the "sprite" into a string
+    // see https://github.com/svgstore/svgstore#tostringoptions-string
+    const svgSpriteContent = sprites.toString({ inline: true });
+
+    let svgModuleContent = '/**\n * Copyright IBM Corp. 2021, 2025\n * SPDX-License-Identifier: MPL-2.0\n */\n\n';
+    svgModuleContent += '// THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.\n';
+    svgModuleContent += `module.exports = '${svgSpriteContent}';\n`;
+
+    // update the SVG "module"
+    await fs.writeFile(`${config.mainFolder}/svg-sprite/svg-sprite-module.js`, svgModuleContent);
+
+    let svgFileContent = '<!--\n * Copyright IBM Corp. 2021, 2025\n * SPDX-License-Identifier: MPL-2.0\n-->\n\n';
+    svgFileContent += '<!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->\n';
+    svgFileContent += `${svgSpriteContent}\n`;
+
+    // update the SVG file
+    await fs.writeFile(`${config.mainFolder}/svg-sprite/svg-sprite.svg`, svgFileContent);
+}

package/scripts/build-parts/generateBundleSymbolJS.ts

@@ -0,0 +1,138 @@
+/**
+ * Copyright IBM Corp. 2021, 2025
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import fs from 'fs-extra';
+import prettier from 'prettier';
+import path from 'path';
+
+import { ConfigData } from '../@types/ConfigData';
+import { AssetsCatalog } from '../@types/AssetsCatalog';
+
+const prettierConfig = {
+    tabWidth: 4,
+    singleQuote: true,
+    trailingComma: 'none'
+} as const;
+
+const getSymbolModule = (sourceSvg: string): string => {
+    const viewBoxMatch = sourceSvg.match(/viewBox="([^"]+)"/);
+    const viewBox = viewBoxMatch ? viewBoxMatch[1] : '0 0 16 16';
+
+    let innerContent = sourceSvg
+        .replace(/<svg[^>]*>/, '')
+        .replace(/<\/svg>/, '');
+
+    innerContent = innerContent.replace(/ fill="#000001"/gi, '');
+
+    return `export default function (id) {
+        return \`<symbol id="\${id}" viewBox="${viewBox}">${innerContent}</symbol>\`;
+    }`;
+};
+
+export async function generateBundleSymbolJS({ config, catalog }: { config: ConfigData, catalog: AssetsCatalog }): Promise<void> {
+    const tempSVGFolderPath = config.tempFolder;
+    const mappingFilePath = path.resolve(__dirname, '../../../../hds-carbon-icon-map.json');
+    const carbonIconsPath = path.resolve(__dirname, '../../node_modules/@carbon/icons/svg');
+
+    let mapping: Record<string, string> = {};
+    try {
+        mapping = await fs.readJSON(mappingFilePath);
+    } catch {
+        console.warn('⚠️ Map file not found.');
+    }
+
+    // Define folders
+    const outputFolder = `${config.mainFolder}/symbol-js`;
+    const flightFolder = `${outputFolder}/flight`;
+    const carbonFolder = `${outputFolder}/carbon`;
+
+    // Ensure folders exist (but empty)
+    await fs.emptyDir(outputFolder);
+    await fs.ensureDir(flightFolder);
+    await fs.ensureDir(carbonFolder);
+
+    const registry: Record<string, { flight: Record<string, string>, carbon: string | null }> = {};
+
+    for (const { fileName } of catalog.assets) {
+        try {
+            const flightSource = await fs.readFile(`${tempSVGFolderPath}/${fileName}.svg`, 'utf8');
+            const flightContent = await prettier.format(getSymbolModule(flightSource), { ...prettierConfig, parser: 'typescript' });
+            
+            await fs.writeFile(`${flightFolder}/${fileName}.js`, flightContent);
+        } catch (err) {
+            console.error(`Error reading Flight icon: ${fileName}`, err);
+        }
+
+        const match = fileName.match(/^(.*)-(16|24)$/);
+
+        if (match) {
+            const [, baseName, size] = match;
+
+            if (!registry[baseName]) {
+                registry[baseName] = { flight: {}, carbon: null };
+            }
+
+            registry[baseName].flight[size] = `() => import('./flight/${fileName}.js')`;
+
+            const carbonName = mapping[baseName];
+
+            if (carbonName && !registry[baseName].carbon) {
+                const carbonPath = path.join(carbonIconsPath, '32', `${carbonName}.svg`);
+
+                if (fs.existsSync(carbonPath)) {
+                    const carbonSource = await fs.readFile(carbonPath, 'utf8');
+                    const carbonContent = await prettier.format(getSymbolModule(carbonSource), { ...prettierConfig, parser: 'typescript' });
+
+                    await fs.writeFile(`${carbonFolder}/${baseName}.js`, carbonContent);
+                    
+                    registry[baseName].carbon = `() => import('./carbon/${baseName}.js')`;
+                } else {
+                    console.warn(`⚠️ Carbon icon missing: ${carbonName} (size 32)`);
+                }
+            }
+        }
+    }
+
+    // Generate Registry (JS + Types)
+    const registryLines = Object.entries(registry).map(([baseName, data]) => {
+        const flightSizes = Object.entries(data.flight)
+            .map(([size, imp]) => `'${size}': ${imp}`)
+            .join(', ');
+
+        const carbonImp = data.carbon ? data.carbon : 'null';
+
+        return `'${baseName}': { 
+            flight: { ${flightSizes} }, 
+            carbon: ${carbonImp} 
+        },`;
+    });
+
+    const registryJsContent = await prettier.format(`
+        export const IconRegistry = {
+            ${registryLines.join('\n')}
+        };
+    `, { ...prettierConfig, parser: 'babel' });
+
+    await fs.writeFile(`${outputFolder}/registry.js`, registryJsContent);
+
+    const registryDtsContent = await prettier.format(`
+        import type { IconName } from '../svg';
+
+        export interface HdsIconModule {
+            default: (id: string) => string;
+        }
+
+        export interface HdsIconRegistryEntry {
+            flight: {
+                [size: string]: () => Promise<HdsIconModule>;
+            };
+            carbon: (() => Promise<HdsIconModule>) | null;
+        }
+
+        export declare const IconRegistry: Record<IconName, HdsIconRegistryEntry>;
+    `, { ...prettierConfig, parser: 'typescript' });
+
+    await fs.writeFile(`${outputFolder}/registry.d.ts`, registryDtsContent);
+}

package/scripts/build-parts/generatePublicZIPFile.ts

@@ -0,0 +1,26 @@
+/**
+ * Copyright IBM Corp. 2021, 2025
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import fs from 'fs-extra';
+
+import { ConfigData } from '../@types/ConfigData';
+
+import { zipSVGFolder } from './zipSVGFolder';
+
+export async function generatePublicZIPFile({ config } : { config: ConfigData }): Promise<void> {
+
+    const srcFolderPath = `${config.mainFolder}/svg`;
+    const zipFilePath = `${config.emberPublicFolder}/assets/zip/flight-icons-svg.zip`;
+
+    // remove the previous version of the ZIP file
+    try {
+        await fs.remove(zipFilePath)
+    } catch (err) {
+        console.error(err);
+    }
+
+    // zip the standalone SVG folder
+    await zipSVGFolder({ srcFolderPath, zipFilePath })
+}

package/scripts/build-parts/getCssForIconAnimation.ts

@@ -0,0 +1,38 @@
+/**
+ * Copyright IBM Corp. 2021, 2025
+ * SPDX-License-Identifier: MPL-2.0
+ */
+import prettier from 'prettier';
+
+const prettierConfig = { parser: 'css' as const, tabWidth: 4 };
+
+export const getCssForIconAnimation = async(): Promise<string> => {
+    let cssSource = '/**\n * Copyright IBM Corp. 2021, 2025\n * SPDX-License-Identifier: MPL-2.0\n */\n\n';
+    cssSource += `
+        @keyframes hds-flight-icon-animation-rotation {
+            to {transform: rotate(360deg);}
+        }
+
+        .hds-flight-icon--animation-loading {
+            animation: hds-flight-icon-animation-rotation 9s linear infinite;
+        }
+
+        .hds-flight-icon--animation-running {
+            animation: hds-flight-icon-animation-rotation 9s linear infinite;
+        }
+
+        @media (prefers-reduced-motion: no-preference) {
+
+            .hds-flight-icon--animation-loading {
+                animation-duration: .7s;
+            }
+
+            .hds-flight-icon--animation-running {
+                animation-duration: 1s;
+            }
+        }
+    `;
+    const formattedCss = await prettier.format(cssSource, prettierConfig);
+
+    return formattedCss;
+};

package/scripts/build-parts/optimizeAssetsSVG.ts

@@ -0,0 +1,63 @@
+/**
+ * Copyright IBM Corp. 2021, 2025
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import fs from 'fs-extra';
+import chalk from 'chalk';
+
+// Notice: we're using SVGO vs 1.3.2 instead of 2.x.x because the new version has a terrible API, the documentation is still missing
+// and I couldn't set it up to work in a node script; since what it does is just optimize an SVG and the SVG format hasn't changed in years
+// is safe to use this older version, nothing groundbreaking is lost.
+import SVGO from 'svgo';
+
+import { ConfigData } from '../@types/ConfigData';
+import { AssetsCatalog } from '../@types/AssetsCatalog';
+
+// Notice: in case in the future you start to see SVGs containing strange "clipPath" attributes
+// is not a problem of SVGO configuration, is Figma adding it to the exported SVGs when the content of a frame/component
+// touches the borders of the bounding box. The solution is to uncheck the "Clip content" flag in the Figma UI for that element.
+// See: https://forum.figma.com/t/setting-an-explicit-svg-viewbox/2504/7
+const svgo = new SVGO({
+    plugins: [
+        // IMPORTANT: this is needed so SVGO will add the icon name (see below) as prefix for the IDs
+        { prefixIds: true },
+        { removeViewBox: false },
+        { sortAttrs: true },
+    ]
+});
+
+
+// if in the future this does more than simply optimize, we can rename it to "preprocessAssetsSVG"
+export async function optimizeAssetsSVG({ config, catalog } : { config: ConfigData, catalog: AssetsCatalog }): Promise<void> {
+
+    // IMPORTANT: don't use foreach here, it does async stuff inside!
+    for (const asset of catalog.assets) {
+        // Note: `svg-original/` directory is the raw .svg output from Figma, before processing
+        const srcAssetPath = `${config.mainFolder}/svg-original/${asset.fileName}.svg`;
+        const tempAssetPath = `${config.tempFolder}/${asset.fileName}.svg`;
+
+        // check that the asset actually exists in the "src" folder
+        if (fs.existsSync(srcAssetPath)) {
+            // Note: Noisy so commented out by default. Feel free to change locally.
+            // console.log(`Processing asset "${asset.fileName}.svg"`);
+
+            // optimize the SVG and add it to the temp folder
+            try {
+                const svgSource = await fs.readFile(srcAssetPath, 'utf8');
+
+                // IMPORTANT: the "path" is used by SVGO to extract the icon name and add it as prefix to the IDs
+                const svgOptimized = await svgo.optimize(svgSource, { path: asset.fileName });
+
+                await fs.outputFile(tempAssetPath, svgOptimized.data);
+
+            } catch (err) {
+                console.log(`Error with SVG optimization for ${asset.fileName}.svg:`);
+                console.error(err);
+            }
+
+        } else {
+            console.error(chalk.red(`ATTENTION:\nCould not find source file "${asset.fileName}.svg", please check why.\nYou can try to run the "sync" again and see if this fixes the issue.`));
+        }
+    }
+}