[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>
2026-02-20 19:34:03 +00:00 · 2026-01-28 11:36:27 -05:00
parent 67ff1e1d85
commit de2f4a04fc
161 changed files with 764 additions and 529 deletions
--- a/libs/auth/src/angular/registration/registration-link-expired/registration-link-expired.component.ts
+++ b/libs/auth/src/angular/registration/registration-link-expired/registration-link-expired.component.ts
@@ -9,7 +9,7 @@ import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { TwoFactorTimeoutIcon } from "@bitwarden/assets/svg";
 // This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
 // eslint-disable-next-line no-restricted-imports
-import { ButtonModule, IconModule } from "@bitwarden/components";
+import { ButtonModule, SvgModule } from "@bitwarden/components";

 /**
 * RegistrationLinkExpiredComponentData
@@ -24,7 +24,7 @@ export interface RegistrationLinkExpiredComponentData {
@Component({
  selector: "auth-registration-link-expired",
  templateUrl: "./registration-link-expired.component.html",
-  imports: [CommonModule, JslibModule, RouterModule, IconModule, ButtonModule],
+  imports: [CommonModule, JslibModule, RouterModule, SvgModule, ButtonModule],
 })
 export class RegistrationLinkExpiredComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();
--- a/libs/auth/src/angular/registration/registration-start/registration-start.component.ts
+++ b/libs/auth/src/angular/registration/registration-start/registration-start.component.ts
@@ -20,7 +20,7 @@ import {
  ButtonModule,
  CheckboxModule,
  FormFieldModule,
-  IconModule,
+  SvgModule,
  LinkModule,
 } from "@bitwarden/components";

@@ -54,7 +54,7 @@ const DEFAULT_MARKETING_EMAILS_PREF_BY_REGION: Record<Region, boolean> = {
    CheckboxModule,
    ButtonModule,
    LinkModule,
-    IconModule,
+    SvgModule,
    RegistrationEnvSelectorComponent,
  ],
 })
--- a/libs/auth/src/angular/two-factor-auth/two-factor-options.component.html
+++ b/libs/auth/src/angular/two-factor-auth/two-factor-options.component.html
@@ -11,30 +11,30 @@
            [ngSwitch]="provider.type"
            class="tw-w-16 md:tw-w-20 tw-mr-2 sm:tw-mr-4"
          >
-            <bit-icon
+            <bit-svg
              *ngSwitchCase="TwoFactorProviderType.Authenticator"
-              [icon]="Icons.TwoFactorAuthAuthenticatorIcon"
-            ></bit-icon>
-            <bit-icon
+              [content]="Icons.TwoFactorAuthAuthenticatorIcon"
+            ></bit-svg>
+            <bit-svg
              *ngSwitchCase="TwoFactorProviderType.Email"
-              [icon]="Icons.TwoFactorAuthEmailIcon"
-            ></bit-icon>
-            <bit-icon
+              [content]="Icons.TwoFactorAuthEmailIcon"
+            ></bit-svg>
+            <bit-svg
              *ngSwitchCase="TwoFactorProviderType.Duo"
-              [icon]="Icons.TwoFactorAuthDuoIcon"
-            ></bit-icon>
-            <bit-icon
+              [content]="Icons.TwoFactorAuthDuoIcon"
+            ></bit-svg>
+            <bit-svg
              *ngSwitchCase="TwoFactorProviderType.Yubikey"
-              [icon]="Icons.TwoFactorAuthYubicoIcon"
-            ></bit-icon>
-            <bit-icon
+              [content]="Icons.TwoFactorAuthYubicoIcon"
+            ></bit-svg>
+            <bit-svg
              *ngSwitchCase="TwoFactorProviderType.OrganizationDuo"
-              [icon]="Icons.TwoFactorAuthDuoIcon"
-            ></bit-icon>
-            <bit-icon
+              [content]="Icons.TwoFactorAuthDuoIcon"
+            ></bit-svg>
+            <bit-svg
              *ngSwitchCase="TwoFactorProviderType.WebAuthn"
-              [icon]="Icons.TwoFactorAuthWebAuthnIcon"
-            ></bit-icon>
+              [content]="Icons.TwoFactorAuthWebAuthnIcon"
+            ></bit-svg>
          </div>
          {{ provider.name }}
          <ng-container slot="secondary"> {{ provider.description }} </ng-container>
--- a/libs/auth/src/angular/two-factor-auth/two-factor-options.component.ts
+++ b/libs/auth/src/angular/two-factor-auth/two-factor-options.component.ts
@@ -18,7 +18,7 @@ import {
  ButtonModule,
  DialogModule,
  DialogService,
-  IconModule,
+  SvgModule,
  ItemModule,
  TypographyModule,
 } from "@bitwarden/components";
@@ -39,7 +39,7 @@ export type TwoFactorOptionsDialogResult = {
    ButtonModule,
    TypographyModule,
    ItemModule,
-    IconModule,
+    SvgModule,
  ],
  providers: [],
 })
--- a/libs/auth/src/angular/user-verification/user-verification-form-input.component.html
+++ b/libs/auth/src/angular/user-verification/user-verification-form-input.component.html
@@ -42,7 +42,7 @@
    >
      <div class="tw-flex tw-flex-col tw-items-center">
        <div class="tw-size-16 tw-content-center tw-mb-4">
-          <bit-icon [icon]="Icons.UserVerificationBiometricsIcon"></bit-icon>
+          <bit-svg [content]="Icons.UserVerificationBiometricsIcon"></bit-svg>
        </div>
        <p class="tw-font-medium tw-mb-1">{{ "verifyWithBiometrics" | i18n }}</p>
        <div *ngIf="!biometricsVerificationFailed">
--- a/libs/auth/src/angular/user-verification/user-verification-form-input.component.ts
+++ b/libs/auth/src/angular/user-verification/user-verification-form-input.component.ts
@@ -28,7 +28,7 @@ import {
  CalloutModule,
  FormFieldModule,
  IconButtonModule,
-  IconModule,
+  SvgModule,
  LinkModule,
 } from "@bitwarden/components";

@@ -64,7 +64,7 @@ import { ActiveClientVerificationOption } from "./active-client-verification-opt
    FormFieldModule,
    AsyncActionsModule,
    IconButtonModule,
-    IconModule,
+    SvgModule,
    LinkModule,
    ButtonModule,
    CalloutModule,