Merge pull request #20543 from overleaf/gtm-cms-icons

[web] Implement "Element | Icon" content type in CMS

GitOrigin-RevId: 369eed94d9306ef6fe5c974bb72231c8fb0b5560

services/web/frontend/stylesheets/bootstrap-5/components/all.scss

@@ -10,6 +10,7 @@
 @import 'card';
 @import 'badge';
 @import 'form';
+@import 'icon';
 @import 'input-suggestions';
 @import 'list';
 @import 'modal';

services/web/frontend/stylesheets/bootstrap-5/components/icon.scss

@@ -0,0 +1,20 @@
+.icon-double-green-round-background {
+  border-radius: 50%;
+  background: var(--green-30);
+  color: var(--dark-jungle-green);
+  display: inline-flex;
+  border: var(--spacing-04) solid var(--green-10);
+  padding: var(--spacing-04);
+
+  i {
+    font-size: 24px;
+  }
+}
+
+.icon-large-purple-text {
+  color: var(--sapphire-blue);
+
+  i {
+    font-size: 50px;
+  }
+}

services/web/types/cms.ts

@@ -0,0 +1,40 @@
+export type IconElementMaterial =
+  | 'add_notes'
+  | 'assured_workload'
+  | 'biotech'
+  | 'book_5'
+  | 'draw'
+  | 'edit_document'
+  | 'edit_note'
+  | 'function'
+  | 'groups'
+  | 'live_tv'
+  | 'local_library'
+  | 'lock'
+  | 'picture_as_pdf'
+  | 'preview'
+  | 'school'
+  | 'security'
+  | 'verified_user'
+  | 'workspace_premium'
+
+export type IconElementSticker =
+  | 'arrow_sticker_grey'
+  | 'books_sticker_yellow'
+  | 'cog-pen_sticker_grey'
+  | 'collaborate_sticker_purple'
+  | 'collaborate_sticker_yellow'
+  | 'data_sticker_grey'
+  | 'formatting_sticker_green'
+  | 'house-tree_sticker_grey'
+  | 'hub_sticker_tangerine'
+  | 'lock_sticker_grey'
+  | 'overleaf_sticker_green'
+  | 'pen_sticker_purple'
+  | 'pen_sticker_tangerine'
+  | 'pi_sticker_tangerine'
+  | 'support_sticker_tangerine'
+  | 'support_sticker_yellow'
+
+export type IconElement = IconElementMaterial | IconElementSticker
+export type IconStyle = 'Green circle' | 'Large purple text' | 'Default'