[CL-573] Move all svg icons to new libs/assets (#16020)

* create libs/assets

* treeshake lib and filter out non-icons from icon story

* update docs

* fix icon colors in browser and desktop

* better name for vault icon

* move illustrations

apps/browser/src/autofill/popup/fido2/fido2.component.ts

@@ -18,6 +18,7 @@ import {
 } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { NoResults } from "@bitwarden/assets/svg";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
 import { DomainSettingsService } from "@bitwarden/common/autofill/services/domain-settings.service";
@@ -36,7 +37,6 @@ import { SecureNoteView } from "@bitwarden/common/vault/models/view/secure-note.
 import {
   ButtonModule,
   DialogService,
-  Icons,
   ItemModule,
   NoItemsModule,
   SearchModule,
@@ -102,7 +102,7 @@ export class Fido2Component implements OnInit, OnDestroy {
   protected equivalentDomainsURL: string;
   protected hostname: string;
   protected loading = false;
-  protected noResultsIcon = Icons.NoResults;
+  protected noResultsIcon = NoResults;
   protected passkeyAction: PasskeyActionValue = PasskeyActions.Register;
   protected PasskeyActions = PasskeyActions;
   protected hasSearched = false;

apps/browser/src/platform/popup/layout/popup-layout.stories.ts

@@ -4,6 +4,16 @@ import { Component, importProvidersFrom } from "@angular/core";
 import { RouterModule } from "@angular/router";
 import { Meta, StoryObj, applicationConfig, moduleMetadata } from "@storybook/angular";
 
+import {
+  GeneratorActive,
+  GeneratorInactive,
+  SendActive,
+  SendInactive,
+  SettingsActive,
+  SettingsInactive,
+  VaultActive,
+  VaultInactive,
+} from "@bitwarden/assets/svg";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { SendService } from "@bitwarden/common/tools/send/services/send.service.abstraction";
@@ -13,7 +23,6 @@ import {
   BannerModule,
   ButtonModule,
   I18nMockService,
-  Icons,
   IconButtonModule,
   ItemModule,
   NoItemsModule,
@@ -404,26 +413,26 @@ const navButtons = (showBerry = false) => [
   {
     label: "vault",
     page: "/tabs/vault",
-    icon: Icons.VaultInactive,
-    iconActive: Icons.VaultActive,
+    icon: VaultInactive,
+    iconActive: VaultActive,
   },
   {
     label: "generator",
     page: "/tabs/generator",
-    icon: Icons.GeneratorInactive,
-    iconActive: Icons.GeneratorActive,
+    icon: GeneratorInactive,
+    iconActive: GeneratorActive,
   },
   {
     label: "send",
     page: "/tabs/send",
-    icon: Icons.SendInactive,
-    iconActive: Icons.SendActive,
+    icon: SendInactive,
+    iconActive: SendActive,
   },
   {
     label: "settings",
     page: "/tabs/settings",
-    icon: Icons.SettingsInactive,
-    iconActive: Icons.SettingsActive,
+    icon: SettingsInactive,
+    iconActive: SettingsActive,
     showBerry: showBerry,
   },
 ];

apps/browser/src/platform/popup/layout/popup-tab-navigation.component.ts

@@ -3,8 +3,9 @@ import { Component, Input } from "@angular/core";
 import { RouterModule } from "@angular/router";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { Icon } from "@bitwarden/assets/svg";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import { Icon, IconModule, LinkModule } from "@bitwarden/components";
+import { IconModule, LinkModule } from "@bitwarden/components";
 
 export type NavButton = {
   label: string;

apps/browser/src/popup/app-routing.module.ts

@@ -17,28 +17,31 @@ import { SetInitialPasswordComponent } from "@bitwarden/angular/auth/password-ma
 import { canAccessFeature } from "@bitwarden/angular/platform/guard/feature-flag.guard";
 import {
   DevicesIcon,
+  RegistrationLockAltIcon,
+  RegistrationUserAddIcon,
+  TwoFactorTimeoutIcon,
+  DeviceVerificationIcon,
+  UserLockIcon,
+  VaultIcon,
+  LockIcon,
+} from "@bitwarden/assets/svg";
+import {
   LoginComponent,
   LoginDecryptionOptionsComponent,
   LoginSecondaryContentComponent,
   LoginViaAuthRequestComponent,
   PasswordHintComponent,
   RegistrationFinishComponent,
-  RegistrationLockAltIcon,
   RegistrationStartComponent,
   RegistrationStartSecondaryComponent,
   RegistrationStartSecondaryComponentData,
-  RegistrationUserAddIcon,
   SsoComponent,
-  TwoFactorTimeoutIcon,
   TwoFactorAuthComponent,
   TwoFactorAuthGuard,
   NewDeviceVerificationComponent,
-  DeviceVerificationIcon,
-  UserLockIcon,
-  VaultIcon,
 } from "@bitwarden/auth/angular";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
-import { AnonLayoutWrapperData, Icons } from "@bitwarden/components";
+import { AnonLayoutWrapperData } from "@bitwarden/components";
 import { LockComponent } from "@bitwarden/key-management-ui";
 
 import { AccountSwitcherComponent } from "../auth/popup/account-switching/account-switcher.component";
@@ -497,7 +500,7 @@ const routes: Routes = [
         path: "lock",
         canActivate: [lockGuard()],
         data: {
-          pageIcon: Icons.LockIcon,
+          pageIcon: LockIcon,
           pageTitle: {
             key: "yourVaultIsLockedV2",
           },

apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts

@@ -5,10 +5,9 @@ import { Component, OnDestroy, OnInit } from "@angular/core";
 import { ActivatedRoute, Data, NavigationEnd, Router, RouterModule } from "@angular/router";
 import { Subject, filter, switchMap, takeUntil, tap } from "rxjs";
 
+import { ExtensionBitwardenLogo, Icon } from "@bitwarden/assets/svg";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import {
-  Icon,
-  Icons,
   IconModule,
   Translation,
   AnonLayoutComponent,
@@ -63,7 +62,7 @@ export class ExtensionAnonLayoutWrapperComponent implements OnInit, OnDestroy {
   protected hideCardWrapper: boolean = false;
 
   protected theme: string;
-  protected logo = Icons.ExtensionBitwardenLogo;
+  protected logo = ExtensionBitwardenLogo;
 
   constructor(
     private router: Router,

apps/browser/src/popup/components/extension-anon-layout-wrapper/extension-anon-layout-wrapper.stories.ts

@@ -9,6 +9,7 @@ import {
 } from "@storybook/angular";
 import { of } from "rxjs";
 
+import { LockIcon, RegistrationCheckEmailIcon } from "@bitwarden/assets/svg";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service";
 import { AvatarService } from "@bitwarden/common/auth/abstractions/avatar.service";
@@ -22,12 +23,7 @@ import {
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { UserId } from "@bitwarden/common/types/guid";
-import {
-  AnonLayoutWrapperDataService,
-  ButtonModule,
-  Icons,
-  I18nMockService,
-} from "@bitwarden/components";
+import { AnonLayoutWrapperDataService, ButtonModule, I18nMockService } from "@bitwarden/components";
 
 import { AccountSwitcherService } from "../../../auth/popup/account-switching/services/account-switcher.service";
 import { PopupRouterCacheService } from "../../../platform/popup/view-cache/popup-router-cache.service";
@@ -244,7 +240,7 @@ const initialData: ExtensionAnonLayoutWrapperData = {
   pageSubtitle: {
     key: "finishCreatingYourAccountBySettingAPassword",
   },
-  pageIcon: Icons.LockIcon,
+  pageIcon: LockIcon,
   showAcctSwitcher: true,
   showBackButton: true,
   showLogo: true,
@@ -258,7 +254,7 @@ const changedData: ExtensionAnonLayoutWrapperData = {
   pageSubtitle: {
     key: "checkYourEmail",
   },
-  pageIcon: Icons.RegistrationCheckEmailIcon,
+  pageIcon: RegistrationCheckEmailIcon,
   showAcctSwitcher: false,
   showBackButton: false,
   showLogo: false,

apps/browser/src/popup/tabs-v2.component.ts

@@ -2,9 +2,18 @@ import { Component } from "@angular/core";
 import { map, Observable, startWith, switchMap } from "rxjs";
 
 import { NudgesService } from "@bitwarden/angular/vault";
+import {
+  VaultInactive,
+  VaultActive,
+  GeneratorInactive,
+  GeneratorActive,
+  SendInactive,
+  SendActive,
+  SettingsInactive,
+  SettingsActive,
+} from "@bitwarden/assets/svg";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
-import { Icons } from "@bitwarden/components";
 
 import { NavButton } from "../platform/popup/layout/popup-tab-navigation.component";
 
@@ -24,26 +33,26 @@ export class TabsV2Component {
         {
           label: "vault",
           page: "/tabs/vault",
-          icon: Icons.VaultInactive,
-          iconActive: Icons.VaultActive,
+          icon: VaultInactive,
+          iconActive: VaultActive,
         },
         {
           label: "generator",
           page: "/tabs/generator",
-          icon: Icons.GeneratorInactive,
-          iconActive: Icons.GeneratorActive,
+          icon: GeneratorInactive,
+          iconActive: GeneratorActive,
         },
         {
           label: "send",
           page: "/tabs/send",
-          icon: Icons.SendInactive,
-          iconActive: Icons.SendActive,
+          icon: SendInactive,
+          iconActive: SendActive,
         },
         {
           label: "settings",
           page: "/tabs/settings",
-          icon: Icons.SettingsInactive,
-          iconActive: Icons.SettingsActive,
+          icon: SettingsInactive,
+          iconActive: SettingsActive,
           showBerry: hasBadges,
         },
       ];

apps/browser/src/tools/popup/send-v2/send-created/send-created.component.ts

@@ -7,13 +7,13 @@ import { ActivatedRoute, Router, RouterModule } from "@angular/router";
 import { firstValueFrom } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { ActiveSendIcon } from "@bitwarden/assets/svg";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 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 { ActiveSendIcon } from "@bitwarden/send-ui";
 
 import { PopOutComponent } from "../../../../platform/popup/components/pop-out.component";
 import { PopupFooterComponent } from "../../../../platform/popup/layout/popup-footer.component";

apps/browser/src/tools/popup/send-v2/send-v2.component.ts

@@ -4,15 +4,15 @@ import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { combineLatest, switchMap } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { NoResults, NoSendsIcon } from "@bitwarden/assets/svg";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
 import { SendType } from "@bitwarden/common/tools/send/enums/send-type";
-import { ButtonModule, CalloutModule, Icons, NoItemsModule } from "@bitwarden/components";
+import { ButtonModule, CalloutModule, NoItemsModule } from "@bitwarden/components";
 import {
   NewSendDropdownComponent,
-  NoSendsIcon,
   SendItemsService,
   SendListFiltersComponent,
   SendListFiltersService,
@@ -59,7 +59,7 @@ export class SendV2Component implements OnDestroy {
   protected sendsLoading$ = this.sendItemsService.loading$;
   protected title: string = "allSends";
   protected noItemIcon = NoSendsIcon;
-  protected noResultsIcon = Icons.NoResults;
+  protected noResultsIcon = NoResults;
 
   protected sendsDisabled = false;
 

apps/browser/src/vault/popup/components/vault-v2/intro-carousel/intro-carousel.component.ts

@@ -2,9 +2,10 @@ import { Component } from "@angular/core";
 import { Router } from "@angular/router";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { SecurityHandshake, LoginCards, SecureUser, SecureDevices } from "@bitwarden/assets/svg";
 import { ButtonModule, DialogModule, IconModule, TypographyModule } from "@bitwarden/components";
 import { I18nPipe } from "@bitwarden/ui-common";
-import { VaultCarouselModule, VaultIcons } from "@bitwarden/vault";
+import { VaultCarouselModule } from "@bitwarden/vault";
 
 import { IntroCarouselService } from "../../../services/intro-carousel.service";
 
@@ -22,10 +23,10 @@ import { IntroCarouselService } from "../../../services/intro-carousel.service";
   ],
 })
 export class IntroCarouselComponent {
-  protected securityHandshake = VaultIcons.SecurityHandshake;
-  protected loginCards = VaultIcons.LoginCards;
-  protected secureUser = VaultIcons.SecureUser;
-  protected secureDevices = VaultIcons.SecureDevices;
+  protected securityHandshake = SecurityHandshake;
+  protected loginCards = LoginCards;
+  protected secureUser = SecureUser;
+  protected secureDevices = SecureDevices;
 
   constructor(
     private router: Router,

apps/browser/src/vault/popup/components/vault-v2/vault-v2.component.ts

@@ -18,6 +18,7 @@ import {
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { NudgesService, NudgeType } from "@bitwarden/angular/vault";
 import { SpotlightComponent } from "@bitwarden/angular/vault/components/spotlight/spotlight.component";
+import { DeactivatedOrg, NoResults, VaultOpen } from "@bitwarden/assets/svg";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
@@ -28,11 +29,10 @@ import { UnionOfValues } from "@bitwarden/common/vault/types/union-of-values";
 import {
   ButtonModule,
   DialogService,
-  Icons,
   NoItemsModule,
   TypographyModule,
 } from "@bitwarden/components";
-import { DecryptionFailureDialogComponent, VaultIcons } from "@bitwarden/vault";
+import { DecryptionFailureDialogComponent } from "@bitwarden/vault";
 
 import { CurrentAccountComponent } from "../../../../auth/popup/account-switching/current-account.component";
 import { BrowserApi } from "../../../../platform/browser/browser-api";
@@ -136,9 +136,9 @@ export class VaultV2Component implements OnInit, AfterViewInit, OnDestroy {
   /** Visual state of the vault */
   protected vaultState: VaultState | null = null;
 
-  protected vaultIcon = VaultIcons.Vault;
-  protected deactivatedIcon = VaultIcons.DeactivatedOrg;
-  protected noResultsIcon = Icons.NoResults;
+  protected vaultIcon = VaultOpen;
+  protected deactivatedIcon = DeactivatedOrg;
+  protected noResultsIcon = NoResults;
 
   protected VaultStateEnum = VaultState;
 

apps/browser/src/vault/popup/settings/folders-v2.component.ts

@@ -3,6 +3,7 @@ import { Component } from "@angular/core";
 import { filter, map, Observable, switchMap } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { NoFolders } from "@bitwarden/assets/svg";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { UserId } from "@bitwarden/common/types/guid";
 import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
@@ -15,7 +16,7 @@ import {
   ItemModule,
   NoItemsModule,
 } from "@bitwarden/components";
-import { AddEditFolderDialogComponent, VaultIcons } from "@bitwarden/vault";
+import { AddEditFolderDialogComponent } from "@bitwarden/vault";
 
 import { PopOutComponent } from "../../../platform/popup/components/pop-out.component";
 import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
@@ -39,7 +40,7 @@ import { PopupPageComponent } from "../../../platform/popup/layout/popup-page.co
 export class FoldersV2Component {
   folders$: Observable<FolderView[]>;
 
-  NoFoldersIcon = VaultIcons.NoFolders;
+  NoFoldersIcon = NoFolders;
   private activeUserId$ = this.accountService.activeAccount$.pipe(map((a) => a?.id));
 
   constructor(

apps/browser/src/vault/popup/settings/trash.component.ts

@@ -2,8 +2,8 @@ import { CommonModule } from "@angular/common";
 import { ChangeDetectionStrategy, Component } from "@angular/core";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { EmptyTrash } from "@bitwarden/assets/svg";
 import { CalloutModule, NoItemsModule } from "@bitwarden/components";
-import { VaultIcons } from "@bitwarden/vault";
 
 import { PopOutComponent } from "../../../platform/popup/components/pop-out.component";
 import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
@@ -29,7 +29,7 @@ import { TrashListItemsContainerComponent } from "./trash-list-items-container/t
 export class TrashComponent {
   protected deletedCiphers$ = this.vaultPopupItemsService.deletedCiphers$;
 
-  protected emptyTrashIcon = VaultIcons.EmptyTrash;
+  protected emptyTrashIcon = EmptyTrash;
 
   constructor(private vaultPopupItemsService: VaultPopupItemsService) {}
 }

apps/browser/tailwind.config.js

@@ -4,6 +4,7 @@ const config = require("../../libs/components/tailwind.config.base");
 config.content = [
   "./src/**/*.{html,ts}",
   "../../libs/components/src/**/*.{html,ts}",
+  "../../libs/assets/src/**/*.{html,ts}",
   "../../libs/auth/src/**/*.{html,ts}",
   "../../libs/key-management-ui/src/**/*.{html,ts}",
   "../../libs/vault/src/**/*.{html,ts}",