[CL-82] rename bit-icon to bit-svg; create new bit-icon component for font icons (#18584)

* rename bit-icon to bit-svg; create new bit-icon for font icons

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

* find and replace current usage

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

* add custom eslint warning

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

* fix incorrect usage

* fix tests

* fix tests

* Update libs/components/src/svg/index.ts

Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com>

* Update libs/eslint/components/no-bwi-class-usage.spec.mjs

Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com>

* update component api

* update class name

* use icon type in iconButton component

* update type Icon --> BitSvg

* fix bad renames

* fix more renames

* fix bad input

* revert iconButton type

* fix lint

* fix more inputs

* misc fixes

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

* fix test

* add eslint ignore

* fix lint

* add comparison story

---------

Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>
Co-authored-by: claude[bot] <209825114+claude[bot]@users.noreply.github.com>

apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts

@@ -26,7 +26,7 @@ import { AccountService } from "@bitwarden/common/auth/abstractions/account.serv
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { getById } from "@bitwarden/common/platform/misc";
-import { BannerModule, IconModule } from "@bitwarden/components";
+import { BannerModule, SvgModule } from "@bitwarden/components";
 import { OrganizationWarningsModule } from "@bitwarden/web-vault/app/billing/organizations/warnings/organization-warnings.module";
 import { OrganizationWarningsService } from "@bitwarden/web-vault/app/billing/organizations/warnings/services";
 import { NonIndividualSubscriber } from "@bitwarden/web-vault/app/billing/types";
@@ -47,7 +47,7 @@ import { WebLayoutModule } from "../../../layouts/web-layout.module";
     RouterModule,
     JslibModule,
     WebLayoutModule,
-    IconModule,
+    SvgModule,
     OrgSwitcherComponent,
     BannerModule,
     TaxIdWarningComponent,

apps/web/src/app/admin-console/organizations/policies/policy-edit-definitions/auto-confirm-policy.component.html

@@ -44,7 +44,7 @@
 
 <ng-template #step1>
   <div class="tw-flex tw-justify-center tw-mb-6">
-    <bit-icon class="tw-w-[233px]" [icon]="autoConfirmSvg"></bit-icon>
+    <bit-svg class="tw-w-[233px]" [content]="autoConfirmSvg"></bit-svg>
   </div>
   <ol>
     <li>1. {{ "autoConfirmExtension1" | i18n }}</li>

apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html

@@ -1,7 +1,7 @@
 <div class="tw-mt-10 tw-flex tw-justify-center" *ngIf="loading">
   <div>
-    <bit-icon class="tw-w-72 tw-block tw-mb-4" [icon]="logo" [ariaLabel]="'appLogoLabel' | i18n">
-    </bit-icon>
+    <bit-svg class="tw-w-72 tw-block tw-mb-4" [content]="logo" [ariaLabel]="'appLogoLabel' | i18n">
+    </bit-svg>
     <div class="tw-flex tw-justify-center">
       <i
         class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"

apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.ts

@@ -8,7 +8,7 @@ import { BitwardenLogo } from "@bitwarden/assets/svg";
 import { PolicyApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/policy/policy-api.service.abstraction";
 import { OrganizationSponsorshipResponse } from "@bitwarden/common/admin-console/models/response/organization-sponsorship.response";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
-import { IconModule, ToastService } from "@bitwarden/components";
+import { SvgModule, ToastService } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 
 import { BaseAcceptComponent } from "../../../common/base.accept.component";
@@ -22,7 +22,7 @@ import { BaseAcceptComponent } from "../../../common/base.accept.component";
 // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
 @Component({
   templateUrl: "accept-family-sponsorship.component.html",
-  imports: [CommonModule, I18nPipe, IconModule],
+  imports: [CommonModule, I18nPipe, SvgModule],
 })
 export class AcceptFamilySponsorshipComponent extends BaseAcceptComponent {
   protected logo = BitwardenLogo;

apps/web/src/app/auth/settings/two-factor/two-factor-setup-authenticator.component.ts

@@ -29,7 +29,7 @@ import {
   DialogRef,
   DialogService,
   FormFieldModule,
-  IconModule,
+  SvgModule,
   InputModule,
   LinkModule,
   ToastService,
@@ -68,7 +68,7 @@ declare global {
     TypographyModule,
     CalloutModule,
     ButtonModule,
-    IconModule,
+    SvgModule,
     I18nPipe,
     AsyncActionsModule,
     JslibModule,

apps/web/src/app/auth/settings/two-factor/two-factor-setup-duo.component.ts

@@ -21,7 +21,7 @@ import {
   DialogRef,
   DialogService,
   FormFieldModule,
-  IconModule,
+  SvgModule,
   InputModule,
   ToastService,
   TypographyModule,
@@ -42,7 +42,7 @@ import { TwoFactorSetupMethodBaseComponent } from "./two-factor-setup-method-bas
     InputModule,
     TypographyModule,
     ButtonModule,
-    IconModule,
+    SvgModule,
     I18nPipe,
     ReactiveFormsModule,
     AsyncActionsModule,

apps/web/src/app/auth/settings/two-factor/two-factor-setup-email.component.ts

@@ -24,7 +24,7 @@ import {
   DialogRef,
   DialogService,
   FormFieldModule,
-  IconModule,
+  SvgModule,
   InputModule,
   ToastService,
   TypographyModule,
@@ -45,7 +45,7 @@ import { TwoFactorSetupMethodBaseComponent } from "./two-factor-setup-method-bas
     CommonModule,
     DialogModule,
     FormFieldModule,
-    IconModule,
+    SvgModule,
     I18nPipe,
     InputModule,
     ReactiveFormsModule,

apps/web/src/app/auth/settings/webauthn-login-settings/create-credential-dialog/create-credential-dialog.component.html

@@ -16,7 +16,7 @@
 
       <div *ngIf="currentStep === 'credentialCreation'" class="tw-flex tw-flex-col tw-items-center">
         <div class="tw-size-24 tw-content-center tw-mb-6">
-          <bit-icon [icon]="Icons.TwoFactorAuthSecurityKeyIcon"></bit-icon>
+          <bit-svg [content]="Icons.TwoFactorAuthSecurityKeyIcon"></bit-svg>
         </div>
         <h3 bitTypography="h3">{{ "creatingPasskeyLoading" | i18n }}</h3>
         <p bitTypography="body1">{{ "creatingPasskeyLoadingInfo" | i18n }}</p>
@@ -27,7 +27,7 @@
         class="tw-flex tw-flex-col tw-items-center"
       >
         <div class="tw-size-24 tw-content-center tw-mb-6">
-          <bit-icon [icon]="Icons.TwoFactorAuthSecurityKeyFailedIcon"></bit-icon>
+          <bit-svg [content]="Icons.TwoFactorAuthSecurityKeyFailedIcon"></bit-svg>
         </div>
         <h3 bitTypography="h3">{{ "errorCreatingPasskey" | i18n }}</h3>
         <p bitTypography="body1">{{ "errorCreatingPasskeyInfo" | i18n }}</p>

apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html

@@ -242,7 +242,7 @@
     <ng-template #organizationIsNotManagedByConsolidatedBillingMSP>
       <div class="tw-flex tw-flex-col tw-items-center tw-text-info">
         <div class="tw-size-56 tw-content-center">
-          <bit-icon [icon]="gearIcon" aria-hidden="true"></bit-icon>
+          <bit-svg [content]="gearIcon" aria-hidden="true"></bit-svg>
         </div>
         <p class="tw-font-medium">{{ "billingManagedByProvider" | i18n: userOrg.providerName }}</p>
         <p>{{ "billingContactProviderForAssistance" | i18n }}</p>

apps/web/src/app/billing/organizations/subscription-hidden.component.ts

@@ -10,7 +10,7 @@ import { GearIcon } from "@bitwarden/assets/svg";
   selector: "app-org-subscription-hidden",
   template: `<div class="tw-flex tw-flex-col tw-items-center tw-text-info">
     <div class="tw-size-56 tw-content-center">
-      <bit-icon [icon]="gearIcon" aria-hidden="true"></bit-icon>
+      <bit-svg [content]="gearIcon" aria-hidden="true"></bit-svg>
     </div>
     <p class="tw-font-medium">{{ "billingManagedByProvider" | i18n: providerName }}</p>
     <p>{{ "billingContactProviderForAssistance" | i18n }}</p>

apps/web/src/app/billing/shared/sm-subscribe.component.html

@@ -2,7 +2,7 @@
   <h3 bitTypography="h3">{{ "moreFromBitwarden" | i18n }}</h3>
   <div class="tw-rounded-t tw-bg-background-alt3 tw-p-5">
     <div class="tw-w-72">
-      <bit-icon [icon]="logo"></bit-icon>
+      <bit-svg [content]="logo"></bit-svg>
     </div>
   </div>
   <div

apps/web/src/app/dirt/reports/shared/models/report-entry.ts

@@ -1,4 +1,4 @@
-import { Icon } from "@bitwarden/assets/svg";
+import { BitSvg } from "@bitwarden/assets/svg";
 
 import { ReportVariant } from "./report-variant";
 
@@ -6,6 +6,6 @@ export type ReportEntry = {
   title: string;
   description: string;
   route: string;
-  icon: Icon;
+  icon: BitSvg;
   variant: ReportVariant;
 };

apps/web/src/app/dirt/reports/shared/report-card/report-card.component.html

@@ -8,7 +8,7 @@
       [ngClass]="{ 'tw-grayscale': disabled }"
     >
       <div class="tw-m-auto tw-size-20 tw-content-center">
-        <bit-icon [icon]="icon" aria-hidden="true"></bit-icon>
+        <bit-svg [content]="icon" aria-hidden="true"></bit-svg>
       </div>
     </div>
     <bit-card-content [ngClass]="{ 'tw-grayscale': disabled }">

apps/web/src/app/dirt/reports/shared/report-card/report-card.component.ts

@@ -2,7 +2,7 @@
 // @ts-strict-ignore
 import { Component, Input } from "@angular/core";
 
-import { Icon } from "@bitwarden/assets/svg";
+import { BitSvg } from "@bitwarden/assets/svg";
 
 import { ReportVariant } from "../models/report-variant";
 
@@ -25,7 +25,7 @@ export class ReportCardComponent {
   @Input() route: string;
   // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
   // eslint-disable-next-line @angular-eslint/prefer-signals
-  @Input() icon: Icon;
+  @Input() icon: BitSvg;
   // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
   // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input() variant: ReportVariant;

apps/web/src/app/dirt/reports/shared/report-card/report-card.stories.ts

@@ -14,7 +14,7 @@ import {
   BaseCardComponent,
   CardContentComponent,
   I18nMockService,
-  IconModule,
+  SvgModule,
 } from "@bitwarden/components";
 
 import { PreloadedEnglishI18nModule } from "../../../../core/tests";
@@ -31,7 +31,7 @@ export default {
         JslibModule,
         BadgeModule,
         CardContentComponent,
-        IconModule,
+        SvgModule,
         RouterTestingModule,
         PremiumBadgeComponent,
         BaseCardComponent,

apps/web/src/app/dirt/reports/shared/report-list/report-list.stories.ts

@@ -12,7 +12,7 @@ import {
   BadgeModule,
   BaseCardComponent,
   CardContentComponent,
-  IconModule,
+  SvgModule,
 } from "@bitwarden/components";
 
 import { PreloadedEnglishI18nModule } from "../../../../core/tests";
@@ -31,7 +31,7 @@ export default {
         JslibModule,
         BadgeModule,
         RouterTestingModule,
-        IconModule,
+        SvgModule,
         PremiumBadgeComponent,
         CardContentComponent,
         BaseCardComponent,

apps/web/src/app/layouts/header/web-header.stories.ts

@@ -24,7 +24,7 @@ import {
   BreadcrumbsModule,
   ButtonModule,
   IconButtonModule,
-  IconModule,
+  SvgModule,
   InputModule,
   MenuModule,
   NavigationModule,
@@ -94,7 +94,7 @@ export default {
         BreadcrumbsModule,
         ButtonModule,
         IconButtonModule,
-        IconModule,
+        SvgModule,
         InputModule,
         MenuModule,
         TabsModule,

apps/web/src/app/layouts/user-layout.component.ts

@@ -16,7 +16,7 @@ import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abs
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { SyncService } from "@bitwarden/common/platform/sync";
-import { IconModule } from "@bitwarden/components";
+import { SvgModule } from "@bitwarden/components";
 
 import { BillingFreeFamiliesNavItemComponent } from "../billing/shared/billing-free-families-nav-item.component";
 
@@ -32,7 +32,7 @@ import { WebLayoutModule } from "./web-layout.module";
     RouterModule,
     JslibModule,
     WebLayoutModule,
-    IconModule,
+    SvgModule,
     BillingFreeFamiliesNavItemComponent,
   ],
 })

apps/web/src/app/shared/components/onboarding/onboarding.stories.ts

@@ -4,7 +4,7 @@ import { Meta, StoryObj, applicationConfig, moduleMetadata } from "@storybook/an
 import { delay, of, startWith } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
-import { LinkModule, IconModule, ProgressModule } from "@bitwarden/components";
+import { LinkModule, SvgModule, ProgressModule } from "@bitwarden/components";
 
 import { PreloadedEnglishI18nModule } from "../../../core/tests";
 
@@ -16,7 +16,7 @@ export default {
   component: OnboardingComponent,
   decorators: [
     moduleMetadata({
-      imports: [JslibModule, RouterModule, LinkModule, IconModule, ProgressModule],
+      imports: [JslibModule, RouterModule, LinkModule, SvgModule, ProgressModule],
       declarations: [OnboardingTaskComponent],
     }),
     applicationConfig({

apps/web/src/app/shared/shared.module.ts

@@ -18,7 +18,7 @@ import {
   DialogModule,
   FormFieldModule,
   IconButtonModule,
-  IconModule,
+  SvgModule,
   LinkModule,
   MenuModule,
   MultiSelectModule,
@@ -63,7 +63,7 @@ import {
     DialogModule,
     FormFieldModule,
     IconButtonModule,
-    IconModule,
+    SvgModule,
     LinkModule,
     MenuModule,
     MultiSelectModule,
@@ -99,7 +99,7 @@ import {
     DialogModule,
     FormFieldModule,
     IconButtonModule,
-    IconModule,
+    SvgModule,
     LinkModule,
     MenuModule,
     MultiSelectModule,

apps/web/src/app/tools/send/shared/send-success-drawer-dialog.component.html

@@ -8,7 +8,7 @@
     >
       <div class="tw-mb-6 tw-mt-8">
         <div class="tw-size-[95px] tw-content-center">
-          <bit-icon [icon]="activeSendIcon"></bit-icon>
+          <bit-svg [content]="activeSendIcon"></bit-svg>
         </div>
       </div>
 

apps/web/src/app/vault/components/browser-extension-prompt/browser-extension-prompt.component.ts

@@ -12,7 +12,7 @@ import { ActivatedRoute } from "@angular/router";
 import { map, Observable, of, tap } from "rxjs";
 
 import { VaultMessages } from "@bitwarden/common/vault/enums/vault-messages.enum";
-import { ButtonComponent, IconModule } from "@bitwarden/components";
+import { ButtonComponent, SvgModule } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 
 import {
@@ -24,7 +24,7 @@ import { ManuallyOpenExtensionComponent } from "../manually-open-extension/manua
 @Component({
   selector: "vault-browser-extension-prompt",
   templateUrl: "./browser-extension-prompt.component.html",
-  imports: [CommonModule, I18nPipe, ButtonComponent, IconModule, ManuallyOpenExtensionComponent],
+  imports: [CommonModule, I18nPipe, ButtonComponent, SvgModule, ManuallyOpenExtensionComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BrowserExtensionPromptComponent implements OnInit, OnDestroy {

apps/web/src/app/vault/components/manually-open-extension/manually-open-extension.component.html

@@ -1,8 +1,8 @@
 <p bitTypography="body1" class="tw-mb-0">
   {{ "openExtensionFromToolbarPart1" | i18n }}
-  <bit-icon
-    [icon]="BitwardenIcon"
+  <bit-svg
+    [content]="BitwardenIcon"
     class="!tw-inline-block [&>svg]:tw-align-baseline [&>svg]:-tw-mb-[0.25rem]"
-  ></bit-icon>
+  ></bit-svg>
   {{ "openExtensionFromToolbarPart2" | i18n }}
 </p>

apps/web/src/app/vault/components/manually-open-extension/manually-open-extension.component.ts

@@ -1,14 +1,14 @@
 import { Component, ChangeDetectionStrategy } from "@angular/core";
 
 import { BitwardenIcon } from "@bitwarden/assets/svg";
-import { IconModule } from "@bitwarden/components";
+import { SvgModule } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: "vault-manually-open-extension",
   templateUrl: "./manually-open-extension.component.html",
-  imports: [I18nPipe, IconModule],
+  imports: [I18nPipe, SvgModule],
 })
 export class ManuallyOpenExtensionComponent {
   protected BitwardenIcon = BitwardenIcon;

apps/web/src/app/vault/components/setup-extension/setup-extension.component.html

@@ -31,7 +31,7 @@
 
 <section *ngIf="showSuccessUI" class="tw-flex tw-flex-col tw-items-center">
   <div class="tw-size-[90px]">
-    <bit-icon [icon]="PartyIcon"></bit-icon>
+    <bit-svg [content]="PartyIcon"></bit-svg>
   </div>
   <h1 bitTypography="h2" class="tw-mb-6 tw-mt-4 tw-text-center">
     {{

apps/web/src/app/vault/components/setup-extension/setup-extension.component.ts

@@ -18,7 +18,7 @@ import {
   CenterPositionStrategy,
   DialogRef,
   DialogService,
-  IconModule,
+  SvgModule,
   LinkModule,
 } from "@bitwarden/components";
 
@@ -52,7 +52,7 @@ type SetupExtensionState = UnionOfValues<typeof SetupExtensionState>;
     JslibModule,
     ButtonComponent,
     LinkModule,
-    IconModule,
+    SvgModule,
     RouterModule,
     AddExtensionVideosComponent,
     ManuallyOpenExtensionComponent,

apps/web/src/app/vault/individual-vault/vault.component.ts

@@ -33,7 +33,7 @@ import {
   EmptyTrash,
   FavoritesIcon,
   ItemTypes,
-  Icon,
+  BitSvg,
 } from "@bitwarden/assets/svg";
 import { AutomaticUserConfirmationService } from "@bitwarden/auto-confirm";
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
@@ -160,7 +160,7 @@ type EmptyStateType = "trash" | "favorites" | "archive";
 type EmptyStateItem = {
   title: string;
   description: string;
-  icon: Icon;
+  icon: BitSvg;
 };
 
 type EmptyStateMap = Record<EmptyStateType, EmptyStateItem>;