@hashicorp/flight-icons 4.1.1-rc-20260105213008 → 4.1.1-rc-20260107145419

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hashicorp/flight-icons",
-  "version": "4.1.1-rc-20260105213008",
+  "version": "4.1.1-rc-20260107145419",
   "description": "Flight: HashiCorp SVG icon set",
   "keywords": [
     "hashicorp",
@@ -15,16 +15,7 @@
   },
   "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/structure-mappings.json

@@ -0,0 +1,192 @@
+{
+  "alert-circle-fill": "alert-circle-fill",
+  "alert-circle-outline": "alert-circle",
+  "alert-triangle": "alert-triangle-fill",
+  "arrow-down": "arrow-down",
+  "arrow-left": "arrow-left",
+  "arrow-right": "arrow-right",
+  "arrow-up": "arrow-up",
+  "bolt": "zap",
+  "box-check-fill": "check-square-fill",
+  "box-outline": "square",
+  "broadcast": "radio",
+  "bug": "bug",
+  "calendar": "calendar",
+  "cancel-circle-fill": "x-circle-fill",
+  "cancel-circle-outline": "x-circle",
+  "cancel-plain": "x",
+  "cancel-square-fill": "x-square-fill",
+  "cancel-square-outline": "x-square",
+  "caret-down": "caret",
+  "caret-up": "chevron-up",
+  "check-circle-fill": "check-circle-fill",
+  "check-circle-outline": "check-circle",
+  "check-plain": "check",
+  "chevron-down": "chevron-down",
+  "chevron-left": "chevron-left",
+  "chevron-right": "chevron-right",
+  "chevron-up": "chevron-up",
+  "clock-fill": "clock",
+  "clock-outline": "clock",
+  "cloud-fail": "cloud-x",
+  "code": "code",
+  "console": "terminal",
+  "copy-action": "clipboard-copy",
+  "copy-success": "clipboard-checked",
+  "database": "database",
+  "delay": "delay",
+  "deny-alt": "skip",
+  "deny-default": "skip",
+  "disabled": "skip",
+  "docs": "docs-link",
+  "dot": "circle-fill",
+  "download": "download",
+  "edit": "edit",
+  "envelope-sealed-fill": "mail",
+  "envelope-sealed-outline": "mail",
+  "envelope-unsealed--outline": "mail-open",
+  "envelope-unsealed-fill": "mail-open",
+  "exit": "external-link",
+  "expand-less": "minimize",
+  "expand-more": "maximize",
+  "file-error": "file-x",
+  "file-fill": "file",
+  "file-outline": "file",
+  "file-success": "file-check",
+  "filter": "filter",
+  "flag": "flag",
+  "folder-fill": "folder-fill",
+  "folder-outline": "folder",
+  "gateway": "gateway",
+  "gift-fill": "gift",
+  "gift-outline": "gift",
+  "git-branch": "git-branch",
+  "git-commit": "git-commit",
+  "git-pull-request": "git-pull-request",
+  "git-repository": "git-repo",
+  "guide": "guide",
+  "health": "activity",
+  "help-circle-fill": "help",
+  "help-circle-outline": "help",
+  "history": "history",
+  "info-circle-fill": "info",
+  "info-circle-outline": "info",
+  "key": "key",
+  "layers": "layers",
+  "leader": "star-circle",
+  "learn": "learn",
+  "link": "link",
+  "loading": "loading",
+  "lock-closed-fill": "lock-fill",
+  "lock-closed-outline": "lock",
+  "lock-closed": "lock-fill",
+  "lock-disabled": "lock-off",
+  "lock-open-outline": "unlock",
+  "lock-open": "unlock",
+  "logo-aws-color": "aws-color",
+  "logo-aws-monochrome": "aws",
+  "logo-alicloud-color": "alibaba-color",
+  "logo-alicloud-monochrome": "alibaba",
+  "logo-auth0-color": "auth0-color",
+  "logo-auth0-monochrome": "auth0",
+  "logo-azure-color": "azure-color",
+  "logo-azure-monochrome": "azure",
+  "logo-azure-dev-ops-color": "azure-devops-color",
+  "logo-azure-dev-ops-monochrome": "azure-devops",
+  "logo-bitbucket-color": "bitbucket-color",
+  "logo-bitbucket-monochrome": "bitbucket",
+  "logo-consul-color": "consul-color",
+  "logo-f5-color": "f5-color",
+  "logo-f5-monochrome": "f5",
+  "logo-gcp-color": "gcp-color",
+  "logo-gcp-monochrome": "gcp",
+  "logo-github-color": "github-color",
+  "logo-github-monochrome": "github",
+  "logo-gitlab-color": "gitlab-color",
+  "logo-gitlab-monochrome": "gitlab",
+  "logo-google-color": "google-color",
+  "logo-google-monochrome": "google",
+  "logo-kubernetes-color": "kubernetes-color",
+  "logo-kubernetes-monochrome": "kubernetes",
+  "logo-microsoft-color": "microsoft-color",
+  "logo-microsoft-monochrome": "microsoft",
+  "logo-nomad-color": "nomad-color",
+  "logo-okta-color": "okta-color",
+  "logo-okta-monochrome": "okta",
+  "logo-oracle-color": "oracle-color",
+  "logo-oracle-monochrome": "oracle",
+  "logo-slack-color": "slack-color",
+  "logo-slack-monochrome": "slack",
+  "logo-terraform-color": "terraform-color",
+  "logo-vmware-color": "vmware-color",
+  "logo-vmware-monochrome": "vmware",
+  "menu": "menu",
+  "mesh": "mesh",
+  "message-fill": "message-square-fill",
+  "message-outline": "message-square-fill",
+  "message": "message-square-fill",
+  "minus-circle-fill": "minus-circle",
+  "minus-circle-outline": "minus-circle",
+  "minus-plain": "minus",
+  "minus-square-fill": "minus-square",
+  "module": "module",
+  "more-horizontal": "more-horizontal",
+  "more-vertical": "more-vertical",
+  "network": "network",
+  "notification-disabled": "bell-off",
+  "notification-fill": "bell-active-fill",
+  "notification-outline": "bell",
+  "outline": "outline",
+  "page-outline": "outline",
+  "path": "path",
+  "play-fill": "play-circle",
+  "play-outline": "play-circle",
+  "play-plain": "play",
+  "plus-circle-fill": "plus-circle",
+  "plus-circle-outline": "plus-circle",
+  "plus-plain": "plus",
+  "plus-square-fill": "plus-square",
+  "provider": "provider",
+  "public-default": "globe",
+  "public-locked": "globe-private",
+  "queue": "queue",
+  "radio-button-checked": "circle-dot",
+  "radio-button-unchecked": "circle",
+  "random": "random",
+  "redirect": "redirect",
+  "refresh-alert": "sync-alert",
+  "refresh-default": "sync",
+  "remix": "shuffle",
+  "ribbon": "award",
+  "run": "running",
+  "search": "search",
+  "server": "server",
+  "settings": "settings",
+  "sort": "sort-desc",
+  "source-file": "file-source",
+  "star-fill": "star-fill",
+  "star-outline": "star",
+  "sub-left": "corner-down-left",
+  "sub-right": "corner-down-right",
+  "support": "support",
+  "swap-horizontal": "swap-horizontal",
+  "swap-vertical": "swap-vertical",
+  "syncing": "syncing",
+  "tag": "tag",
+  "tokens": "token",
+  "trash": "trash",
+  "tune": "sliders",
+  "unfold-less": "unfold-close",
+  "unfold-more": "unfold-open",
+  "upload": "upload",
+  "user-add": "user-plus",
+  "user-organization": "org",
+  "user-plain": "user",
+  "user-square-fill": "user-circle-fill",
+  "user-square-outline": "user-circle",
+  "user-team": "users",
+  "visibility-hide": "eye-off",
+  "visibility-show": "eye",
+  "webhook": "webhook",
+  "partner": "users"
+}

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

@@ -1,31 +0,0 @@
-/**
- * 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

@@ -1,25 +0,0 @@
-/**
- * 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

@@ -1,17 +0,0 @@
-/**
- * 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

@@ -1,65 +0,0 @@
-/**
- * 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

@@ -1,134 +0,0 @@
-/**
- * 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

@@ -1,70 +0,0 @@
-/**
- * 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);
-}