-
{{ "createdSendSuccessfully" | i18n }}
diff --git a/apps/browser/src/tools/popup/send-v2/send-created/send-created.component.spec.ts b/apps/browser/src/tools/popup/send-v2/send-created/send-created.component.spec.ts
index 521d72bba0c..a19897b6bbc 100644
--- a/apps/browser/src/tools/popup/send-v2/send-created/send-created.component.spec.ts
+++ b/apps/browser/src/tools/popup/send-v2/send-created/send-created.component.spec.ts
@@ -14,7 +14,7 @@ import { SelfHostedEnvironment } from "@bitwarden/common/platform/services/defau
import { SendView } from "@bitwarden/common/tools/send/models/view/send.view";
import { SendService } from "@bitwarden/common/tools/send/services/send.service.abstraction";
import { SendType } from "@bitwarden/common/tools/send/types/send-type";
-import { ButtonModule, I18nMockService, IconModule, ToastService } from "@bitwarden/components";
+import { ButtonModule, I18nMockService, SvgModule, ToastService } from "@bitwarden/components";
import { PopOutComponent } from "../../../../platform/popup/components/pop-out.component";
import { PopupFooterComponent } from "../../../../platform/popup/layout/popup-footer.component";
@@ -76,7 +76,7 @@ describe("SendCreatedComponent", () => {
RouterTestingModule,
JslibModule,
ButtonModule,
- IconModule,
+ SvgModule,
PopOutComponent,
PopupHeaderComponent,
PopupPageComponent,
diff --git a/apps/browser/src/tools/popup/send-v2/send-created/send-created.component.ts b/apps/browser/src/tools/popup/send-v2/send-created/send-created.component.ts
index e9109ec6c21..e3717075e24 100644
--- a/apps/browser/src/tools/popup/send-v2/send-created/send-created.component.ts
+++ b/apps/browser/src/tools/popup/send-v2/send-created/send-created.component.ts
@@ -13,7 +13,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
import { SendView } from "@bitwarden/common/tools/send/models/view/send.view";
import { SendService } from "@bitwarden/common/tools/send/services/send.service.abstraction";
-import { ButtonModule, IconModule, ToastService } from "@bitwarden/components";
+import { ButtonModule, SvgModule, ToastService } from "@bitwarden/components";
import { PopOutComponent } from "../../../../platform/popup/components/pop-out.component";
import { PopupFooterComponent } from "../../../../platform/popup/layout/popup-footer.component";
@@ -34,7 +34,7 @@ import { PopupPageComponent } from "../../../../platform/popup/layout/popup-page
PopupPageComponent,
RouterModule,
PopupFooterComponent,
- IconModule,
+ SvgModule,
],
})
export class SendCreatedComponent {
diff --git a/apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.html b/apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.html
index 5f19092d6b0..1980e8aa356 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.html
+++ b/apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.html
@@ -2,7 +2,7 @@
- {{ "securityPrioritized" | i18n }}
{{ "securityPrioritizedBody" | i18n }}
@@ -11,7 +11,7 @@
- {{ "quickLogin" | i18n }}
{{ "quickLoginBody" | i18n }}
@@ -20,7 +20,7 @@
- {{ "secureUser" | i18n }}
{{ "secureUserBody" | i18n }}
@@ -29,7 +29,7 @@
- {{ "secureDevices" | i18n }}
{{ "secureDevicesBody" | i18n }}
diff --git a/apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.ts b/apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.ts
index 48c8f5682bc..5ad44c2f545 100644
--- a/apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.ts
+++ b/apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.ts
@@ -3,7 +3,7 @@ import { Router } from "@angular/router";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { ItemTypes, LoginCards, NoCredentialsIcon, DevicesIcon } from "@bitwarden/assets/svg";
-import { ButtonModule, DialogModule, IconModule, TypographyModule } from "@bitwarden/components";
+import { ButtonModule, DialogModule, SvgModule, TypographyModule } from "@bitwarden/components";
import { I18nPipe } from "@bitwarden/ui-common";
import { VaultCarouselModule } from "@bitwarden/vault";
@@ -17,7 +17,7 @@ import { IntroCarouselService } from "../../../services/intro-carousel.service";
imports: [
VaultCarouselModule,
ButtonModule,
- IconModule,
+ SvgModule,
DialogModule,
TypographyModule,
JslibModule,
diff --git a/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html b/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html
index 67fc76aa317..4d3748d4303 100644
--- a/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html
+++ b/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html
@@ -5,7 +5,7 @@
>
-
{{ "savePasskeyQuestion" | i18n }}
@@ -28,7 +28,7 @@
-
-
{{ "savePasskeyQuestion" | i18n }}
@@ -30,7 +30,7 @@
class="tw-flex tw-bg-background-alt tw-flex-col tw-justify-start tw-items-center tw-gap-2 tw-h-full tw-px-5"
>
-
- {{ "passkeyLogin" | i18n }}
diff --git a/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.ts b/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.ts
index 897e825c53e..635ba3972cb 100644
--- a/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.ts
+++ b/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.ts
@@ -24,7 +24,7 @@ import {
ButtonModule,
DialogModule,
DialogService,
- IconModule,
+ SvgModule,
ItemModule,
SectionComponent,
TableModule,
@@ -48,7 +48,7 @@ import {
BitIconButtonComponent,
TableModule,
JslibModule,
- IconModule,
+ SvgModule,
ButtonModule,
DialogModule,
SectionComponent,
diff --git a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts
index b00e4d9840d..2d1fde10856 100644
--- a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts
+++ b/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,
diff --git a/apps/web/src/app/admin-console/organizations/policies/policy-edit-definitions/auto-confirm-policy.component.html b/apps/web/src/app/admin-console/organizations/policies/policy-edit-definitions/auto-confirm-policy.component.html
index 54f166b662e..a8e3236dad8 100644
--- a/apps/web/src/app/admin-console/organizations/policies/policy-edit-definitions/auto-confirm-policy.component.html
+++ b/apps/web/src/app/admin-console/organizations/policies/policy-edit-definitions/auto-confirm-policy.component.html
@@ -44,7 +44,7 @@
-
- 1. {{ "autoConfirmExtension1" | i18n }}
diff --git a/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html b/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html
index ca1264829b9..0255e1a6a99 100644
--- a/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html
+++ b/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html
@@ -1,7 +1,7 @@
-
-
+
+
- {{ "creatingPasskeyLoading" | i18n }}
{{ "creatingPasskeyLoadingInfo" | i18n }}
@@ -27,7 +27,7 @@
class="tw-flex tw-flex-col tw-items-center"
>
- {{ "errorCreatingPasskey" | i18n }}
{{ "errorCreatingPasskeyInfo" | i18n }}
diff --git a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
index 4858deabec6..496ddb4ff9b 100644
--- a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
+++ b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
@@ -242,7 +242,7 @@
-
+
{{ "billingManagedByProvider" | i18n: userOrg.providerName }}
{{ "billingContactProviderForAssistance" | i18n }}
diff --git a/apps/web/src/app/billing/organizations/subscription-hidden.component.ts b/apps/web/src/app/billing/organizations/subscription-hidden.component.ts
index ef6e2dd0495..249cf999305 100644
--- a/apps/web/src/app/billing/organizations/subscription-hidden.component.ts
+++ b/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: `
-
+
{{ "billingManagedByProvider" | i18n: providerName }}
{{ "billingContactProviderForAssistance" | i18n }}
diff --git a/apps/web/src/app/billing/shared/sm-subscribe.component.html b/apps/web/src/app/billing/shared/sm-subscribe.component.html
index 6cdaeb9476d..70990d2ee4c 100644
--- a/apps/web/src/app/billing/shared/sm-subscribe.component.html
+++ b/apps/web/src/app/billing/shared/sm-subscribe.component.html
@@ -2,7 +2,7 @@
{{ "moreFromBitwarden" | i18n }}
-
diff --git a/apps/web/src/app/dirt/reports/shared/report-card/report-card.component.ts b/apps/web/src/app/dirt/reports/shared/report-card/report-card.component.ts
index 87c005ea46b..2f4934381b9 100644
--- a/apps/web/src/app/dirt/reports/shared/report-card/report-card.component.ts
+++ b/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;
diff --git a/apps/web/src/app/dirt/reports/shared/report-card/report-card.stories.ts b/apps/web/src/app/dirt/reports/shared/report-card/report-card.stories.ts
index 93ea79c8418..4f442dc9380 100644
--- a/apps/web/src/app/dirt/reports/shared/report-card/report-card.stories.ts
+++ b/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,
diff --git a/apps/web/src/app/dirt/reports/shared/report-list/report-list.stories.ts b/apps/web/src/app/dirt/reports/shared/report-list/report-list.stories.ts
index 5a95e332816..9686644bd74 100644
--- a/apps/web/src/app/dirt/reports/shared/report-list/report-list.stories.ts
+++ b/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,
diff --git a/apps/web/src/app/layouts/header/web-header.stories.ts b/apps/web/src/app/layouts/header/web-header.stories.ts
index 88c98f01e6c..3b3b28b8e45 100644
--- a/apps/web/src/app/layouts/header/web-header.stories.ts
+++ b/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,
diff --git a/apps/web/src/app/layouts/user-layout.component.ts b/apps/web/src/app/layouts/user-layout.component.ts
index 90207f59ad4..33bce661c65 100644
--- a/apps/web/src/app/layouts/user-layout.component.ts
+++ b/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,
],
})
diff --git a/apps/web/src/app/shared/components/onboarding/onboarding.stories.ts b/apps/web/src/app/shared/components/onboarding/onboarding.stories.ts
index 6d051a91f7e..6873700e2bc 100644
--- a/apps/web/src/app/shared/components/onboarding/onboarding.stories.ts
+++ b/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({
diff --git a/apps/web/src/app/shared/shared.module.ts b/apps/web/src/app/shared/shared.module.ts
index 6012e4867e1..b83555fd84e 100644
--- a/apps/web/src/app/shared/shared.module.ts
+++ b/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,
diff --git a/apps/web/src/app/tools/send/shared/send-success-drawer-dialog.component.html b/apps/web/src/app/tools/send/shared/send-success-drawer-dialog.component.html
index a484f210f62..90210df4658 100644
--- a/apps/web/src/app/tools/send/shared/send-success-drawer-dialog.component.html
+++ b/apps/web/src/app/tools/send/shared/send-success-drawer-dialog.component.html
@@ -8,7 +8,7 @@
>
-
{{ "openExtensionFromToolbarPart1" | i18n }}
-
diff --git a/apps/web/src/app/vault/components/manually-open-extension/manually-open-extension.component.ts b/apps/web/src/app/vault/components/manually-open-extension/manually-open-extension.component.ts
index 435e847f6e9..e4db0a55097 100644
--- a/apps/web/src/app/vault/components/manually-open-extension/manually-open-extension.component.ts
+++ b/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;
diff --git a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.html b/apps/web/src/app/vault/components/setup-extension/setup-extension.component.html
index 8cfd394b854..d8cd562ac61 100644
--- a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.html
+++ b/apps/web/src/app/vault/components/setup-extension/setup-extension.component.html
@@ -31,7 +31,7 @@
-
{{
diff --git a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.ts b/apps/web/src/app/vault/components/setup-extension/setup-extension.component.ts
index cfc1961c4d8..1b2c0144549 100644
--- a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.ts
+++ b/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;
JslibModule,
ButtonComponent,
LinkModule,
- IconModule,
+ SvgModule,
RouterModule,
AddExtensionVideosComponent,
ManuallyOpenExtensionComponent,
diff --git a/apps/web/src/app/vault/individual-vault/vault.component.ts b/apps/web/src/app/vault/individual-vault/vault.component.ts
index 532757852a3..b07de88baf9 100644
--- a/apps/web/src/app/vault/individual-vault/vault.component.ts
+++ b/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;
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/accept-provider.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/accept-provider.component.html
index bc209ead2bd..1a1dd5b1bbb 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/accept-provider.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/accept-provider.component.html
@@ -1,10 +1,10 @@
-
();
protected provider$: Observable;
- protected logo$: Observable;
+ protected logo$: Observable;
protected canAccessBilling$: Observable;
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup-provider.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup-provider.component.html
index cb8eaea80c3..ff148098cc6 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup-provider.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup-provider.component.html
@@ -1,10 +1,10 @@
-
-
-
+ >
}
@@ -94,11 +94,11 @@
-
+ >
}
diff --git a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/empty-state-card.component.ts b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/empty-state-card.component.ts
index 54d97e984ec..c28de5e9952 100644
--- a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/empty-state-card.component.ts
+++ b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/empty-state-card.component.ts
@@ -1,17 +1,17 @@
import { CommonModule } from "@angular/common";
import { ChangeDetectionStrategy, Component, input, isDevMode, OnInit } from "@angular/core";
-import { Icon } from "@bitwarden/assets/svg";
-import { ButtonModule, IconModule } from "@bitwarden/components";
+import { BitSvg } from "@bitwarden/assets/svg";
+import { ButtonModule, SvgModule } from "@bitwarden/components";
@Component({
selector: "empty-state-card",
templateUrl: "./empty-state-card.component.html",
- imports: [CommonModule, IconModule, ButtonModule],
+ imports: [CommonModule, SvgModule, ButtonModule],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class EmptyStateCardComponent implements OnInit {
- readonly icon = input(null);
+ readonly icon = input(null);
readonly videoSrc = input(null);
readonly title = input("");
readonly description = input("");
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/shared/org-suspended.component.ts b/bitwarden_license/bit-web/src/app/secrets-manager/shared/org-suspended.component.ts
index f2e0d48fe1d..241f02fce7e 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/shared/org-suspended.component.ts
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/shared/org-suspended.component.ts
@@ -2,7 +2,7 @@ import { Component } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { map, concatMap, firstValueFrom } from "rxjs";
-import { Icon, DeactivatedOrg } from "@bitwarden/assets/svg";
+import { BitSvg, DeactivatedOrg } from "@bitwarden/assets/svg";
import {
getOrganizationById,
OrganizationService,
@@ -23,7 +23,7 @@ export class OrgSuspendedComponent {
private route: ActivatedRoute,
) {}
- protected DeactivatedOrg: Icon = DeactivatedOrg;
+ protected DeactivatedOrg: BitSvg = DeactivatedOrg;
protected organizationName$ = this.route.params.pipe(
concatMap(async (params) => {
const userId = await firstValueFrom(getUserId(this.accountService.activeAccount$));
diff --git a/eslint.config.mjs b/eslint.config.mjs
index e8f43d4a9ea..974aaafeef6 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -207,6 +207,7 @@ export default tseslint.config(
"error",
{ ignoreIfHas: ["bitPasswordInputToggle"] },
],
+ "@bitwarden/components/no-bwi-class-usage": "warn",
},
},
diff --git a/libs/angular/src/auth/components/two-factor-icon.component.html b/libs/angular/src/auth/components/two-factor-icon.component.html
index 14558700757..555176225af 100644
--- a/libs/angular/src/auth/components/two-factor-icon.component.html
+++ b/libs/angular/src/auth/components/two-factor-icon.component.html
@@ -1,6 +1,6 @@
- ![]()
0) {
- throw new DynamicContentNotAllowedError();
- }
-
- return new Icon(strings[0]);
-}
diff --git a/libs/assets/src/svg/index.ts b/libs/assets/src/svg/index.ts
index 9f86a14f772..6a0fff490ff 100644
--- a/libs/assets/src/svg/index.ts
+++ b/libs/assets/src/svg/index.ts
@@ -1,2 +1,2 @@
export * from "./svgs";
-export * from "./icon-service";
+export * from "./svg";
diff --git a/libs/assets/src/svg/icon-service.spec.ts b/libs/assets/src/svg/svg.spec.ts
similarity index 69%
rename from libs/assets/src/svg/icon-service.spec.ts
rename to libs/assets/src/svg/svg.spec.ts
index 2561c85aefa..2d8401f0b5d 100644
--- a/libs/assets/src/svg/icon-service.spec.ts
+++ b/libs/assets/src/svg/svg.spec.ts
@@ -1,5 +1,5 @@
-import * as IconExports from "./icon-service";
-import { DynamicContentNotAllowedError, isIcon, svgIcon } from "./icon-service";
+import * as IconExports from "./svg";
+import { DynamicContentNotAllowedError, isBitSvg, svg } from "./svg";
describe("Icon", () => {
it("exports should not expose Icon class", () => {
@@ -8,13 +8,13 @@ describe("Icon", () => {
describe("isIcon", () => {
it("should return true when input is icon", () => {
- const result = isIcon(svgIcon`icon`);
+ const result = isBitSvg(svg`icon`);
expect(result).toBe(true);
});
it("should return false when input is not an icon", () => {
- const result = isIcon({ svg: "not an icon" });
+ const result = isBitSvg({ svg: "not an icon" });
expect(result).toBe(false);
});
@@ -24,13 +24,13 @@ describe("Icon", () => {
it("should throw when attempting to create dynamic icons", () => {
const dynamic = "some user input";
- const f = () => svgIcon`static and ${dynamic}`;
+ const f = () => svg`static and ${dynamic}`;
expect(f).toThrow(DynamicContentNotAllowedError);
});
it("should return svg content when supplying icon with svg string", () => {
- const icon = svgIcon`safe static content`;
+ const icon = svg`safe static content`;
expect(icon.svg).toBe("safe static content");
});
diff --git a/libs/assets/src/svg/svg.ts b/libs/assets/src/svg/svg.ts
new file mode 100644
index 00000000000..71324ea4bac
--- /dev/null
+++ b/libs/assets/src/svg/svg.ts
@@ -0,0 +1,25 @@
+class BitSvg {
+ constructor(readonly svg: string) {}
+}
+
+// We only export the type to prohibit the creation of Svgs without using
+// the `svg` template literal tag.
+export type { BitSvg };
+
+export function isBitSvg(svgContent: unknown): svgContent is BitSvg {
+ return svgContent instanceof BitSvg;
+}
+
+export class DynamicContentNotAllowedError extends Error {
+ constructor() {
+ super("Dynamic content in icons is not allowed due to risk of user-injected XSS.");
+ }
+}
+
+export function svg(strings: TemplateStringsArray, ...values: unknown[]): BitSvg {
+ if (values.length > 0) {
+ throw new DynamicContentNotAllowedError();
+ }
+
+ return new BitSvg(strings[0]);
+}
diff --git a/libs/assets/src/svg/svgs/account-warning.icon.ts b/libs/assets/src/svg/svgs/account-warning.icon.ts
index 80e29dad870..81bf62d6e64 100644
--- a/libs/assets/src/svg/svgs/account-warning.icon.ts
+++ b/libs/assets/src/svg/svgs/account-warning.icon.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";
-export const AccountWarning = svgIcon`
+export const AccountWarning = svg`
{{ provider.name }}
{{ provider.description }}
diff --git 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
index d8b2ab2508b..53ae509f182 100644
--- 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: [],
})
diff --git 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
index 5699f3dd9a4..8e8f41c394d 100644
--- 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 @@
>
- {{ "verifyWithBiometrics" | i18n }}
diff --git 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
index 296359c92ff..af73cc3de99 100644
--- 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,
diff --git a/libs/components/src/anon-layout/anon-layout-wrapper.component.ts b/libs/components/src/anon-layout/anon-layout-wrapper.component.ts
index 84140a8953a..b8f8851864b 100644
--- a/libs/components/src/anon-layout/anon-layout-wrapper.component.ts
+++ b/libs/components/src/anon-layout/anon-layout-wrapper.component.ts
@@ -3,7 +3,7 @@ import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
import { ActivatedRoute, Data, NavigationEnd, Router, RouterModule } from "@angular/router";
import { Subject, filter, of, switchMap, tap } from "rxjs";
-import { Icon } from "@bitwarden/assets/svg";
+import { BitSvg } from "@bitwarden/assets/svg";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { Translation } from "../dialog";
@@ -27,7 +27,7 @@ export interface AnonLayoutWrapperData {
/**
* The icon to display on the page. Pass null to hide the icon.
*/
- pageIcon: Icon | null;
+ pageIcon: BitSvg | null;
/**
* Optional flag to either show the optional environment selector (false) or just a readonly hostname (true).
*/
@@ -57,7 +57,7 @@ export class AnonLayoutWrapperComponent implements OnInit {
protected pageTitle?: string | null;
protected pageSubtitle?: string | null;
- protected pageIcon: Icon | null = null;
+ protected pageIcon: BitSvg | null = null;
protected showReadonlyHostname?: boolean | null;
protected maxWidth?: LandingContentMaxWidthType | null;
protected hideCardWrapper?: boolean | null;
diff --git a/libs/components/src/anon-layout/anon-layout.component.ts b/libs/components/src/anon-layout/anon-layout.component.ts
index eded556cd53..953a5e769cf 100644
--- a/libs/components/src/anon-layout/anon-layout.component.ts
+++ b/libs/components/src/anon-layout/anon-layout.component.ts
@@ -11,15 +11,15 @@ import {
import { RouterModule } from "@angular/router";
import { firstValueFrom } from "rxjs";
-import { BitwardenLogo, Icon } from "@bitwarden/assets/svg";
+import { BitwardenLogo, BitSvg } from "@bitwarden/assets/svg";
import { ClientType } from "@bitwarden/common/enums";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { IconModule } from "../icon";
import { LandingContentMaxWidthType } from "../landing-layout";
import { LandingLayoutModule } from "../landing-layout/landing-layout.module";
import { SharedModule } from "../shared";
+import { SvgModule } from "../svg";
import { TypographyModule } from "../typography";
// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
@@ -28,7 +28,7 @@ import { TypographyModule } from "../typography";
selector: "auth-anon-layout",
templateUrl: "./anon-layout.component.html",
imports: [
- IconModule,
+ SvgModule,
CommonModule,
TypographyModule,
SharedModule,
@@ -45,7 +45,7 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
readonly title = input();
readonly subtitle = input();
- readonly icon = model.required();
+ readonly icon = model.required();
readonly showReadonlyHostname = input(false);
readonly hideLogo = input(false);
readonly hideFooter = input(false);
diff --git a/libs/components/src/anon-layout/anon-layout.stories.ts b/libs/components/src/anon-layout/anon-layout.stories.ts
index 01cdc04ad73..ed6df181c85 100644
--- a/libs/components/src/anon-layout/anon-layout.stories.ts
+++ b/libs/components/src/anon-layout/anon-layout.stories.ts
@@ -2,7 +2,7 @@ import { ActivatedRoute, RouterModule } from "@angular/router";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { BehaviorSubject, of } from "rxjs";
-import { Icon, LockIcon } from "@bitwarden/assets/svg";
+import { BitSvg, LockIcon } from "@bitwarden/assets/svg";
import { ClientType } from "@bitwarden/common/enums";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -23,7 +23,7 @@ type StoryArgs = AnonLayoutComponent & {
contentLength: "normal" | "long" | "thin";
showSecondary: boolean;
useDefaultIcon: boolean;
- icon: Icon;
+ icon: BitSvg;
includeHeaderActions: boolean;
};
diff --git a/libs/components/src/callout/callout.stories.ts b/libs/components/src/callout/callout.stories.ts
index c2185203034..ff1a8c16d5f 100644
--- a/libs/components/src/callout/callout.stories.ts
+++ b/libs/components/src/callout/callout.stories.ts
@@ -1,7 +1,7 @@
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { LinkModule, IconModule } from "@bitwarden/components";
+import { LinkModule, SvgModule } from "@bitwarden/components";
import { formatArgsForCodeSnippet } from "../../../../.storybook/format-args-for-code-snippet";
import { I18nMockService } from "../utils/i18n-mock.service";
@@ -13,7 +13,7 @@ export default {
component: CalloutComponent,
decorators: [
moduleMetadata({
- imports: [LinkModule, IconModule],
+ imports: [LinkModule, SvgModule],
providers: [
{
provide: I18nService,
diff --git a/libs/components/src/header/header.stories.ts b/libs/components/src/header/header.stories.ts
index 620f39a5dc3..23c2bb2edb5 100644
--- a/libs/components/src/header/header.stories.ts
+++ b/libs/components/src/header/header.stories.ts
@@ -14,7 +14,7 @@ import {
BreadcrumbsModule,
ButtonModule,
IconButtonModule,
- IconModule,
+ SvgModule,
InputModule,
MenuModule,
NavigationModule,
@@ -40,7 +40,7 @@ export default {
BreadcrumbsModule,
ButtonModule,
IconButtonModule,
- IconModule,
+ SvgModule,
InputModule,
MenuModule,
NavigationModule,
diff --git a/libs/components/src/icon/icon.component.ts b/libs/components/src/icon/icon.component.ts
index f57a3627383..c2dc468dc71 100644
--- a/libs/components/src/icon/icon.component.ts
+++ b/libs/components/src/icon/icon.component.ts
@@ -1,35 +1,30 @@
-import { Component, effect, input } from "@angular/core";
-import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
-import { Icon, isIcon } from "@bitwarden/assets/svg";
+import { BitwardenIcon } from "../shared/icon";
-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
selector: "bit-icon",
+ standalone: true,
host: {
- "[attr.aria-hidden]": "!ariaLabel()",
+ "[class]": "classList()",
+ "[attr.aria-hidden]": "ariaLabel() ? null : true",
"[attr.aria-label]": "ariaLabel()",
- "[innerHtml]": "innerHtml",
- class: "tw-max-h-full tw-flex tw-justify-center",
},
template: ``,
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class BitIconComponent {
- innerHtml: SafeHtml | null = null;
-
- readonly icon = input();
+export class IconComponent {
+ /**
+ * The Bitwarden icon name (e.g., "bwi-lock", "bwi-user")
+ */
+ readonly name = input.required();
+ /**
+ * Accessible label for the icon
+ */
readonly ariaLabel = input();
- constructor(private domSanitizer: DomSanitizer) {
- effect(() => {
- const icon = this.icon();
- if (!isIcon(icon)) {
- return;
- }
- const svg = icon.svg;
- this.innerHtml = this.domSanitizer.bypassSecurityTrustHtml(svg);
- });
- }
+ protected readonly classList = computed(() => {
+ return ["bwi", this.name()].join(" ");
+ });
}
diff --git a/libs/components/src/icon/icon.mdx b/libs/components/src/icon/icon.mdx
index 4f6f13c895e..0914d681e59 100644
--- a/libs/components/src/icon/icon.mdx
+++ b/libs/components/src/icon/icon.mdx
@@ -8,113 +8,40 @@ import * as stories from "./icon.stories";
import { IconModule } from "@bitwarden/components";
```
-# Icon Use Instructions
+# Icon
-- Icons will generally be attached to the associated Jira task.
- - Designers should minify any SVGs before attaching them to Jira using a tool like
- [SVGOMG](https://jakearchibald.github.io/svgomg/).
- - **Note:** Ensure the "Remove viewbox" option is toggled off if responsive resizing of the icon
- is desired.
+The `bit-icon` component renders Bitwarden Web Icons (bwi) using icon font classes.
-## Developer Instructions
+## Basic Usage
-1. **Download the SVG** and import it as an `.svg` initially into the IDE of your choice.
- - The SVG should be formatted using either a built-in formatter or an external tool like
- [SVG Formatter Beautifier](https://codebeautify.org/svg-formatter-beautifier) to make applying
- classes easier.
+```html
+.icon.ts` TypeScript file and place it in the `libs/assets/svg`
- lib.
+## Icon Names
-3. **Import** `svgIcon` from `./icon-service`.
+All available icon names are defined in the `BitwardenIcon` type. Icons use the `bwi-*` naming
+convention (e.g., `bwi-lock`, `bwi-user`, `bwi-key`).
-4. **Define and export** a `const` to represent your `svgIcon`.
+## Accessibility
- ```typescript
- export const ExampleIcon = svgIcon`
-
{{ "securityPrioritized" | i18n }}
{{ "securityPrioritizedBody" | i18n }}
@@ -11,7 +11,7 @@
-
{{ "quickLogin" | i18n }}
{{ "quickLoginBody" | i18n }}
@@ -20,7 +20,7 @@
-
{{ "secureUser" | i18n }}
{{ "secureUserBody" | i18n }}
@@ -29,7 +29,7 @@
-
{{ "secureDevices" | i18n }}
{{ "secureDevicesBody" | i18n }}
diff --git a/apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.ts b/apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.ts index 48c8f5682bc..5ad44c2f545 100644 --- a/apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.ts +++ b/apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.ts @@ -3,7 +3,7 @@ import { Router } from "@angular/router"; import { JslibModule } from "@bitwarden/angular/jslib.module"; import { ItemTypes, LoginCards, NoCredentialsIcon, DevicesIcon } from "@bitwarden/assets/svg"; -import { ButtonModule, DialogModule, IconModule, TypographyModule } from "@bitwarden/components"; +import { ButtonModule, DialogModule, SvgModule, TypographyModule } from "@bitwarden/components"; import { I18nPipe } from "@bitwarden/ui-common"; import { VaultCarouselModule } from "@bitwarden/vault"; @@ -17,7 +17,7 @@ import { IntroCarouselService } from "../../../services/intro-carousel.service"; imports: [ VaultCarouselModule, ButtonModule, - IconModule, + SvgModule, DialogModule, TypographyModule, JslibModule, diff --git a/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html b/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html index 67fc76aa317..4d3748d4303 100644 --- a/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html +++ b/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html @@ -5,7 +5,7 @@ >
-
{{ "savePasskeyQuestion" | i18n }}
@@ -28,7 +28,7 @@
{{ "savePasskeyQuestion" | i18n }}
@@ -28,7 +28,7 @@
-
-
{{ "savePasskeyQuestion" | i18n }}
@@ -30,7 +30,7 @@
class="tw-flex tw-bg-background-alt tw-flex-col tw-justify-start tw-items-center tw-gap-2 tw-h-full tw-px-5"
>
-
- {{ "passkeyLogin" | i18n }}
diff --git a/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.ts b/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.ts
index 897e825c53e..635ba3972cb 100644
--- a/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.ts
+++ b/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.ts
@@ -24,7 +24,7 @@ import {
ButtonModule,
DialogModule,
DialogService,
- IconModule,
+ SvgModule,
ItemModule,
SectionComponent,
TableModule,
@@ -48,7 +48,7 @@ import {
BitIconButtonComponent,
TableModule,
JslibModule,
- IconModule,
+ SvgModule,
ButtonModule,
DialogModule,
SectionComponent,
diff --git a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts
index b00e4d9840d..2d1fde10856 100644
--- a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts
+++ b/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,
diff --git a/apps/web/src/app/admin-console/organizations/policies/policy-edit-definitions/auto-confirm-policy.component.html b/apps/web/src/app/admin-console/organizations/policies/policy-edit-definitions/auto-confirm-policy.component.html
index 54f166b662e..a8e3236dad8 100644
--- a/apps/web/src/app/admin-console/organizations/policies/policy-edit-definitions/auto-confirm-policy.component.html
+++ b/apps/web/src/app/admin-console/organizations/policies/policy-edit-definitions/auto-confirm-policy.component.html
@@ -44,7 +44,7 @@
-
- 1. {{ "autoConfirmExtension1" | i18n }}
diff --git a/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html b/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html
index ca1264829b9..0255e1a6a99 100644
--- a/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html
+++ b/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html
@@ -1,7 +1,7 @@
-
-
+
+
- {{ "creatingPasskeyLoading" | i18n }}
{{ "creatingPasskeyLoadingInfo" | i18n }}
@@ -27,7 +27,7 @@
class="tw-flex tw-flex-col tw-items-center"
>
- {{ "errorCreatingPasskey" | i18n }}
{{ "errorCreatingPasskeyInfo" | i18n }}
diff --git a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
index 4858deabec6..496ddb4ff9b 100644
--- a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
+++ b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
@@ -242,7 +242,7 @@
-
+
{{ "billingManagedByProvider" | i18n: userOrg.providerName }}
{{ "billingContactProviderForAssistance" | i18n }}
diff --git a/apps/web/src/app/billing/organizations/subscription-hidden.component.ts b/apps/web/src/app/billing/organizations/subscription-hidden.component.ts
index ef6e2dd0495..249cf999305 100644
--- a/apps/web/src/app/billing/organizations/subscription-hidden.component.ts
+++ b/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: `
-
+
{{ "billingManagedByProvider" | i18n: providerName }}
{{ "billingContactProviderForAssistance" | i18n }}
diff --git a/apps/web/src/app/billing/shared/sm-subscribe.component.html b/apps/web/src/app/billing/shared/sm-subscribe.component.html
index 6cdaeb9476d..70990d2ee4c 100644
--- a/apps/web/src/app/billing/shared/sm-subscribe.component.html
+++ b/apps/web/src/app/billing/shared/sm-subscribe.component.html
@@ -2,7 +2,7 @@
{{ "moreFromBitwarden" | i18n }}
-
diff --git a/apps/web/src/app/dirt/reports/shared/report-card/report-card.component.ts b/apps/web/src/app/dirt/reports/shared/report-card/report-card.component.ts
index 87c005ea46b..2f4934381b9 100644
--- a/apps/web/src/app/dirt/reports/shared/report-card/report-card.component.ts
+++ b/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;
diff --git a/apps/web/src/app/dirt/reports/shared/report-card/report-card.stories.ts b/apps/web/src/app/dirt/reports/shared/report-card/report-card.stories.ts
index 93ea79c8418..4f442dc9380 100644
--- a/apps/web/src/app/dirt/reports/shared/report-card/report-card.stories.ts
+++ b/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,
diff --git a/apps/web/src/app/dirt/reports/shared/report-list/report-list.stories.ts b/apps/web/src/app/dirt/reports/shared/report-list/report-list.stories.ts
index 5a95e332816..9686644bd74 100644
--- a/apps/web/src/app/dirt/reports/shared/report-list/report-list.stories.ts
+++ b/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,
diff --git a/apps/web/src/app/layouts/header/web-header.stories.ts b/apps/web/src/app/layouts/header/web-header.stories.ts
index 88c98f01e6c..3b3b28b8e45 100644
--- a/apps/web/src/app/layouts/header/web-header.stories.ts
+++ b/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,
diff --git a/apps/web/src/app/layouts/user-layout.component.ts b/apps/web/src/app/layouts/user-layout.component.ts
index 90207f59ad4..33bce661c65 100644
--- a/apps/web/src/app/layouts/user-layout.component.ts
+++ b/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,
],
})
diff --git a/apps/web/src/app/shared/components/onboarding/onboarding.stories.ts b/apps/web/src/app/shared/components/onboarding/onboarding.stories.ts
index 6d051a91f7e..6873700e2bc 100644
--- a/apps/web/src/app/shared/components/onboarding/onboarding.stories.ts
+++ b/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({
diff --git a/apps/web/src/app/shared/shared.module.ts b/apps/web/src/app/shared/shared.module.ts
index 6012e4867e1..b83555fd84e 100644
--- a/apps/web/src/app/shared/shared.module.ts
+++ b/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,
diff --git a/apps/web/src/app/tools/send/shared/send-success-drawer-dialog.component.html b/apps/web/src/app/tools/send/shared/send-success-drawer-dialog.component.html
index a484f210f62..90210df4658 100644
--- a/apps/web/src/app/tools/send/shared/send-success-drawer-dialog.component.html
+++ b/apps/web/src/app/tools/send/shared/send-success-drawer-dialog.component.html
@@ -8,7 +8,7 @@
>
-
{{ "openExtensionFromToolbarPart1" | i18n }}
-
diff --git a/apps/web/src/app/vault/components/manually-open-extension/manually-open-extension.component.ts b/apps/web/src/app/vault/components/manually-open-extension/manually-open-extension.component.ts
index 435e847f6e9..e4db0a55097 100644
--- a/apps/web/src/app/vault/components/manually-open-extension/manually-open-extension.component.ts
+++ b/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;
diff --git a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.html b/apps/web/src/app/vault/components/setup-extension/setup-extension.component.html
index 8cfd394b854..d8cd562ac61 100644
--- a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.html
+++ b/apps/web/src/app/vault/components/setup-extension/setup-extension.component.html
@@ -31,7 +31,7 @@
-
{{
diff --git a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.ts b/apps/web/src/app/vault/components/setup-extension/setup-extension.component.ts
index cfc1961c4d8..1b2c0144549 100644
--- a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.ts
+++ b/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;
JslibModule,
ButtonComponent,
LinkModule,
- IconModule,
+ SvgModule,
RouterModule,
AddExtensionVideosComponent,
ManuallyOpenExtensionComponent,
diff --git a/apps/web/src/app/vault/individual-vault/vault.component.ts b/apps/web/src/app/vault/individual-vault/vault.component.ts
index 532757852a3..b07de88baf9 100644
--- a/apps/web/src/app/vault/individual-vault/vault.component.ts
+++ b/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;
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/accept-provider.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/accept-provider.component.html
index bc209ead2bd..1a1dd5b1bbb 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/accept-provider.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/accept-provider.component.html
@@ -1,10 +1,10 @@
-
();
protected provider$: Observable;
- protected logo$: Observable;
+ protected logo$: Observable;
protected canAccessBilling$: Observable;
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup-provider.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup-provider.component.html
index cb8eaea80c3..ff148098cc6 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup-provider.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup-provider.component.html
@@ -1,10 +1,10 @@
-
-
-
+ >
}
@@ -94,11 +94,11 @@
-
+ >
}
diff --git a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/empty-state-card.component.ts b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/empty-state-card.component.ts
index 54d97e984ec..c28de5e9952 100644
--- a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/empty-state-card.component.ts
+++ b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/empty-state-card.component.ts
@@ -1,17 +1,17 @@
import { CommonModule } from "@angular/common";
import { ChangeDetectionStrategy, Component, input, isDevMode, OnInit } from "@angular/core";
-import { Icon } from "@bitwarden/assets/svg";
-import { ButtonModule, IconModule } from "@bitwarden/components";
+import { BitSvg } from "@bitwarden/assets/svg";
+import { ButtonModule, SvgModule } from "@bitwarden/components";
@Component({
selector: "empty-state-card",
templateUrl: "./empty-state-card.component.html",
- imports: [CommonModule, IconModule, ButtonModule],
+ imports: [CommonModule, SvgModule, ButtonModule],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class EmptyStateCardComponent implements OnInit {
- readonly icon = input(null);
+ readonly icon = input(null);
readonly videoSrc = input(null);
readonly title = input("");
readonly description = input("");
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/shared/org-suspended.component.ts b/bitwarden_license/bit-web/src/app/secrets-manager/shared/org-suspended.component.ts
index f2e0d48fe1d..241f02fce7e 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/shared/org-suspended.component.ts
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/shared/org-suspended.component.ts
@@ -2,7 +2,7 @@ import { Component } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { map, concatMap, firstValueFrom } from "rxjs";
-import { Icon, DeactivatedOrg } from "@bitwarden/assets/svg";
+import { BitSvg, DeactivatedOrg } from "@bitwarden/assets/svg";
import {
getOrganizationById,
OrganizationService,
@@ -23,7 +23,7 @@ export class OrgSuspendedComponent {
private route: ActivatedRoute,
) {}
- protected DeactivatedOrg: Icon = DeactivatedOrg;
+ protected DeactivatedOrg: BitSvg = DeactivatedOrg;
protected organizationName$ = this.route.params.pipe(
concatMap(async (params) => {
const userId = await firstValueFrom(getUserId(this.accountService.activeAccount$));
diff --git a/eslint.config.mjs b/eslint.config.mjs
index e8f43d4a9ea..974aaafeef6 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -207,6 +207,7 @@ export default tseslint.config(
"error",
{ ignoreIfHas: ["bitPasswordInputToggle"] },
],
+ "@bitwarden/components/no-bwi-class-usage": "warn",
},
},
diff --git a/libs/angular/src/auth/components/two-factor-icon.component.html b/libs/angular/src/auth/components/two-factor-icon.component.html
index 14558700757..555176225af 100644
--- a/libs/angular/src/auth/components/two-factor-icon.component.html
+++ b/libs/angular/src/auth/components/two-factor-icon.component.html
@@ -1,6 +1,6 @@
- ![]()
0) {
- throw new DynamicContentNotAllowedError();
- }
-
- return new Icon(strings[0]);
-}
diff --git a/libs/assets/src/svg/index.ts b/libs/assets/src/svg/index.ts
index 9f86a14f772..6a0fff490ff 100644
--- a/libs/assets/src/svg/index.ts
+++ b/libs/assets/src/svg/index.ts
@@ -1,2 +1,2 @@
export * from "./svgs";
-export * from "./icon-service";
+export * from "./svg";
diff --git a/libs/assets/src/svg/icon-service.spec.ts b/libs/assets/src/svg/svg.spec.ts
similarity index 69%
rename from libs/assets/src/svg/icon-service.spec.ts
rename to libs/assets/src/svg/svg.spec.ts
index 2561c85aefa..2d8401f0b5d 100644
--- a/libs/assets/src/svg/icon-service.spec.ts
+++ b/libs/assets/src/svg/svg.spec.ts
@@ -1,5 +1,5 @@
-import * as IconExports from "./icon-service";
-import { DynamicContentNotAllowedError, isIcon, svgIcon } from "./icon-service";
+import * as IconExports from "./svg";
+import { DynamicContentNotAllowedError, isBitSvg, svg } from "./svg";
describe("Icon", () => {
it("exports should not expose Icon class", () => {
@@ -8,13 +8,13 @@ describe("Icon", () => {
describe("isIcon", () => {
it("should return true when input is icon", () => {
- const result = isIcon(svgIcon`icon`);
+ const result = isBitSvg(svg`icon`);
expect(result).toBe(true);
});
it("should return false when input is not an icon", () => {
- const result = isIcon({ svg: "not an icon" });
+ const result = isBitSvg({ svg: "not an icon" });
expect(result).toBe(false);
});
@@ -24,13 +24,13 @@ describe("Icon", () => {
it("should throw when attempting to create dynamic icons", () => {
const dynamic = "some user input";
- const f = () => svgIcon`static and ${dynamic}`;
+ const f = () => svg`static and ${dynamic}`;
expect(f).toThrow(DynamicContentNotAllowedError);
});
it("should return svg content when supplying icon with svg string", () => {
- const icon = svgIcon`safe static content`;
+ const icon = svg`safe static content`;
expect(icon.svg).toBe("safe static content");
});
diff --git a/libs/assets/src/svg/svg.ts b/libs/assets/src/svg/svg.ts
new file mode 100644
index 00000000000..71324ea4bac
--- /dev/null
+++ b/libs/assets/src/svg/svg.ts
@@ -0,0 +1,25 @@
+class BitSvg {
+ constructor(readonly svg: string) {}
+}
+
+// We only export the type to prohibit the creation of Svgs without using
+// the `svg` template literal tag.
+export type { BitSvg };
+
+export function isBitSvg(svgContent: unknown): svgContent is BitSvg {
+ return svgContent instanceof BitSvg;
+}
+
+export class DynamicContentNotAllowedError extends Error {
+ constructor() {
+ super("Dynamic content in icons is not allowed due to risk of user-injected XSS.");
+ }
+}
+
+export function svg(strings: TemplateStringsArray, ...values: unknown[]): BitSvg {
+ if (values.length > 0) {
+ throw new DynamicContentNotAllowedError();
+ }
+
+ return new BitSvg(strings[0]);
+}
diff --git a/libs/assets/src/svg/svgs/account-warning.icon.ts b/libs/assets/src/svg/svgs/account-warning.icon.ts
index 80e29dad870..81bf62d6e64 100644
--- a/libs/assets/src/svg/svgs/account-warning.icon.ts
+++ b/libs/assets/src/svg/svgs/account-warning.icon.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";
-export const AccountWarning = svgIcon`
+export const AccountWarning = svg`
{{ provider.name }}
{{ provider.description }}
diff --git 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
index d8b2ab2508b..53ae509f182 100644
--- 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: [],
})
diff --git 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
index 5699f3dd9a4..8e8f41c394d 100644
--- 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 @@
>
- {{ "verifyWithBiometrics" | i18n }}
diff --git 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
index 296359c92ff..af73cc3de99 100644
--- 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,
diff --git a/libs/components/src/anon-layout/anon-layout-wrapper.component.ts b/libs/components/src/anon-layout/anon-layout-wrapper.component.ts
index 84140a8953a..b8f8851864b 100644
--- a/libs/components/src/anon-layout/anon-layout-wrapper.component.ts
+++ b/libs/components/src/anon-layout/anon-layout-wrapper.component.ts
@@ -3,7 +3,7 @@ import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
import { ActivatedRoute, Data, NavigationEnd, Router, RouterModule } from "@angular/router";
import { Subject, filter, of, switchMap, tap } from "rxjs";
-import { Icon } from "@bitwarden/assets/svg";
+import { BitSvg } from "@bitwarden/assets/svg";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { Translation } from "../dialog";
@@ -27,7 +27,7 @@ export interface AnonLayoutWrapperData {
/**
* The icon to display on the page. Pass null to hide the icon.
*/
- pageIcon: Icon | null;
+ pageIcon: BitSvg | null;
/**
* Optional flag to either show the optional environment selector (false) or just a readonly hostname (true).
*/
@@ -57,7 +57,7 @@ export class AnonLayoutWrapperComponent implements OnInit {
protected pageTitle?: string | null;
protected pageSubtitle?: string | null;
- protected pageIcon: Icon | null = null;
+ protected pageIcon: BitSvg | null = null;
protected showReadonlyHostname?: boolean | null;
protected maxWidth?: LandingContentMaxWidthType | null;
protected hideCardWrapper?: boolean | null;
diff --git a/libs/components/src/anon-layout/anon-layout.component.ts b/libs/components/src/anon-layout/anon-layout.component.ts
index eded556cd53..953a5e769cf 100644
--- a/libs/components/src/anon-layout/anon-layout.component.ts
+++ b/libs/components/src/anon-layout/anon-layout.component.ts
@@ -11,15 +11,15 @@ import {
import { RouterModule } from "@angular/router";
import { firstValueFrom } from "rxjs";
-import { BitwardenLogo, Icon } from "@bitwarden/assets/svg";
+import { BitwardenLogo, BitSvg } from "@bitwarden/assets/svg";
import { ClientType } from "@bitwarden/common/enums";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { IconModule } from "../icon";
import { LandingContentMaxWidthType } from "../landing-layout";
import { LandingLayoutModule } from "../landing-layout/landing-layout.module";
import { SharedModule } from "../shared";
+import { SvgModule } from "../svg";
import { TypographyModule } from "../typography";
// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
@@ -28,7 +28,7 @@ import { TypographyModule } from "../typography";
selector: "auth-anon-layout",
templateUrl: "./anon-layout.component.html",
imports: [
- IconModule,
+ SvgModule,
CommonModule,
TypographyModule,
SharedModule,
@@ -45,7 +45,7 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
readonly title = input();
readonly subtitle = input();
- readonly icon = model.required();
+ readonly icon = model.required();
readonly showReadonlyHostname = input(false);
readonly hideLogo = input(false);
readonly hideFooter = input(false);
diff --git a/libs/components/src/anon-layout/anon-layout.stories.ts b/libs/components/src/anon-layout/anon-layout.stories.ts
index 01cdc04ad73..ed6df181c85 100644
--- a/libs/components/src/anon-layout/anon-layout.stories.ts
+++ b/libs/components/src/anon-layout/anon-layout.stories.ts
@@ -2,7 +2,7 @@ import { ActivatedRoute, RouterModule } from "@angular/router";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { BehaviorSubject, of } from "rxjs";
-import { Icon, LockIcon } from "@bitwarden/assets/svg";
+import { BitSvg, LockIcon } from "@bitwarden/assets/svg";
import { ClientType } from "@bitwarden/common/enums";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -23,7 +23,7 @@ type StoryArgs = AnonLayoutComponent & {
contentLength: "normal" | "long" | "thin";
showSecondary: boolean;
useDefaultIcon: boolean;
- icon: Icon;
+ icon: BitSvg;
includeHeaderActions: boolean;
};
diff --git a/libs/components/src/callout/callout.stories.ts b/libs/components/src/callout/callout.stories.ts
index c2185203034..ff1a8c16d5f 100644
--- a/libs/components/src/callout/callout.stories.ts
+++ b/libs/components/src/callout/callout.stories.ts
@@ -1,7 +1,7 @@
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { LinkModule, IconModule } from "@bitwarden/components";
+import { LinkModule, SvgModule } from "@bitwarden/components";
import { formatArgsForCodeSnippet } from "../../../../.storybook/format-args-for-code-snippet";
import { I18nMockService } from "../utils/i18n-mock.service";
@@ -13,7 +13,7 @@ export default {
component: CalloutComponent,
decorators: [
moduleMetadata({
- imports: [LinkModule, IconModule],
+ imports: [LinkModule, SvgModule],
providers: [
{
provide: I18nService,
diff --git a/libs/components/src/header/header.stories.ts b/libs/components/src/header/header.stories.ts
index 620f39a5dc3..23c2bb2edb5 100644
--- a/libs/components/src/header/header.stories.ts
+++ b/libs/components/src/header/header.stories.ts
@@ -14,7 +14,7 @@ import {
BreadcrumbsModule,
ButtonModule,
IconButtonModule,
- IconModule,
+ SvgModule,
InputModule,
MenuModule,
NavigationModule,
@@ -40,7 +40,7 @@ export default {
BreadcrumbsModule,
ButtonModule,
IconButtonModule,
- IconModule,
+ SvgModule,
InputModule,
MenuModule,
NavigationModule,
diff --git a/libs/components/src/icon/icon.component.ts b/libs/components/src/icon/icon.component.ts
index f57a3627383..c2dc468dc71 100644
--- a/libs/components/src/icon/icon.component.ts
+++ b/libs/components/src/icon/icon.component.ts
@@ -1,35 +1,30 @@
-import { Component, effect, input } from "@angular/core";
-import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
-import { Icon, isIcon } from "@bitwarden/assets/svg";
+import { BitwardenIcon } from "../shared/icon";
-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
selector: "bit-icon",
+ standalone: true,
host: {
- "[attr.aria-hidden]": "!ariaLabel()",
+ "[class]": "classList()",
+ "[attr.aria-hidden]": "ariaLabel() ? null : true",
"[attr.aria-label]": "ariaLabel()",
- "[innerHtml]": "innerHtml",
- class: "tw-max-h-full tw-flex tw-justify-center",
},
template: ``,
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class BitIconComponent {
- innerHtml: SafeHtml | null = null;
-
- readonly icon = input();
+export class IconComponent {
+ /**
+ * The Bitwarden icon name (e.g., "bwi-lock", "bwi-user")
+ */
+ readonly name = input.required();
+ /**
+ * Accessible label for the icon
+ */
readonly ariaLabel = input();
- constructor(private domSanitizer: DomSanitizer) {
- effect(() => {
- const icon = this.icon();
- if (!isIcon(icon)) {
- return;
- }
- const svg = icon.svg;
- this.innerHtml = this.domSanitizer.bypassSecurityTrustHtml(svg);
- });
- }
+ protected readonly classList = computed(() => {
+ return ["bwi", this.name()].join(" ");
+ });
}
diff --git a/libs/components/src/icon/icon.mdx b/libs/components/src/icon/icon.mdx
index 4f6f13c895e..0914d681e59 100644
--- a/libs/components/src/icon/icon.mdx
+++ b/libs/components/src/icon/icon.mdx
@@ -8,113 +8,40 @@ import * as stories from "./icon.stories";
import { IconModule } from "@bitwarden/components";
```
-# Icon Use Instructions
+# Icon
-- Icons will generally be attached to the associated Jira task.
- - Designers should minify any SVGs before attaching them to Jira using a tool like
- [SVGOMG](https://jakearchibald.github.io/svgomg/).
- - **Note:** Ensure the "Remove viewbox" option is toggled off if responsive resizing of the icon
- is desired.
+The `bit-icon` component renders Bitwarden Web Icons (bwi) using icon font classes.
-## Developer Instructions
+## Basic Usage
-1. **Download the SVG** and import it as an `.svg` initially into the IDE of your choice.
- - The SVG should be formatted using either a built-in formatter or an external tool like
- [SVG Formatter Beautifier](https://codebeautify.org/svg-formatter-beautifier) to make applying
- classes easier.
+```html
+.icon.ts` TypeScript file and place it in the `libs/assets/svg`
- lib.
+## Icon Names
-3. **Import** `svgIcon` from `./icon-service`.
+All available icon names are defined in the `BitwardenIcon` type. Icons use the `bwi-*` naming
+convention (e.g., `bwi-lock`, `bwi-user`, `bwi-key`).
-4. **Define and export** a `const` to represent your `svgIcon`.
+## Accessibility
- ```typescript
- export const ExampleIcon = svgIcon`
-
{{ "noMatchingLoginsForSite" | i18n }}
diff --git a/apps/desktop/src/autofill/modal/credentials/fido2-create.component.ts b/apps/desktop/src/autofill/modal/credentials/fido2-create.component.ts
index 67237bedccd..d18fb6752e3 100644
--- a/apps/desktop/src/autofill/modal/credentials/fido2-create.component.ts
+++ b/apps/desktop/src/autofill/modal/credentials/fido2-create.component.ts
@@ -16,7 +16,7 @@ import {
BadgeModule,
ButtonModule,
DialogModule,
- IconModule,
+ SvgModule,
ItemModule,
SectionComponent,
TableModule,
@@ -42,7 +42,7 @@ import {
BitIconButtonComponent,
TableModule,
JslibModule,
- IconModule,
+ SvgModule,
ButtonModule,
DialogModule,
SectionComponent,
diff --git a/apps/desktop/src/autofill/modal/credentials/fido2-excluded-ciphers.component.html b/apps/desktop/src/autofill/modal/credentials/fido2-excluded-ciphers.component.html
index 792934deedc..817c79eba3a 100644
--- a/apps/desktop/src/autofill/modal/credentials/fido2-excluded-ciphers.component.html
+++ b/apps/desktop/src/autofill/modal/credentials/fido2-excluded-ciphers.component.html
@@ -5,7 +5,7 @@
>
-
{{ "savePasskeyQuestion" | i18n }}
@@ -30,7 +30,7 @@
class="tw-flex tw-bg-background-alt tw-flex-col tw-justify-start tw-items-center tw-gap-2 tw-h-full tw-px-5"
>
{{ "savePasskeyQuestion" | i18n }}
@@ -30,7 +30,7 @@
class="tw-flex tw-bg-background-alt tw-flex-col tw-justify-start tw-items-center tw-gap-2 tw-h-full tw-px-5"
>
-
- {{ "passkeyLogin" | i18n }}
diff --git a/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.ts b/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.ts
index 897e825c53e..635ba3972cb 100644
--- a/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.ts
+++ b/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.ts
@@ -24,7 +24,7 @@ import {
ButtonModule,
DialogModule,
DialogService,
- IconModule,
+ SvgModule,
ItemModule,
SectionComponent,
TableModule,
@@ -48,7 +48,7 @@ import {
BitIconButtonComponent,
TableModule,
JslibModule,
- IconModule,
+ SvgModule,
ButtonModule,
DialogModule,
SectionComponent,
diff --git a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts
index b00e4d9840d..2d1fde10856 100644
--- a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts
+++ b/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,
diff --git a/apps/web/src/app/admin-console/organizations/policies/policy-edit-definitions/auto-confirm-policy.component.html b/apps/web/src/app/admin-console/organizations/policies/policy-edit-definitions/auto-confirm-policy.component.html
index 54f166b662e..a8e3236dad8 100644
--- a/apps/web/src/app/admin-console/organizations/policies/policy-edit-definitions/auto-confirm-policy.component.html
+++ b/apps/web/src/app/admin-console/organizations/policies/policy-edit-definitions/auto-confirm-policy.component.html
@@ -44,7 +44,7 @@
-
- 1. {{ "autoConfirmExtension1" | i18n }}
diff --git a/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html b/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html
index ca1264829b9..0255e1a6a99 100644
--- a/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html
+++ b/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html
@@ -1,7 +1,7 @@
-
-
+
+
- {{ "creatingPasskeyLoading" | i18n }}
{{ "creatingPasskeyLoadingInfo" | i18n }}
@@ -27,7 +27,7 @@
class="tw-flex tw-flex-col tw-items-center"
>
- {{ "errorCreatingPasskey" | i18n }}
{{ "errorCreatingPasskeyInfo" | i18n }}
diff --git a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
index 4858deabec6..496ddb4ff9b 100644
--- a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
+++ b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
@@ -242,7 +242,7 @@
-
+
{{ "billingManagedByProvider" | i18n: userOrg.providerName }}
{{ "billingContactProviderForAssistance" | i18n }}
diff --git a/apps/web/src/app/billing/organizations/subscription-hidden.component.ts b/apps/web/src/app/billing/organizations/subscription-hidden.component.ts
index ef6e2dd0495..249cf999305 100644
--- a/apps/web/src/app/billing/organizations/subscription-hidden.component.ts
+++ b/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: `
-
+
{{ "billingManagedByProvider" | i18n: providerName }}
{{ "billingContactProviderForAssistance" | i18n }}
diff --git a/apps/web/src/app/billing/shared/sm-subscribe.component.html b/apps/web/src/app/billing/shared/sm-subscribe.component.html
index 6cdaeb9476d..70990d2ee4c 100644
--- a/apps/web/src/app/billing/shared/sm-subscribe.component.html
+++ b/apps/web/src/app/billing/shared/sm-subscribe.component.html
@@ -2,7 +2,7 @@
{{ "moreFromBitwarden" | i18n }}
-
diff --git a/apps/web/src/app/dirt/reports/shared/report-card/report-card.component.ts b/apps/web/src/app/dirt/reports/shared/report-card/report-card.component.ts
index 87c005ea46b..2f4934381b9 100644
--- a/apps/web/src/app/dirt/reports/shared/report-card/report-card.component.ts
+++ b/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;
diff --git a/apps/web/src/app/dirt/reports/shared/report-card/report-card.stories.ts b/apps/web/src/app/dirt/reports/shared/report-card/report-card.stories.ts
index 93ea79c8418..4f442dc9380 100644
--- a/apps/web/src/app/dirt/reports/shared/report-card/report-card.stories.ts
+++ b/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,
diff --git a/apps/web/src/app/dirt/reports/shared/report-list/report-list.stories.ts b/apps/web/src/app/dirt/reports/shared/report-list/report-list.stories.ts
index 5a95e332816..9686644bd74 100644
--- a/apps/web/src/app/dirt/reports/shared/report-list/report-list.stories.ts
+++ b/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,
diff --git a/apps/web/src/app/layouts/header/web-header.stories.ts b/apps/web/src/app/layouts/header/web-header.stories.ts
index 88c98f01e6c..3b3b28b8e45 100644
--- a/apps/web/src/app/layouts/header/web-header.stories.ts
+++ b/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,
diff --git a/apps/web/src/app/layouts/user-layout.component.ts b/apps/web/src/app/layouts/user-layout.component.ts
index 90207f59ad4..33bce661c65 100644
--- a/apps/web/src/app/layouts/user-layout.component.ts
+++ b/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,
],
})
diff --git a/apps/web/src/app/shared/components/onboarding/onboarding.stories.ts b/apps/web/src/app/shared/components/onboarding/onboarding.stories.ts
index 6d051a91f7e..6873700e2bc 100644
--- a/apps/web/src/app/shared/components/onboarding/onboarding.stories.ts
+++ b/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({
diff --git a/apps/web/src/app/shared/shared.module.ts b/apps/web/src/app/shared/shared.module.ts
index 6012e4867e1..b83555fd84e 100644
--- a/apps/web/src/app/shared/shared.module.ts
+++ b/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,
diff --git a/apps/web/src/app/tools/send/shared/send-success-drawer-dialog.component.html b/apps/web/src/app/tools/send/shared/send-success-drawer-dialog.component.html
index a484f210f62..90210df4658 100644
--- a/apps/web/src/app/tools/send/shared/send-success-drawer-dialog.component.html
+++ b/apps/web/src/app/tools/send/shared/send-success-drawer-dialog.component.html
@@ -8,7 +8,7 @@
>
-
{{ "openExtensionFromToolbarPart1" | i18n }}
-
diff --git a/apps/web/src/app/vault/components/manually-open-extension/manually-open-extension.component.ts b/apps/web/src/app/vault/components/manually-open-extension/manually-open-extension.component.ts
index 435e847f6e9..e4db0a55097 100644
--- a/apps/web/src/app/vault/components/manually-open-extension/manually-open-extension.component.ts
+++ b/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;
diff --git a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.html b/apps/web/src/app/vault/components/setup-extension/setup-extension.component.html
index 8cfd394b854..d8cd562ac61 100644
--- a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.html
+++ b/apps/web/src/app/vault/components/setup-extension/setup-extension.component.html
@@ -31,7 +31,7 @@
-
{{
diff --git a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.ts b/apps/web/src/app/vault/components/setup-extension/setup-extension.component.ts
index cfc1961c4d8..1b2c0144549 100644
--- a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.ts
+++ b/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;
JslibModule,
ButtonComponent,
LinkModule,
- IconModule,
+ SvgModule,
RouterModule,
AddExtensionVideosComponent,
ManuallyOpenExtensionComponent,
diff --git a/apps/web/src/app/vault/individual-vault/vault.component.ts b/apps/web/src/app/vault/individual-vault/vault.component.ts
index 532757852a3..b07de88baf9 100644
--- a/apps/web/src/app/vault/individual-vault/vault.component.ts
+++ b/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;
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/accept-provider.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/accept-provider.component.html
index bc209ead2bd..1a1dd5b1bbb 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/accept-provider.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/accept-provider.component.html
@@ -1,10 +1,10 @@
-
();
protected provider$: Observable;
- protected logo$: Observable;
+ protected logo$: Observable;
protected canAccessBilling$: Observable;
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup-provider.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup-provider.component.html
index cb8eaea80c3..ff148098cc6 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup-provider.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup-provider.component.html
@@ -1,10 +1,10 @@
-
-
-
+ >
}
@@ -94,11 +94,11 @@
-
+ >
}
diff --git a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/empty-state-card.component.ts b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/empty-state-card.component.ts
index 54d97e984ec..c28de5e9952 100644
--- a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/empty-state-card.component.ts
+++ b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/empty-state-card.component.ts
@@ -1,17 +1,17 @@
import { CommonModule } from "@angular/common";
import { ChangeDetectionStrategy, Component, input, isDevMode, OnInit } from "@angular/core";
-import { Icon } from "@bitwarden/assets/svg";
-import { ButtonModule, IconModule } from "@bitwarden/components";
+import { BitSvg } from "@bitwarden/assets/svg";
+import { ButtonModule, SvgModule } from "@bitwarden/components";
@Component({
selector: "empty-state-card",
templateUrl: "./empty-state-card.component.html",
- imports: [CommonModule, IconModule, ButtonModule],
+ imports: [CommonModule, SvgModule, ButtonModule],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class EmptyStateCardComponent implements OnInit {
- readonly icon = input(null);
+ readonly icon = input(null);
readonly videoSrc = input(null);
readonly title = input("");
readonly description = input("");
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/shared/org-suspended.component.ts b/bitwarden_license/bit-web/src/app/secrets-manager/shared/org-suspended.component.ts
index f2e0d48fe1d..241f02fce7e 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/shared/org-suspended.component.ts
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/shared/org-suspended.component.ts
@@ -2,7 +2,7 @@ import { Component } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { map, concatMap, firstValueFrom } from "rxjs";
-import { Icon, DeactivatedOrg } from "@bitwarden/assets/svg";
+import { BitSvg, DeactivatedOrg } from "@bitwarden/assets/svg";
import {
getOrganizationById,
OrganizationService,
@@ -23,7 +23,7 @@ export class OrgSuspendedComponent {
private route: ActivatedRoute,
) {}
- protected DeactivatedOrg: Icon = DeactivatedOrg;
+ protected DeactivatedOrg: BitSvg = DeactivatedOrg;
protected organizationName$ = this.route.params.pipe(
concatMap(async (params) => {
const userId = await firstValueFrom(getUserId(this.accountService.activeAccount$));
diff --git a/eslint.config.mjs b/eslint.config.mjs
index e8f43d4a9ea..974aaafeef6 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -207,6 +207,7 @@ export default tseslint.config(
"error",
{ ignoreIfHas: ["bitPasswordInputToggle"] },
],
+ "@bitwarden/components/no-bwi-class-usage": "warn",
},
},
diff --git a/libs/angular/src/auth/components/two-factor-icon.component.html b/libs/angular/src/auth/components/two-factor-icon.component.html
index 14558700757..555176225af 100644
--- a/libs/angular/src/auth/components/two-factor-icon.component.html
+++ b/libs/angular/src/auth/components/two-factor-icon.component.html
@@ -1,6 +1,6 @@
- ![]()
0) {
- throw new DynamicContentNotAllowedError();
- }
-
- return new Icon(strings[0]);
-}
diff --git a/libs/assets/src/svg/index.ts b/libs/assets/src/svg/index.ts
index 9f86a14f772..6a0fff490ff 100644
--- a/libs/assets/src/svg/index.ts
+++ b/libs/assets/src/svg/index.ts
@@ -1,2 +1,2 @@
export * from "./svgs";
-export * from "./icon-service";
+export * from "./svg";
diff --git a/libs/assets/src/svg/icon-service.spec.ts b/libs/assets/src/svg/svg.spec.ts
similarity index 69%
rename from libs/assets/src/svg/icon-service.spec.ts
rename to libs/assets/src/svg/svg.spec.ts
index 2561c85aefa..2d8401f0b5d 100644
--- a/libs/assets/src/svg/icon-service.spec.ts
+++ b/libs/assets/src/svg/svg.spec.ts
@@ -1,5 +1,5 @@
-import * as IconExports from "./icon-service";
-import { DynamicContentNotAllowedError, isIcon, svgIcon } from "./icon-service";
+import * as IconExports from "./svg";
+import { DynamicContentNotAllowedError, isBitSvg, svg } from "./svg";
describe("Icon", () => {
it("exports should not expose Icon class", () => {
@@ -8,13 +8,13 @@ describe("Icon", () => {
describe("isIcon", () => {
it("should return true when input is icon", () => {
- const result = isIcon(svgIcon`icon`);
+ const result = isBitSvg(svg`icon`);
expect(result).toBe(true);
});
it("should return false when input is not an icon", () => {
- const result = isIcon({ svg: "not an icon" });
+ const result = isBitSvg({ svg: "not an icon" });
expect(result).toBe(false);
});
@@ -24,13 +24,13 @@ describe("Icon", () => {
it("should throw when attempting to create dynamic icons", () => {
const dynamic = "some user input";
- const f = () => svgIcon`static and ${dynamic}`;
+ const f = () => svg`static and ${dynamic}`;
expect(f).toThrow(DynamicContentNotAllowedError);
});
it("should return svg content when supplying icon with svg string", () => {
- const icon = svgIcon`safe static content`;
+ const icon = svg`safe static content`;
expect(icon.svg).toBe("safe static content");
});
diff --git a/libs/assets/src/svg/svg.ts b/libs/assets/src/svg/svg.ts
new file mode 100644
index 00000000000..71324ea4bac
--- /dev/null
+++ b/libs/assets/src/svg/svg.ts
@@ -0,0 +1,25 @@
+class BitSvg {
+ constructor(readonly svg: string) {}
+}
+
+// We only export the type to prohibit the creation of Svgs without using
+// the `svg` template literal tag.
+export type { BitSvg };
+
+export function isBitSvg(svgContent: unknown): svgContent is BitSvg {
+ return svgContent instanceof BitSvg;
+}
+
+export class DynamicContentNotAllowedError extends Error {
+ constructor() {
+ super("Dynamic content in icons is not allowed due to risk of user-injected XSS.");
+ }
+}
+
+export function svg(strings: TemplateStringsArray, ...values: unknown[]): BitSvg {
+ if (values.length > 0) {
+ throw new DynamicContentNotAllowedError();
+ }
+
+ return new BitSvg(strings[0]);
+}
diff --git a/libs/assets/src/svg/svgs/account-warning.icon.ts b/libs/assets/src/svg/svgs/account-warning.icon.ts
index 80e29dad870..81bf62d6e64 100644
--- a/libs/assets/src/svg/svgs/account-warning.icon.ts
+++ b/libs/assets/src/svg/svgs/account-warning.icon.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";
-export const AccountWarning = svgIcon`
+export const AccountWarning = svg`
{{ provider.name }}
{{ provider.description }}
diff --git 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
index d8b2ab2508b..53ae509f182 100644
--- 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: [],
})
diff --git 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
index 5699f3dd9a4..8e8f41c394d 100644
--- 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 @@
>
- {{ "verifyWithBiometrics" | i18n }}
diff --git 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
index 296359c92ff..af73cc3de99 100644
--- 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,
diff --git a/libs/components/src/anon-layout/anon-layout-wrapper.component.ts b/libs/components/src/anon-layout/anon-layout-wrapper.component.ts
index 84140a8953a..b8f8851864b 100644
--- a/libs/components/src/anon-layout/anon-layout-wrapper.component.ts
+++ b/libs/components/src/anon-layout/anon-layout-wrapper.component.ts
@@ -3,7 +3,7 @@ import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
import { ActivatedRoute, Data, NavigationEnd, Router, RouterModule } from "@angular/router";
import { Subject, filter, of, switchMap, tap } from "rxjs";
-import { Icon } from "@bitwarden/assets/svg";
+import { BitSvg } from "@bitwarden/assets/svg";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { Translation } from "../dialog";
@@ -27,7 +27,7 @@ export interface AnonLayoutWrapperData {
/**
* The icon to display on the page. Pass null to hide the icon.
*/
- pageIcon: Icon | null;
+ pageIcon: BitSvg | null;
/**
* Optional flag to either show the optional environment selector (false) or just a readonly hostname (true).
*/
@@ -57,7 +57,7 @@ export class AnonLayoutWrapperComponent implements OnInit {
protected pageTitle?: string | null;
protected pageSubtitle?: string | null;
- protected pageIcon: Icon | null = null;
+ protected pageIcon: BitSvg | null = null;
protected showReadonlyHostname?: boolean | null;
protected maxWidth?: LandingContentMaxWidthType | null;
protected hideCardWrapper?: boolean | null;
diff --git a/libs/components/src/anon-layout/anon-layout.component.ts b/libs/components/src/anon-layout/anon-layout.component.ts
index eded556cd53..953a5e769cf 100644
--- a/libs/components/src/anon-layout/anon-layout.component.ts
+++ b/libs/components/src/anon-layout/anon-layout.component.ts
@@ -11,15 +11,15 @@ import {
import { RouterModule } from "@angular/router";
import { firstValueFrom } from "rxjs";
-import { BitwardenLogo, Icon } from "@bitwarden/assets/svg";
+import { BitwardenLogo, BitSvg } from "@bitwarden/assets/svg";
import { ClientType } from "@bitwarden/common/enums";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { IconModule } from "../icon";
import { LandingContentMaxWidthType } from "../landing-layout";
import { LandingLayoutModule } from "../landing-layout/landing-layout.module";
import { SharedModule } from "../shared";
+import { SvgModule } from "../svg";
import { TypographyModule } from "../typography";
// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
@@ -28,7 +28,7 @@ import { TypographyModule } from "../typography";
selector: "auth-anon-layout",
templateUrl: "./anon-layout.component.html",
imports: [
- IconModule,
+ SvgModule,
CommonModule,
TypographyModule,
SharedModule,
@@ -45,7 +45,7 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
readonly title = input();
readonly subtitle = input();
- readonly icon = model.required();
+ readonly icon = model.required();
readonly showReadonlyHostname = input(false);
readonly hideLogo = input(false);
readonly hideFooter = input(false);
diff --git a/libs/components/src/anon-layout/anon-layout.stories.ts b/libs/components/src/anon-layout/anon-layout.stories.ts
index 01cdc04ad73..ed6df181c85 100644
--- a/libs/components/src/anon-layout/anon-layout.stories.ts
+++ b/libs/components/src/anon-layout/anon-layout.stories.ts
@@ -2,7 +2,7 @@ import { ActivatedRoute, RouterModule } from "@angular/router";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { BehaviorSubject, of } from "rxjs";
-import { Icon, LockIcon } from "@bitwarden/assets/svg";
+import { BitSvg, LockIcon } from "@bitwarden/assets/svg";
import { ClientType } from "@bitwarden/common/enums";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -23,7 +23,7 @@ type StoryArgs = AnonLayoutComponent & {
contentLength: "normal" | "long" | "thin";
showSecondary: boolean;
useDefaultIcon: boolean;
- icon: Icon;
+ icon: BitSvg;
includeHeaderActions: boolean;
};
diff --git a/libs/components/src/callout/callout.stories.ts b/libs/components/src/callout/callout.stories.ts
index c2185203034..ff1a8c16d5f 100644
--- a/libs/components/src/callout/callout.stories.ts
+++ b/libs/components/src/callout/callout.stories.ts
@@ -1,7 +1,7 @@
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { LinkModule, IconModule } from "@bitwarden/components";
+import { LinkModule, SvgModule } from "@bitwarden/components";
import { formatArgsForCodeSnippet } from "../../../../.storybook/format-args-for-code-snippet";
import { I18nMockService } from "../utils/i18n-mock.service";
@@ -13,7 +13,7 @@ export default {
component: CalloutComponent,
decorators: [
moduleMetadata({
- imports: [LinkModule, IconModule],
+ imports: [LinkModule, SvgModule],
providers: [
{
provide: I18nService,
diff --git a/libs/components/src/header/header.stories.ts b/libs/components/src/header/header.stories.ts
index 620f39a5dc3..23c2bb2edb5 100644
--- a/libs/components/src/header/header.stories.ts
+++ b/libs/components/src/header/header.stories.ts
@@ -14,7 +14,7 @@ import {
BreadcrumbsModule,
ButtonModule,
IconButtonModule,
- IconModule,
+ SvgModule,
InputModule,
MenuModule,
NavigationModule,
@@ -40,7 +40,7 @@ export default {
BreadcrumbsModule,
ButtonModule,
IconButtonModule,
- IconModule,
+ SvgModule,
InputModule,
MenuModule,
NavigationModule,
diff --git a/libs/components/src/icon/icon.component.ts b/libs/components/src/icon/icon.component.ts
index f57a3627383..c2dc468dc71 100644
--- a/libs/components/src/icon/icon.component.ts
+++ b/libs/components/src/icon/icon.component.ts
@@ -1,35 +1,30 @@
-import { Component, effect, input } from "@angular/core";
-import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
-import { Icon, isIcon } from "@bitwarden/assets/svg";
+import { BitwardenIcon } from "../shared/icon";
-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
selector: "bit-icon",
+ standalone: true,
host: {
- "[attr.aria-hidden]": "!ariaLabel()",
+ "[class]": "classList()",
+ "[attr.aria-hidden]": "ariaLabel() ? null : true",
"[attr.aria-label]": "ariaLabel()",
- "[innerHtml]": "innerHtml",
- class: "tw-max-h-full tw-flex tw-justify-center",
},
template: ``,
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class BitIconComponent {
- innerHtml: SafeHtml | null = null;
-
- readonly icon = input();
+export class IconComponent {
+ /**
+ * The Bitwarden icon name (e.g., "bwi-lock", "bwi-user")
+ */
+ readonly name = input.required();
+ /**
+ * Accessible label for the icon
+ */
readonly ariaLabel = input();
- constructor(private domSanitizer: DomSanitizer) {
- effect(() => {
- const icon = this.icon();
- if (!isIcon(icon)) {
- return;
- }
- const svg = icon.svg;
- this.innerHtml = this.domSanitizer.bypassSecurityTrustHtml(svg);
- });
- }
+ protected readonly classList = computed(() => {
+ return ["bwi", this.name()].join(" ");
+ });
}
diff --git a/libs/components/src/icon/icon.mdx b/libs/components/src/icon/icon.mdx
index 4f6f13c895e..0914d681e59 100644
--- a/libs/components/src/icon/icon.mdx
+++ b/libs/components/src/icon/icon.mdx
@@ -8,113 +8,40 @@ import * as stories from "./icon.stories";
import { IconModule } from "@bitwarden/components";
```
-# Icon Use Instructions
+# Icon
-- Icons will generally be attached to the associated Jira task.
- - Designers should minify any SVGs before attaching them to Jira using a tool like
- [SVGOMG](https://jakearchibald.github.io/svgomg/).
- - **Note:** Ensure the "Remove viewbox" option is toggled off if responsive resizing of the icon
- is desired.
+The `bit-icon` component renders Bitwarden Web Icons (bwi) using icon font classes.
-## Developer Instructions
+## Basic Usage
-1. **Download the SVG** and import it as an `.svg` initially into the IDE of your choice.
- - The SVG should be formatted using either a built-in formatter or an external tool like
- [SVG Formatter Beautifier](https://codebeautify.org/svg-formatter-beautifier) to make applying
- classes easier.
+```html
+.icon.ts` TypeScript file and place it in the `libs/assets/svg`
- lib.
+## Icon Names
-3. **Import** `svgIcon` from `./icon-service`.
+All available icon names are defined in the `BitwardenIcon` type. Icons use the `bwi-*` naming
+convention (e.g., `bwi-lock`, `bwi-user`, `bwi-key`).
-4. **Define and export** a `const` to represent your `svgIcon`.
+## Accessibility
- ```typescript
- export const ExampleIcon = svgIcon`
{{ "passkeyAlreadyExists" | i18n }}
{{ "applicationDoesNotSupportDuplicates" | i18n }}
diff --git a/apps/desktop/src/autofill/modal/credentials/fido2-excluded-ciphers.component.ts b/apps/desktop/src/autofill/modal/credentials/fido2-excluded-ciphers.component.ts
index 049771c2252..274956be0eb 100644
--- a/apps/desktop/src/autofill/modal/credentials/fido2-excluded-ciphers.component.ts
+++ b/apps/desktop/src/autofill/modal/credentials/fido2-excluded-ciphers.component.ts
@@ -9,7 +9,7 @@ import {
BadgeModule,
ButtonModule,
DialogModule,
- IconModule,
+ SvgModule,
ItemModule,
SectionComponent,
TableModule,
@@ -32,7 +32,7 @@ import {
BitIconButtonComponent,
TableModule,
JslibModule,
- IconModule,
+ SvgModule,
ButtonModule,
DialogModule,
SectionComponent,
diff --git a/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.html b/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.html
index ed04993d09f..df9458d8b14 100644
--- a/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.html
+++ b/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.html
@@ -5,7 +5,7 @@
>
-
diff --git a/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.ts b/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.ts
index 897e825c53e..635ba3972cb 100644
--- a/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.ts
+++ b/apps/desktop/src/autofill/modal/credentials/fido2-vault.component.ts
@@ -24,7 +24,7 @@ import {
ButtonModule,
DialogModule,
DialogService,
- IconModule,
+ SvgModule,
ItemModule,
SectionComponent,
TableModule,
@@ -48,7 +48,7 @@ import {
BitIconButtonComponent,
TableModule,
JslibModule,
- IconModule,
+ SvgModule,
ButtonModule,
DialogModule,
SectionComponent,
diff --git a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts
index b00e4d9840d..2d1fde10856 100644
--- a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts
+++ b/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,
diff --git a/apps/web/src/app/admin-console/organizations/policies/policy-edit-definitions/auto-confirm-policy.component.html b/apps/web/src/app/admin-console/organizations/policies/policy-edit-definitions/auto-confirm-policy.component.html
index 54f166b662e..a8e3236dad8 100644
--- a/apps/web/src/app/admin-console/organizations/policies/policy-edit-definitions/auto-confirm-policy.component.html
+++ b/apps/web/src/app/admin-console/organizations/policies/policy-edit-definitions/auto-confirm-policy.component.html
@@ -44,7 +44,7 @@
{{ "passkeyLogin" | i18n }}
-
- 1. {{ "autoConfirmExtension1" | i18n }} diff --git a/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html b/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html index ca1264829b9..0255e1a6a99 100644 --- a/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html +++ b/apps/web/src/app/admin-console/organizations/sponsorships/accept-family-sponsorship.component.html @@ -1,7 +1,7 @@
-
-
+
+
diff --git a/apps/web/src/app/dirt/reports/shared/report-card/report-card.component.ts b/apps/web/src/app/dirt/reports/shared/report-card/report-card.component.ts
index 87c005ea46b..2f4934381b9 100644
--- a/apps/web/src/app/dirt/reports/shared/report-card/report-card.component.ts
+++ b/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;
diff --git a/apps/web/src/app/dirt/reports/shared/report-card/report-card.stories.ts b/apps/web/src/app/dirt/reports/shared/report-card/report-card.stories.ts
index 93ea79c8418..4f442dc9380 100644
--- a/apps/web/src/app/dirt/reports/shared/report-card/report-card.stories.ts
+++ b/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,
diff --git a/apps/web/src/app/dirt/reports/shared/report-list/report-list.stories.ts b/apps/web/src/app/dirt/reports/shared/report-list/report-list.stories.ts
index 5a95e332816..9686644bd74 100644
--- a/apps/web/src/app/dirt/reports/shared/report-list/report-list.stories.ts
+++ b/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,
diff --git a/apps/web/src/app/layouts/header/web-header.stories.ts b/apps/web/src/app/layouts/header/web-header.stories.ts
index 88c98f01e6c..3b3b28b8e45 100644
--- a/apps/web/src/app/layouts/header/web-header.stories.ts
+++ b/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,
diff --git a/apps/web/src/app/layouts/user-layout.component.ts b/apps/web/src/app/layouts/user-layout.component.ts
index 90207f59ad4..33bce661c65 100644
--- a/apps/web/src/app/layouts/user-layout.component.ts
+++ b/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,
],
})
diff --git a/apps/web/src/app/shared/components/onboarding/onboarding.stories.ts b/apps/web/src/app/shared/components/onboarding/onboarding.stories.ts
index 6d051a91f7e..6873700e2bc 100644
--- a/apps/web/src/app/shared/components/onboarding/onboarding.stories.ts
+++ b/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({
diff --git a/apps/web/src/app/shared/shared.module.ts b/apps/web/src/app/shared/shared.module.ts
index 6012e4867e1..b83555fd84e 100644
--- a/apps/web/src/app/shared/shared.module.ts
+++ b/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,
diff --git a/apps/web/src/app/tools/send/shared/send-success-drawer-dialog.component.html b/apps/web/src/app/tools/send/shared/send-success-drawer-dialog.component.html
index a484f210f62..90210df4658 100644
--- a/apps/web/src/app/tools/send/shared/send-success-drawer-dialog.component.html
+++ b/apps/web/src/app/tools/send/shared/send-success-drawer-dialog.component.html
@@ -8,7 +8,7 @@
>
diff --git a/apps/web/src/app/vault/components/browser-extension-prompt/browser-extension-prompt.component.ts b/apps/web/src/app/vault/components/browser-extension-prompt/browser-extension-prompt.component.ts
index 54d62b8414a..51603724c57 100644
--- a/apps/web/src/app/vault/components/browser-extension-prompt/browser-extension-prompt.component.ts
+++ b/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 {
diff --git a/apps/web/src/app/vault/components/manually-open-extension/manually-open-extension.component.html b/apps/web/src/app/vault/components/manually-open-extension/manually-open-extension.component.html
index d15cdaa712b..7da964f5fdb 100644
--- a/apps/web/src/app/vault/components/manually-open-extension/manually-open-extension.component.html
+++ b/apps/web/src/app/vault/components/manually-open-extension/manually-open-extension.component.html
@@ -1,8 +1,8 @@
{{
diff --git a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.ts b/apps/web/src/app/vault/components/setup-extension/setup-extension.component.ts
index cfc1961c4d8..1b2c0144549 100644
--- a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.ts
+++ b/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
-
{{ "creatingPasskeyLoading" | i18n }}
{{ "creatingPasskeyLoadingInfo" | i18n }}
@@ -27,7 +27,7 @@ class="tw-flex tw-flex-col tw-items-center" >
-
{{ "errorCreatingPasskey" | i18n }}
{{ "errorCreatingPasskeyInfo" | i18n }}
diff --git a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html index 4858deabec6..496ddb4ff9b 100644 --- a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html +++ b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html @@ -242,7 +242,7 @@
-
+
{{ "billingManagedByProvider" | i18n: userOrg.providerName }}
{{ "billingContactProviderForAssistance" | i18n }}
diff --git a/apps/web/src/app/billing/organizations/subscription-hidden.component.ts b/apps/web/src/app/billing/organizations/subscription-hidden.component.ts index ef6e2dd0495..249cf999305 100644 --- a/apps/web/src/app/billing/organizations/subscription-hidden.component.ts +++ b/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: `
-
+
{{ "billingManagedByProvider" | i18n: providerName }}
{{ "billingContactProviderForAssistance" | i18n }}
diff --git a/apps/web/src/app/billing/shared/sm-subscribe.component.html b/apps/web/src/app/billing/shared/sm-subscribe.component.html index 6cdaeb9476d..70990d2ee4c 100644 --- a/apps/web/src/app/billing/shared/sm-subscribe.component.html +++ b/apps/web/src/app/billing/shared/sm-subscribe.component.html @@ -2,7 +2,7 @@{{ "moreFromBitwarden" | i18n }}
-
-
+
-
{{ "openExtensionFromToolbarPart1" | i18n }}
-
-
{{
diff --git a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.ts b/apps/web/src/app/vault/components/setup-extension/setup-extension.component.ts
index cfc1961c4d8..1b2c0144549 100644
--- a/apps/web/src/app/vault/components/setup-extension/setup-extension.component.ts
+++ b/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;
JslibModule,
ButtonComponent,
LinkModule,
- IconModule,
+ SvgModule,
RouterModule,
AddExtensionVideosComponent,
ManuallyOpenExtensionComponent,
diff --git a/apps/web/src/app/vault/individual-vault/vault.component.ts b/apps/web/src/app/vault/individual-vault/vault.component.ts
index 532757852a3..b07de88baf9 100644
--- a/apps/web/src/app/vault/individual-vault/vault.component.ts
+++ b/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;
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/accept-provider.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/accept-provider.component.html
index bc209ead2bd..1a1dd5b1bbb 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/manage/accept-provider.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/manage/accept-provider.component.html
@@ -1,10 +1,10 @@
-
();
protected provider$: Observable;
- protected logo$: Observable;
+ protected logo$: Observable;
protected canAccessBilling$: Observable;
diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup-provider.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup-provider.component.html
index cb8eaea80c3..ff148098cc6 100644
--- a/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup-provider.component.html
+++ b/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup-provider.component.html
@@ -1,10 +1,10 @@
-
-
-
+ >
}
@@ -94,11 +94,11 @@
-
+ >
}
diff --git a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/empty-state-card.component.ts b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/empty-state-card.component.ts
index 54d97e984ec..c28de5e9952 100644
--- a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/empty-state-card.component.ts
+++ b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/empty-state-card.component.ts
@@ -1,17 +1,17 @@
import { CommonModule } from "@angular/common";
import { ChangeDetectionStrategy, Component, input, isDevMode, OnInit } from "@angular/core";
-import { Icon } from "@bitwarden/assets/svg";
-import { ButtonModule, IconModule } from "@bitwarden/components";
+import { BitSvg } from "@bitwarden/assets/svg";
+import { ButtonModule, SvgModule } from "@bitwarden/components";
@Component({
selector: "empty-state-card",
templateUrl: "./empty-state-card.component.html",
- imports: [CommonModule, IconModule, ButtonModule],
+ imports: [CommonModule, SvgModule, ButtonModule],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class EmptyStateCardComponent implements OnInit {
- readonly icon = input(null);
+ readonly icon = input(null);
readonly videoSrc = input(null);
readonly title = input("");
readonly description = input("");
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/shared/org-suspended.component.ts b/bitwarden_license/bit-web/src/app/secrets-manager/shared/org-suspended.component.ts
index f2e0d48fe1d..241f02fce7e 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/shared/org-suspended.component.ts
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/shared/org-suspended.component.ts
@@ -2,7 +2,7 @@ import { Component } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { map, concatMap, firstValueFrom } from "rxjs";
-import { Icon, DeactivatedOrg } from "@bitwarden/assets/svg";
+import { BitSvg, DeactivatedOrg } from "@bitwarden/assets/svg";
import {
getOrganizationById,
OrganizationService,
@@ -23,7 +23,7 @@ export class OrgSuspendedComponent {
private route: ActivatedRoute,
) {}
- protected DeactivatedOrg: Icon = DeactivatedOrg;
+ protected DeactivatedOrg: BitSvg = DeactivatedOrg;
protected organizationName$ = this.route.params.pipe(
concatMap(async (params) => {
const userId = await firstValueFrom(getUserId(this.accountService.activeAccount$));
diff --git a/eslint.config.mjs b/eslint.config.mjs
index e8f43d4a9ea..974aaafeef6 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -207,6 +207,7 @@ export default tseslint.config(
"error",
{ ignoreIfHas: ["bitPasswordInputToggle"] },
],
+ "@bitwarden/components/no-bwi-class-usage": "warn",
},
},
diff --git a/libs/angular/src/auth/components/two-factor-icon.component.html b/libs/angular/src/auth/components/two-factor-icon.component.html
index 14558700757..555176225af 100644
--- a/libs/angular/src/auth/components/two-factor-icon.component.html
+++ b/libs/angular/src/auth/components/two-factor-icon.component.html
@@ -1,6 +1,6 @@
- ![]()
0) {
- throw new DynamicContentNotAllowedError();
- }
-
- return new Icon(strings[0]);
-}
diff --git a/libs/assets/src/svg/index.ts b/libs/assets/src/svg/index.ts
index 9f86a14f772..6a0fff490ff 100644
--- a/libs/assets/src/svg/index.ts
+++ b/libs/assets/src/svg/index.ts
@@ -1,2 +1,2 @@
export * from "./svgs";
-export * from "./icon-service";
+export * from "./svg";
diff --git a/libs/assets/src/svg/icon-service.spec.ts b/libs/assets/src/svg/svg.spec.ts
similarity index 69%
rename from libs/assets/src/svg/icon-service.spec.ts
rename to libs/assets/src/svg/svg.spec.ts
index 2561c85aefa..2d8401f0b5d 100644
--- a/libs/assets/src/svg/icon-service.spec.ts
+++ b/libs/assets/src/svg/svg.spec.ts
@@ -1,5 +1,5 @@
-import * as IconExports from "./icon-service";
-import { DynamicContentNotAllowedError, isIcon, svgIcon } from "./icon-service";
+import * as IconExports from "./svg";
+import { DynamicContentNotAllowedError, isBitSvg, svg } from "./svg";
describe("Icon", () => {
it("exports should not expose Icon class", () => {
@@ -8,13 +8,13 @@ describe("Icon", () => {
describe("isIcon", () => {
it("should return true when input is icon", () => {
- const result = isIcon(svgIcon`icon`);
+ const result = isBitSvg(svg`icon`);
expect(result).toBe(true);
});
it("should return false when input is not an icon", () => {
- const result = isIcon({ svg: "not an icon" });
+ const result = isBitSvg({ svg: "not an icon" });
expect(result).toBe(false);
});
@@ -24,13 +24,13 @@ describe("Icon", () => {
it("should throw when attempting to create dynamic icons", () => {
const dynamic = "some user input";
- const f = () => svgIcon`static and ${dynamic}`;
+ const f = () => svg`static and ${dynamic}`;
expect(f).toThrow(DynamicContentNotAllowedError);
});
it("should return svg content when supplying icon with svg string", () => {
- const icon = svgIcon`safe static content`;
+ const icon = svg`safe static content`;
expect(icon.svg).toBe("safe static content");
});
diff --git a/libs/assets/src/svg/svg.ts b/libs/assets/src/svg/svg.ts
new file mode 100644
index 00000000000..71324ea4bac
--- /dev/null
+++ b/libs/assets/src/svg/svg.ts
@@ -0,0 +1,25 @@
+class BitSvg {
+ constructor(readonly svg: string) {}
+}
+
+// We only export the type to prohibit the creation of Svgs without using
+// the `svg` template literal tag.
+export type { BitSvg };
+
+export function isBitSvg(svgContent: unknown): svgContent is BitSvg {
+ return svgContent instanceof BitSvg;
+}
+
+export class DynamicContentNotAllowedError extends Error {
+ constructor() {
+ super("Dynamic content in icons is not allowed due to risk of user-injected XSS.");
+ }
+}
+
+export function svg(strings: TemplateStringsArray, ...values: unknown[]): BitSvg {
+ if (values.length > 0) {
+ throw new DynamicContentNotAllowedError();
+ }
+
+ return new BitSvg(strings[0]);
+}
diff --git a/libs/assets/src/svg/svgs/account-warning.icon.ts b/libs/assets/src/svg/svgs/account-warning.icon.ts
index 80e29dad870..81bf62d6e64 100644
--- a/libs/assets/src/svg/svgs/account-warning.icon.ts
+++ b/libs/assets/src/svg/svgs/account-warning.icon.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";
-export const AccountWarning = svgIcon`
+export const AccountWarning = svg`
{{ provider.name }}
{{ provider.description }}
diff --git 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
index d8b2ab2508b..53ae509f182 100644
--- 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: [],
})
diff --git 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
index 5699f3dd9a4..8e8f41c394d 100644
--- 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 @@
>
- {{ "verifyWithBiometrics" | i18n }}
diff --git 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
index 296359c92ff..af73cc3de99 100644
--- 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,
diff --git a/libs/components/src/anon-layout/anon-layout-wrapper.component.ts b/libs/components/src/anon-layout/anon-layout-wrapper.component.ts
index 84140a8953a..b8f8851864b 100644
--- a/libs/components/src/anon-layout/anon-layout-wrapper.component.ts
+++ b/libs/components/src/anon-layout/anon-layout-wrapper.component.ts
@@ -3,7 +3,7 @@ import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
import { ActivatedRoute, Data, NavigationEnd, Router, RouterModule } from "@angular/router";
import { Subject, filter, of, switchMap, tap } from "rxjs";
-import { Icon } from "@bitwarden/assets/svg";
+import { BitSvg } from "@bitwarden/assets/svg";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { Translation } from "../dialog";
@@ -27,7 +27,7 @@ export interface AnonLayoutWrapperData {
/**
* The icon to display on the page. Pass null to hide the icon.
*/
- pageIcon: Icon | null;
+ pageIcon: BitSvg | null;
/**
* Optional flag to either show the optional environment selector (false) or just a readonly hostname (true).
*/
@@ -57,7 +57,7 @@ export class AnonLayoutWrapperComponent implements OnInit {
protected pageTitle?: string | null;
protected pageSubtitle?: string | null;
- protected pageIcon: Icon | null = null;
+ protected pageIcon: BitSvg | null = null;
protected showReadonlyHostname?: boolean | null;
protected maxWidth?: LandingContentMaxWidthType | null;
protected hideCardWrapper?: boolean | null;
diff --git a/libs/components/src/anon-layout/anon-layout.component.ts b/libs/components/src/anon-layout/anon-layout.component.ts
index eded556cd53..953a5e769cf 100644
--- a/libs/components/src/anon-layout/anon-layout.component.ts
+++ b/libs/components/src/anon-layout/anon-layout.component.ts
@@ -11,15 +11,15 @@ import {
import { RouterModule } from "@angular/router";
import { firstValueFrom } from "rxjs";
-import { BitwardenLogo, Icon } from "@bitwarden/assets/svg";
+import { BitwardenLogo, BitSvg } from "@bitwarden/assets/svg";
import { ClientType } from "@bitwarden/common/enums";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { IconModule } from "../icon";
import { LandingContentMaxWidthType } from "../landing-layout";
import { LandingLayoutModule } from "../landing-layout/landing-layout.module";
import { SharedModule } from "../shared";
+import { SvgModule } from "../svg";
import { TypographyModule } from "../typography";
// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
@@ -28,7 +28,7 @@ import { TypographyModule } from "../typography";
selector: "auth-anon-layout",
templateUrl: "./anon-layout.component.html",
imports: [
- IconModule,
+ SvgModule,
CommonModule,
TypographyModule,
SharedModule,
@@ -45,7 +45,7 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
readonly title = input();
readonly subtitle = input();
- readonly icon = model.required();
+ readonly icon = model.required();
readonly showReadonlyHostname = input(false);
readonly hideLogo = input(false);
readonly hideFooter = input(false);
diff --git a/libs/components/src/anon-layout/anon-layout.stories.ts b/libs/components/src/anon-layout/anon-layout.stories.ts
index 01cdc04ad73..ed6df181c85 100644
--- a/libs/components/src/anon-layout/anon-layout.stories.ts
+++ b/libs/components/src/anon-layout/anon-layout.stories.ts
@@ -2,7 +2,7 @@ import { ActivatedRoute, RouterModule } from "@angular/router";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { BehaviorSubject, of } from "rxjs";
-import { Icon, LockIcon } from "@bitwarden/assets/svg";
+import { BitSvg, LockIcon } from "@bitwarden/assets/svg";
import { ClientType } from "@bitwarden/common/enums";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -23,7 +23,7 @@ type StoryArgs = AnonLayoutComponent & {
contentLength: "normal" | "long" | "thin";
showSecondary: boolean;
useDefaultIcon: boolean;
- icon: Icon;
+ icon: BitSvg;
includeHeaderActions: boolean;
};
diff --git a/libs/components/src/callout/callout.stories.ts b/libs/components/src/callout/callout.stories.ts
index c2185203034..ff1a8c16d5f 100644
--- a/libs/components/src/callout/callout.stories.ts
+++ b/libs/components/src/callout/callout.stories.ts
@@ -1,7 +1,7 @@
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { LinkModule, IconModule } from "@bitwarden/components";
+import { LinkModule, SvgModule } from "@bitwarden/components";
import { formatArgsForCodeSnippet } from "../../../../.storybook/format-args-for-code-snippet";
import { I18nMockService } from "../utils/i18n-mock.service";
@@ -13,7 +13,7 @@ export default {
component: CalloutComponent,
decorators: [
moduleMetadata({
- imports: [LinkModule, IconModule],
+ imports: [LinkModule, SvgModule],
providers: [
{
provide: I18nService,
diff --git a/libs/components/src/header/header.stories.ts b/libs/components/src/header/header.stories.ts
index 620f39a5dc3..23c2bb2edb5 100644
--- a/libs/components/src/header/header.stories.ts
+++ b/libs/components/src/header/header.stories.ts
@@ -14,7 +14,7 @@ import {
BreadcrumbsModule,
ButtonModule,
IconButtonModule,
- IconModule,
+ SvgModule,
InputModule,
MenuModule,
NavigationModule,
@@ -40,7 +40,7 @@ export default {
BreadcrumbsModule,
ButtonModule,
IconButtonModule,
- IconModule,
+ SvgModule,
InputModule,
MenuModule,
NavigationModule,
diff --git a/libs/components/src/icon/icon.component.ts b/libs/components/src/icon/icon.component.ts
index f57a3627383..c2dc468dc71 100644
--- a/libs/components/src/icon/icon.component.ts
+++ b/libs/components/src/icon/icon.component.ts
@@ -1,35 +1,30 @@
-import { Component, effect, input } from "@angular/core";
-import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
-import { Icon, isIcon } from "@bitwarden/assets/svg";
+import { BitwardenIcon } from "../shared/icon";
-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
selector: "bit-icon",
+ standalone: true,
host: {
- "[attr.aria-hidden]": "!ariaLabel()",
+ "[class]": "classList()",
+ "[attr.aria-hidden]": "ariaLabel() ? null : true",
"[attr.aria-label]": "ariaLabel()",
- "[innerHtml]": "innerHtml",
- class: "tw-max-h-full tw-flex tw-justify-center",
},
template: ``,
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class BitIconComponent {
- innerHtml: SafeHtml | null = null;
-
- readonly icon = input();
+export class IconComponent {
+ /**
+ * The Bitwarden icon name (e.g., "bwi-lock", "bwi-user")
+ */
+ readonly name = input.required();
+ /**
+ * Accessible label for the icon
+ */
readonly ariaLabel = input();
- constructor(private domSanitizer: DomSanitizer) {
- effect(() => {
- const icon = this.icon();
- if (!isIcon(icon)) {
- return;
- }
- const svg = icon.svg;
- this.innerHtml = this.domSanitizer.bypassSecurityTrustHtml(svg);
- });
- }
+ protected readonly classList = computed(() => {
+ return ["bwi", this.name()].join(" ");
+ });
}
diff --git a/libs/components/src/icon/icon.mdx b/libs/components/src/icon/icon.mdx
index 4f6f13c895e..0914d681e59 100644
--- a/libs/components/src/icon/icon.mdx
+++ b/libs/components/src/icon/icon.mdx
@@ -8,113 +8,40 @@ import * as stories from "./icon.stories";
import { IconModule } from "@bitwarden/components";
```
-# Icon Use Instructions
+# Icon
-- Icons will generally be attached to the associated Jira task.
- - Designers should minify any SVGs before attaching them to Jira using a tool like
- [SVGOMG](https://jakearchibald.github.io/svgomg/).
- - **Note:** Ensure the "Remove viewbox" option is toggled off if responsive resizing of the icon
- is desired.
+The `bit-icon` component renders Bitwarden Web Icons (bwi) using icon font classes.
-## Developer Instructions
+## Basic Usage
-1. **Download the SVG** and import it as an `.svg` initially into the IDE of your choice.
- - The SVG should be formatted using either a built-in formatter or an external tool like
- [SVG Formatter Beautifier](https://codebeautify.org/svg-formatter-beautifier) to make applying
- classes easier.
+```html
+.icon.ts` TypeScript file and place it in the `libs/assets/svg`
- lib.
+## Icon Names
-3. **Import** `svgIcon` from `./icon-service`.
+All available icon names are defined in the `BitwardenIcon` type. Icons use the `bwi-*` naming
+convention (e.g., `bwi-lock`, `bwi-user`, `bwi-key`).
-4. **Define and export** a `const` to represent your `svgIcon`.
+## Accessibility
- ```typescript
- export const ExampleIcon = svgIcon`
-
{{ provider.name }}
();
protected provider$: Observable
-
+ >
diff --git a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/empty-state-card.component.ts b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/empty-state-card.component.ts
index 54d97e984ec..c28de5e9952 100644
--- a/bitwarden_license/bit-web/src/app/dirt/access-intelligence/empty-state-card.component.ts
+++ b/bitwarden_license/bit-web/src/app/dirt/access-intelligence/empty-state-card.component.ts
@@ -1,17 +1,17 @@
import { CommonModule } from "@angular/common";
import { ChangeDetectionStrategy, Component, input, isDevMode, OnInit } from "@angular/core";
-import { Icon } from "@bitwarden/assets/svg";
-import { ButtonModule, IconModule } from "@bitwarden/components";
+import { BitSvg } from "@bitwarden/assets/svg";
+import { ButtonModule, SvgModule } from "@bitwarden/components";
@Component({
selector: "empty-state-card",
templateUrl: "./empty-state-card.component.html",
- imports: [CommonModule, IconModule, ButtonModule],
+ imports: [CommonModule, SvgModule, ButtonModule],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class EmptyStateCardComponent implements OnInit {
- readonly icon = input
-
@@ -94,11 +94,11 @@
-
}
-
+ >
}
-
0) {
- throw new DynamicContentNotAllowedError();
- }
-
- return new Icon(strings[0]);
-}
diff --git a/libs/assets/src/svg/index.ts b/libs/assets/src/svg/index.ts
index 9f86a14f772..6a0fff490ff 100644
--- a/libs/assets/src/svg/index.ts
+++ b/libs/assets/src/svg/index.ts
@@ -1,2 +1,2 @@
export * from "./svgs";
-export * from "./icon-service";
+export * from "./svg";
diff --git a/libs/assets/src/svg/icon-service.spec.ts b/libs/assets/src/svg/svg.spec.ts
similarity index 69%
rename from libs/assets/src/svg/icon-service.spec.ts
rename to libs/assets/src/svg/svg.spec.ts
index 2561c85aefa..2d8401f0b5d 100644
--- a/libs/assets/src/svg/icon-service.spec.ts
+++ b/libs/assets/src/svg/svg.spec.ts
@@ -1,5 +1,5 @@
-import * as IconExports from "./icon-service";
-import { DynamicContentNotAllowedError, isIcon, svgIcon } from "./icon-service";
+import * as IconExports from "./svg";
+import { DynamicContentNotAllowedError, isBitSvg, svg } from "./svg";
describe("Icon", () => {
it("exports should not expose Icon class", () => {
@@ -8,13 +8,13 @@ describe("Icon", () => {
describe("isIcon", () => {
it("should return true when input is icon", () => {
- const result = isIcon(svgIcon`icon`);
+ const result = isBitSvg(svg`icon`);
expect(result).toBe(true);
});
it("should return false when input is not an icon", () => {
- const result = isIcon({ svg: "not an icon" });
+ const result = isBitSvg({ svg: "not an icon" });
expect(result).toBe(false);
});
@@ -24,13 +24,13 @@ describe("Icon", () => {
it("should throw when attempting to create dynamic icons", () => {
const dynamic = "some user input";
- const f = () => svgIcon`static and ${dynamic}`;
+ const f = () => svg`static and ${dynamic}`;
expect(f).toThrow(DynamicContentNotAllowedError);
});
it("should return svg content when supplying icon with svg string", () => {
- const icon = svgIcon`safe static content`;
+ const icon = svg`safe static content`;
expect(icon.svg).toBe("safe static content");
});
diff --git a/libs/assets/src/svg/svg.ts b/libs/assets/src/svg/svg.ts
new file mode 100644
index 00000000000..71324ea4bac
--- /dev/null
+++ b/libs/assets/src/svg/svg.ts
@@ -0,0 +1,25 @@
+class BitSvg {
+ constructor(readonly svg: string) {}
+}
+
+// We only export the type to prohibit the creation of Svgs without using
+// the `svg` template literal tag.
+export type { BitSvg };
+
+export function isBitSvg(svgContent: unknown): svgContent is BitSvg {
+ return svgContent instanceof BitSvg;
+}
+
+export class DynamicContentNotAllowedError extends Error {
+ constructor() {
+ super("Dynamic content in icons is not allowed due to risk of user-injected XSS.");
+ }
+}
+
+export function svg(strings: TemplateStringsArray, ...values: unknown[]): BitSvg {
+ if (values.length > 0) {
+ throw new DynamicContentNotAllowedError();
+ }
+
+ return new BitSvg(strings[0]);
+}
diff --git a/libs/assets/src/svg/svgs/account-warning.icon.ts b/libs/assets/src/svg/svgs/account-warning.icon.ts
index 80e29dad870..81bf62d6e64 100644
--- a/libs/assets/src/svg/svgs/account-warning.icon.ts
+++ b/libs/assets/src/svg/svgs/account-warning.icon.ts
@@ -1,6 +1,6 @@
-import { svgIcon } from "../icon-service";
+import { svg } from "../svg";
-export const AccountWarning = svgIcon`
+export const AccountWarning = svg`
-
{{ "verifyWithBiometrics" | i18n }}
diff --git 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
index 296359c92ff..af73cc3de99 100644
--- 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,
diff --git a/libs/components/src/anon-layout/anon-layout-wrapper.component.ts b/libs/components/src/anon-layout/anon-layout-wrapper.component.ts
index 84140a8953a..b8f8851864b 100644
--- a/libs/components/src/anon-layout/anon-layout-wrapper.component.ts
+++ b/libs/components/src/anon-layout/anon-layout-wrapper.component.ts
@@ -3,7 +3,7 @@ import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
import { ActivatedRoute, Data, NavigationEnd, Router, RouterModule } from "@angular/router";
import { Subject, filter, of, switchMap, tap } from "rxjs";
-import { Icon } from "@bitwarden/assets/svg";
+import { BitSvg } from "@bitwarden/assets/svg";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { Translation } from "../dialog";
@@ -27,7 +27,7 @@ export interface AnonLayoutWrapperData {
/**
* The icon to display on the page. Pass null to hide the icon.
*/
- pageIcon: Icon | null;
+ pageIcon: BitSvg | null;
/**
* Optional flag to either show the optional environment selector (false) or just a readonly hostname (true).
*/
@@ -57,7 +57,7 @@ export class AnonLayoutWrapperComponent implements OnInit {
protected pageTitle?: string | null;
protected pageSubtitle?: string | null;
- protected pageIcon: Icon | null = null;
+ protected pageIcon: BitSvg | null = null;
protected showReadonlyHostname?: boolean | null;
protected maxWidth?: LandingContentMaxWidthType | null;
protected hideCardWrapper?: boolean | null;
diff --git a/libs/components/src/anon-layout/anon-layout.component.ts b/libs/components/src/anon-layout/anon-layout.component.ts
index eded556cd53..953a5e769cf 100644
--- a/libs/components/src/anon-layout/anon-layout.component.ts
+++ b/libs/components/src/anon-layout/anon-layout.component.ts
@@ -11,15 +11,15 @@ import {
import { RouterModule } from "@angular/router";
import { firstValueFrom } from "rxjs";
-import { BitwardenLogo, Icon } from "@bitwarden/assets/svg";
+import { BitwardenLogo, BitSvg } from "@bitwarden/assets/svg";
import { ClientType } from "@bitwarden/common/enums";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { IconModule } from "../icon";
import { LandingContentMaxWidthType } from "../landing-layout";
import { LandingLayoutModule } from "../landing-layout/landing-layout.module";
import { SharedModule } from "../shared";
+import { SvgModule } from "../svg";
import { TypographyModule } from "../typography";
// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
@@ -28,7 +28,7 @@ import { TypographyModule } from "../typography";
selector: "auth-anon-layout",
templateUrl: "./anon-layout.component.html",
imports: [
- IconModule,
+ SvgModule,
CommonModule,
TypographyModule,
SharedModule,
@@ -45,7 +45,7 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
readonly title = input();
readonly subtitle = input();
- readonly icon = model.required();
+ readonly icon = model.required();
readonly showReadonlyHostname = input(false);
readonly hideLogo = input(false);
readonly hideFooter = input(false);
diff --git a/libs/components/src/anon-layout/anon-layout.stories.ts b/libs/components/src/anon-layout/anon-layout.stories.ts
index 01cdc04ad73..ed6df181c85 100644
--- a/libs/components/src/anon-layout/anon-layout.stories.ts
+++ b/libs/components/src/anon-layout/anon-layout.stories.ts
@@ -2,7 +2,7 @@ import { ActivatedRoute, RouterModule } from "@angular/router";
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { BehaviorSubject, of } from "rxjs";
-import { Icon, LockIcon } from "@bitwarden/assets/svg";
+import { BitSvg, LockIcon } from "@bitwarden/assets/svg";
import { ClientType } from "@bitwarden/common/enums";
import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -23,7 +23,7 @@ type StoryArgs = AnonLayoutComponent & {
contentLength: "normal" | "long" | "thin";
showSecondary: boolean;
useDefaultIcon: boolean;
- icon: Icon;
+ icon: BitSvg;
includeHeaderActions: boolean;
};
diff --git a/libs/components/src/callout/callout.stories.ts b/libs/components/src/callout/callout.stories.ts
index c2185203034..ff1a8c16d5f 100644
--- a/libs/components/src/callout/callout.stories.ts
+++ b/libs/components/src/callout/callout.stories.ts
@@ -1,7 +1,7 @@
import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { LinkModule, IconModule } from "@bitwarden/components";
+import { LinkModule, SvgModule } from "@bitwarden/components";
import { formatArgsForCodeSnippet } from "../../../../.storybook/format-args-for-code-snippet";
import { I18nMockService } from "../utils/i18n-mock.service";
@@ -13,7 +13,7 @@ export default {
component: CalloutComponent,
decorators: [
moduleMetadata({
- imports: [LinkModule, IconModule],
+ imports: [LinkModule, SvgModule],
providers: [
{
provide: I18nService,
diff --git a/libs/components/src/header/header.stories.ts b/libs/components/src/header/header.stories.ts
index 620f39a5dc3..23c2bb2edb5 100644
--- a/libs/components/src/header/header.stories.ts
+++ b/libs/components/src/header/header.stories.ts
@@ -14,7 +14,7 @@ import {
BreadcrumbsModule,
ButtonModule,
IconButtonModule,
- IconModule,
+ SvgModule,
InputModule,
MenuModule,
NavigationModule,
@@ -40,7 +40,7 @@ export default {
BreadcrumbsModule,
ButtonModule,
IconButtonModule,
- IconModule,
+ SvgModule,
InputModule,
MenuModule,
NavigationModule,
diff --git a/libs/components/src/icon/icon.component.ts b/libs/components/src/icon/icon.component.ts
index f57a3627383..c2dc468dc71 100644
--- a/libs/components/src/icon/icon.component.ts
+++ b/libs/components/src/icon/icon.component.ts
@@ -1,35 +1,30 @@
-import { Component, effect, input } from "@angular/core";
-import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
-import { Icon, isIcon } from "@bitwarden/assets/svg";
+import { BitwardenIcon } from "../shared/icon";
-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
@Component({
selector: "bit-icon",
+ standalone: true,
host: {
- "[attr.aria-hidden]": "!ariaLabel()",
+ "[class]": "classList()",
+ "[attr.aria-hidden]": "ariaLabel() ? null : true",
"[attr.aria-label]": "ariaLabel()",
- "[innerHtml]": "innerHtml",
- class: "tw-max-h-full tw-flex tw-justify-center",
},
template: ``,
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class BitIconComponent {
- innerHtml: SafeHtml | null = null;
-
- readonly icon = input();
+export class IconComponent {
+ /**
+ * The Bitwarden icon name (e.g., "bwi-lock", "bwi-user")
+ */
+ readonly name = input.required();
+ /**
+ * Accessible label for the icon
+ */
readonly ariaLabel = input();
- constructor(private domSanitizer: DomSanitizer) {
- effect(() => {
- const icon = this.icon();
- if (!isIcon(icon)) {
- return;
- }
- const svg = icon.svg;
- this.innerHtml = this.domSanitizer.bypassSecurityTrustHtml(svg);
- });
- }
+ protected readonly classList = computed(() => {
+ return ["bwi", this.name()].join(" ");
+ });
}
diff --git a/libs/components/src/icon/icon.mdx b/libs/components/src/icon/icon.mdx
index 4f6f13c895e..0914d681e59 100644
--- a/libs/components/src/icon/icon.mdx
+++ b/libs/components/src/icon/icon.mdx
@@ -8,113 +8,40 @@ import * as stories from "./icon.stories";
import { IconModule } from "@bitwarden/components";
```
-# Icon Use Instructions
+# Icon
-- Icons will generally be attached to the associated Jira task.
- - Designers should minify any SVGs before attaching them to Jira using a tool like
- [SVGOMG](https://jakearchibald.github.io/svgomg/).
- - **Note:** Ensure the "Remove viewbox" option is toggled off if responsive resizing of the icon
- is desired.
+The `bit-icon` component renders Bitwarden Web Icons (bwi) using icon font classes.
-## Developer Instructions
+## Basic Usage
-1. **Download the SVG** and import it as an `.svg` initially into the IDE of your choice.
- - The SVG should be formatted using either a built-in formatter or an external tool like
- [SVG Formatter Beautifier](https://codebeautify.org/svg-formatter-beautifier) to make applying
- classes easier.
+```html
+.icon.ts` TypeScript file and place it in the `libs/assets/svg`
- lib.
+## Icon Names
-3. **Import** `svgIcon` from `./icon-service`.
+All available icon names are defined in the `BitwardenIcon` type. Icons use the `bwi-*` naming
+convention (e.g., `bwi-lock`, `bwi-user`, `bwi-key`).
-4. **Define and export** a `const` to represent your `svgIcon`.
+## Accessibility
- ```typescript
- export const ExampleIcon = svgIcon`