@design-system-rte/angular 0.2.2 → 0.4.2

package/src/lib/components/icon/icon-map.ts

@@ -0,0 +1,305 @@
+import { isValidIconName as isValidIconNameShared } from "@design-system-rte/core/components/icon/icon-utils";
+
+export const togglableIcons = {
+  "add-circle": ["add_circle_outlined", "add_circle_filled"],
+  "admin-panel-settings": ["admin_panel_settings_outlined", "admin_panel_settings_filled"],
+  analytics: ["analytics_outlined", "analytics_filled"],
+  archive: ["archive_outlined", "archive_filled"],
+  "arrow-circle-chevron-down": ["arrow_circle_chevron_down_outlined", "arrow_circle_chevron_down_filled"],
+  "arrow-circle-chevron-left": ["arrow_circle_chevron_left_outlined", "arrow_circle_chevron_left_filled"],
+  "arrow-circle-chevron-right": ["arrow_circle_chevron_right_outlined", "arrow_circle_chevron_right_filled"],
+  "arrow-circle-chevron-up": ["arrow_circle_chevron_up_outlined", "arrow_circle_chevron_up_filled"],
+  "arrow-circle-down": ["arrow_circle_down_outlined", "arrow_circle_down_filled"],
+  "arrow-circle-left": ["arrow_circle_left_outlined", "arrow_circle_left_filled"],
+  "arrow-circle-right": ["arrow_circle_right_outlined", "arrow_circle_right_filled"],
+  "arrow-circle-up": ["arrow_circle_up_outlined", "arrow_circle_up_filled"],
+  article: ["article_outlined", "article_filled"],
+  "assignment-complete": ["assignment_complete_outlined", "assignment_complete_filled"],
+  assignment: ["assignment_outlined", "assignment_filled"],
+  "battery-alert": ["battery_alert_outlined", "battery_alert_filled"],
+  "battery-charging-full": ["battery_charging_full_outlined", "battery_charging_full_filled"],
+  "bolt-alt-circle": ["bolt_alt_circle_outlined", "bolt_alt_circle_filled"],
+  "bolt-alt": ["bolt_alt_outlined", "bolt_alt_filled"],
+  "bolt-circle": ["bolt_circle_outlined", "bolt_circle_filled"],
+  bolt: ["bolt_outlined", "bolt_filled"],
+  bookmark: ["bookmark_outlined", "bookmark_filled"],
+  bookmarks: ["bookmarks_outlined", "bookmarks_filled"],
+  build: ["build_outlined", "build_filled"],
+  "calendar-available": ["calendar_available_outlined", "calendar_available_filled"],
+  "calendar-busy": ["calendar_busy_outlined", "calendar_busy_filled"],
+  "calendar-month": ["calendar_month_outlined", "calendar_month_filled"],
+  "calendar-today": ["calendar_today_outlined", "calendar_today_filled"],
+  call: ["call_outlined", "call_filled"],
+  category: ["category_outlined", "category_filled"],
+  "chart-add": ["chart_add_outlined", "chart_add_filled"],
+  "chart-area": ["chart_area_outlined", "chart_area_filled"],
+  "chart-pie": ["chart_pie_outlined", "chart_pie_filled"],
+  "chart-table": ["chart_table_outlined", "chart_table_filled"],
+  "chat-alt": ["chat_alt_outlined", "chat_alt_filled"],
+  "chat-alt-unread": ["chat_alt_unread_outlined", "chat_alt_unread_filled"],
+  chat: ["chat_outlined", "chat_filled"],
+  "chat-unread": ["chat_unread_outlined", "chat_unread_filled"],
+  "check-circle": ["check_circle_outlined", "check_circle_filled"],
+  checkbox: ["checkbox_outlined", "checkbox_filled"],
+  "checkbox-indeterminate": ["checkbox_indeterminate_outlined", "checkbox_indeterminate_filled"],
+  clock: ["clock_outlined", "clock_filled"],
+  "cloud-download": ["cloud_download_outlined", "cloud_download_filled"],
+  cloud: ["cloud_outlined", "cloud_filled"],
+  "cloud-off": ["cloud_off_outlined", "cloud_off_filled"],
+  "cloud-upload": ["cloud_upload_outlined", "cloud_upload_filled"],
+  "comment-add": ["comment_add_outlined", "comment_add_filled"],
+  comment: ["comment_outlined", "comment_filled"],
+  copy: ["copy_outlined", "copy_filled"],
+  dangerous: ["dangerous_outlined", "dangerous_filled"],
+  dashboard: ["dashboard_outlined", "dashboard_filled"],
+  database: ["database_outlined", "database_filled"],
+  delete: ["delete_outlined", "delete_filled"],
+  desktop: ["desktop_outlined", "desktop_filled"],
+  devices: ["devices_outlined", "devices_filled"],
+  draft: ["draft_outlined", "draft_filled"],
+  eco: ["eco_outlined", "eco_filled"],
+  edit: ["edit_outlined", "edit_filled"],
+  "electric-meter": ["electric_meter_outlined", "electric_meter_filled"],
+  error: ["error_outlined", "error_filled"],
+  explore: ["explore_outlined", "explore_filled"],
+  "explore-off": ["explore_off_outlined", "explore_off_filled"],
+  "fast-forward": ["fast_forward_outlined", "fast_forward_filled"],
+  "fast-rewind": ["fast_rewind_outlined", "fast_rewind_filled"],
+  feedback: ["feedback_outlined", "feedback_filled"],
+  "file-copy": ["file_copy_outlined", "file_copy_filled"],
+  "file-download": ["file_download_outlined", "file_download_filled"],
+  "file-upload": ["file_upload_outlined", "file_upload_filled"],
+  "filter-alt": ["filter_alt_outlined", "filter_alt_filled"],
+  "filter-alt-off": ["filter_alt_off_outlined", "filter_alt_off_filled"],
+  fire: ["fire_outlined", "fire_filled"],
+  "fit-screen": ["fit_screen_outlined", "fit_screen_filled"],
+  flag: ["flag_outlined", "flag_filled"],
+  flash: ["flash_outlined", "flash_filled"],
+  "flash-off": ["flash_off_outlined", "flash_off_filled"],
+  "folder-add": ["folder_add_outlined", "folder_add_filled"],
+  folder: ["folder_outlined", "folder_filled"],
+  "folder-move": ["folder_move_outlined", "folder_move_filled"],
+  "folder-open": ["folder_open_outlined", "folder_open_filled"],
+  "folder-shared": ["folder_shared_outlined", "folder_shared_filled"],
+  forum: ["forum_outlined", "forum_filled"],
+  "group-add": ["group_add_outlined", "group_add_filled"],
+  group: ["group_outlined", "group_filled"],
+  groups: ["groups_outlined", "groups_filled"],
+  headphones: ["headphones_outlined", "headphones_filled"],
+  heart: ["heart_outlined", "heart_filled"],
+  help: ["help_outlined", "help_filled"],
+  home: ["home_outlined", "home_filled"],
+  hourglass: ["hourglass_outlined", "hourglass_filled"],
+  "image-broken": ["image_broken_outlined", "image_broken_filled"],
+  image: ["image_outlined", "image_filled"],
+  "image-gallery": ["image_gallery_outlined", "image_gallery_filled"],
+  inbox: ["inbox_outlined", "inbox_filled"],
+  info: ["info_outlined", "info_filled"],
+  keep: ["keep_outlined", "keep_filled"],
+  "keep-off": ["keep_off_outlined", "keep_off_filled"],
+  label: ["label_outlined", "label_filled"],
+  laptop: ["laptop_outlined", "laptop_filled"],
+  "left-panel-open": ["left_panel_open_outlined", "left_panel_open_filled"],
+  "left-panel-close": ["left_panel_close_outlined", "left_panel_close_filled"],
+  "light-off": ["light_off_outlined", "light_off_filled"],
+  "lightbulb-alt": ["lightbulb_alt_outlined", "lightbulb_alt_filled"],
+  "lightbulb-circle": ["lightbulb_circle_outlined", "lightbulb_circle_filled"],
+  lightbulb: ["lightbulb_outlined", "lightbulb_filled"],
+  "list-alt": ["list_alt_outlined", "list_alt_filled"],
+  "location-me": ["location_me_outlined", "location_me_filled"],
+  "location-off": ["location_off_outlined", "location_off_filled"],
+  "location-on": ["location_on_outlined", "location_on_filled"],
+  lock: ["lock_outlined", "lock_filled"],
+  "lock-open": ["lock_open_outlined", "lock_open_filled"],
+  "lock-open-right": ["lock_open_right_outlined", "lock_open_right_filled"],
+  mail: ["mail_outlined", "mail_filled"],
+  "mail-unread": ["mail_unread_outlined", "mail_unread_filled"],
+  map: ["map_outlined", "map_filled"],
+  mic: ["mic_outlined", "mic_filled"],
+  "mic-off": ["mic_off_outlined", "mic_off_filled"],
+  "mode-dark": ["mode_dark_outlined", "mode_dark_filled"],
+  "mode-light": ["mode_light_outlined", "mode_light_filled"],
+  notification: ["notification_outlined", "notification_filled"],
+  "notification-important": ["notification_important_outlined", "notification_important_filled"],
+  "notification-off": ["notification_off_outlined", "notification_off_filled"],
+  "notification-unread": ["notification_unread_outlined", "notification_unread_filled"],
+  palette: ["palette_outlined", "palette_filled"],
+  "pause-circle": ["pause_circle_outlined", "pause_circle_filled"],
+  pause: ["pause_outlined", "pause_filled"],
+  "photo-camera": ["photo_camera_outlined", "photo_camera_filled"],
+  "play-circle": ["play_circle_outlined", "play_circle_filled"],
+  play: ["play_outlined", "play_filled"],
+  power: ["power_outlined", "power_filled"],
+  "power-off": ["power_off_outlined", "power_off_filled"],
+  "power-plug-connect": ["power_plug_connect_outlined", "power_plug_connect_filled"],
+  "power-settings-circle": ["power_settings_circle_outlined", "power_settings_circle_filled"],
+  "power-solar": ["power_solar_outlined", "power_solar_filled"],
+  "power-switch": ["power_switch_outlined", "power_switch_filled"],
+  "power-wind": ["power_wind_outlined", "power_wind_filled"],
+  print: ["print_outlined", "print_filled"],
+  "right-panel-close": ["right_panel_close_outlined", "right_panel_close_filled"],
+  "right-panel-open": ["right_panel_open_outlined", "right_panel_open_filled"],
+  save: ["save_outlined", "save_filled"],
+  send: ["send_outlined", "send_filled"],
+  settings: ["settings_outlined", "settings_filled"],
+  share: ["share_outlined", "share_filled"],
+  "skip-next": ["skip_next_outlined", "skip_next_filled"],
+  "skip-previous": ["skip_previous_outlined", "skip_previous_filled"],
+  smartphone: ["smartphone_outlined", "smartphone_filled"],
+  star: ["star_outlined", "star_filled"],
+  "sticky-note": ["sticky_note_outlined", "sticky_note_filled"],
+  "stop-circle": ["stop_circle_outlined", "stop_circle_filled"],
+  stop: ["stop_outlined", "stop_filled"],
+  subtitles: ["subtitles_outlined", "subtitles_filled"],
+  "text-snippet": ["text_snippet_outlined", "text_snippet_filled"],
+  "trash-restore": ["trash_restore_outlined", "trash_restore_filled"],
+  unarchive: ["unarchive_outlined", "unarchive_filled"],
+  "user-add": ["user_add_outlined", "user_add_filled"],
+  "user-circle": ["user_circle_outlined", "user_circle_filled"],
+  user: ["user_outlined", "user_filled"],
+  "user-settings": ["user_settings_outlined", "user_settings_filled"],
+  verified: ["verified_outlined", "verified_filled"],
+  "video-camera": ["video_camera_outlined", "video_camera_filled"],
+  "video-camera-off": ["video_camera_off_outlined", "video_camera_off_filled"],
+  "video-gallery": ["video_gallery_outlined", "video_gallery_filled"],
+  "view-agenda": ["view_agenda_outlined", "view_agenda_filled"],
+  "view-column": ["view_column_outlined", "view_column_filled"],
+  "view-grid": ["view_grid_outlined", "view_grid_filled"],
+  "view-kanban": ["view_kanban_outlined", "view_kanban_filled"],
+  "view-module": ["view_module_outlined", "view_module_filled"],
+  "view-timeline": ["view_timeline_outlined", "view_timeline_filled"],
+  "visibility-hide": ["visibility_hide_outlined", "visibility_hide_filled"],
+  "visibility-show": ["visibility_show_outlined", "visibility_show_filled"],
+  "volume-down": ["volume_down_outlined", "volume_down_filled"],
+  "volume-mute": ["volume_mute_outlined", "volume_mute_filled"],
+  "volume-off": ["volume_off_outlined", "volume_off_filled"],
+  "volume-up": ["volume_up_outlined", "volume_up_filled"],
+  warning: ["warning_outlined", "warning_filled"],
+  waterdrop: ["waterdrop_outlined", "waterdrop_filled"],
+};
+
+export const regularIcons = {
+  add: "add",
+  "alt-route": "alt_route",
+  apps: "apps",
+  "arrow-alt-down": "arrow_alt_down",
+  "arrow-alt-down-left": "arrow_alt_down_left",
+  "arrow-alt-down-right": "arrow_alt_down_right",
+  "arrow-alt-left": "arrow_alt_left",
+  "arrow-alt-right": "arrow_alt_right",
+  "arrow-alt-up": "arrow_alt_up",
+  "arrow-alt-up-left": "arrow_alt_up_left",
+  "arrow-alt-up-right": "arrow_alt_up_right",
+  "arrow-angle-down-left": "arrow_angle_down_left",
+  "arrow-angle-down-right": "arrow_angle_down_right",
+  "arrow-angle-up-left": "arrow_angle_up_left",
+  "arrow-angle-up-right": "arrow_angle_up_right",
+  "arrow-chevron-down": "arrow_chevron_down",
+  "arrow-chevron-left": "arrow_chevron_left",
+  "arrow-chevron-right": "arrow_chevron_right",
+  "arrow-chevron-up": "arrow_chevron_up",
+  "arrow-double-down": "arrow_double_down",
+  "arrow-double-left": "arrow_double_left",
+  "arrow-double-right": "arrow_double_right",
+  "arrow-double-up": "arrow_double_up",
+  "arrow-down": "arrow_down",
+  "arrow-down-left": "arrow_down_left",
+  "arrow-down-right": "arrow_down_right",
+  "arrow-drop-down": "arrow_drop_down",
+  "arrow-drop-up": "arrow_drop_up",
+  "arrow-left": "arrow_left",
+  "arrow-right": "arrow_right",
+  "arrow-up": "arrow_up",
+  "arrow-up-left": "arrow_up_left",
+  "arrow-up-right": "arrow_up_right",
+  asterisk: "asterisk",
+  "attach-file": "attach_file",
+  "battery-alt-empty": "battery_alt_empty",
+  "battery-alt-full": "battery_alt_full",
+  "battery-charging": "battery_charging",
+  "battery-empty": "battery_empty",
+  "battery-full": "battery_full",
+  bluetooth: "bluetooth",
+  "bluetooth-off": "bluetooth_off",
+  "chart-bar": "chart_bar",
+  "chart-bar-stacked": "chart_bar_stacked",
+  check: "check",
+  "check-indeterminate": "check_indeterminate",
+  "check-small": "check_small",
+  "checkbox-empty": "checkbox_empty",
+  close: "close",
+  compare: "compare",
+  "copy-all": "copy_all",
+  "crisis-alert": "crisis_alert",
+  cut: "cut",
+  download: "download",
+  "download-done": "download_done",
+  "drag-handle": "drag_handle",
+  "drag-indicator": "drag_indicator",
+  exclamation: "exclamation",
+  "explore-travel": "explore_travel",
+  "external-link": "external_link",
+  filter: "filter",
+  "filter-off": "filter_off",
+  "first-page": "first_page",
+  forward: "forward",
+  fullscreen: "fullscreen",
+  "fullscreen-exit": "fullscreen_exit",
+  history: "history",
+  "hourglass-empty": "hourglass_empty",
+  "info-i": "info_i",
+  language: "language",
+  "last-page": "last_page",
+  link: "link",
+  "link-off": "link_off",
+  list: "list",
+  "location-disabled": "location_disabled",
+  login: "login",
+  logout: "logout",
+  menu: "menu",
+  "menu-open": "menu_open",
+  monitoring: "monitoring",
+  "more-down": "more_down",
+  "more-horiz": "more_horiz",
+  "more-up": "more_up",
+  "more-vert": "more_vert",
+  ohm: "ohm",
+  "open-in-full": "open_in_full",
+  paste: "paste",
+  "play-pause": "play_pause",
+  "power-input": "power_input",
+  "power-plug": "power_plug",
+  "power-settings": "power_settings",
+  "priority-high": "priority_high",
+  public: "public",
+  publish: "publish",
+  "question-mark": "question_mark",
+  radar: "radar",
+  "radio-button-empty": "radio_button_empty",
+  redo: "redo",
+  reload: "reload",
+  remove: "remove",
+  reply: "reply",
+  "reply-all": "reply_all",
+  route: "route",
+  search: "search",
+  "side-navigation": "side_navigation",
+  sort: "sort",
+  "support-agent": "support_agent",
+  timeline: "timeline",
+  "trending-down": "trending_down",
+  "trending-flat": "trending_flat",
+  "trending-up": "trending_up",
+  tune: "tune",
+  undo: "undo",
+  upload: "upload",
+  water: "water",
+  "water-alt": "water_alt",
+  wifi: "wifi",
+  "wifi-off": "wifi_off",
+  windmill: "windmill",
+  "zoom-out": "zoom_out",
+  "zoom-in": "zoom_in",
+};
+
+export const isValidIconName = (name: string): boolean => isValidIconNameShared(name, regularIcons, togglableIcons);

package/src/lib/components/icon/icon.component.html

@@ -0,0 +1 @@
+<div class="rte-icon-container" [innerHTML]="svgContent" [style.height]="(size())+'px'" [style.width]="(size())+'px'"></div>

package/src/lib/components/icon/icon.component.scss

@@ -0,0 +1,3 @@
+.rte-icon-container {
+  display: flex
+}

package/src/lib/components/icon/icon.component.ts

@@ -0,0 +1,58 @@
+import { CommonModule } from "@angular/common";
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  DestroyRef,
+  effect,
+  inject,
+  input,
+} from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { DomSanitizer, SafeHtml } from "@angular/platform-browser";
+import { Observable } from "rxjs";
+
+import { IconService, RegularIconIdKey, TogglableIconIdKey } from "./icon.service";
+
+@Component({
+  selector: "rte-icon",
+  imports: [CommonModule],
+  standalone: true,
+  templateUrl: "./icon.component.html",
+  styleUrl: "./icon.component.scss",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [IconService],
+})
+export class IconComponent {
+  readonly name = input.required<RegularIconIdKey | TogglableIconIdKey>();
+  readonly size = input(20);
+  readonly color = input("currentColor");
+  readonly classes = input("");
+  readonly appearance = input<"outlined" | "filled">();
+  destroyRef = inject(DestroyRef);
+
+  svgContent: SafeHtml | null = null;
+  svg!: Observable<string>;
+
+  private sanitizer = inject(DomSanitizer);
+  private iconService = inject(IconService);
+  private cdr = inject(ChangeDetectorRef);
+
+  constructor() {
+    effect(() => {
+      this.setSvgContent(this.name());
+    });
+  }
+
+  private setSvgContent(svgName: RegularIconIdKey | TogglableIconIdKey) {
+    const svgFile = this.iconService.getSvg(svgName, this.appearance() || "outlined");
+
+    svgFile.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((res) => {
+      const size = this.size();
+      const svgWithSize = res.replace(/<svg([^>]*)>/, `<svg$1 width="${size}" height="${size}">`);
+
+      this.svgContent = this.sanitizer.bypassSecurityTrustHtml(svgWithSize);
+      this.cdr.markForCheck();
+    });
+  }
+}

package/src/lib/components/icon/icon.service.ts

@@ -0,0 +1,33 @@
+import { HttpClient } from "@angular/common/http";
+import { inject, Injectable } from "@angular/core";
+import { Observable } from "rxjs";
+
+import { regularIcons, togglableIcons } from "./icon-map";
+
+export type RegularIconIdKey = keyof typeof regularIcons;
+export type TogglableIconIdKey = keyof typeof togglableIcons;
+
+@Injectable()
+export class IconService {
+  private http = inject(HttpClient);
+
+  getSvg(name: RegularIconIdKey | TogglableIconIdKey, appearance: "outlined" | "filled"): Observable<string> {
+    if (!this.http) {
+      throw new Error("HttpClient is not available");
+    }
+    const toggableIcon = togglableIcons[name as TogglableIconIdKey];
+
+    if (toggableIcon) {
+      const [outlinedIconName, filledIconName] = toggableIcon;
+
+      const iconName = appearance === "filled" ? filledIconName : outlinedIconName;
+      return this.http.get(`assets/icons/${iconName}.svg`, { responseType: "text" });
+    } else {
+      const iconName = regularIcons[name as RegularIconIdKey];
+      if (!iconName) {
+        throw new Error(`Icon ${name} not found`);
+      }
+      return this.http.get(`assets/icons/${iconName}.svg`, { responseType: "text" });
+    }
+  }
+}

package/src/lib/components/icon/icon.stories.ts

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from "@storybook/angular";
+
+import { regularIcons as RegularIconsList, togglableIcons as TogglableIconsList } from "./icon-map";
+import { IconComponent } from "./icon.component";
+
+const RegularIconIds = Object.keys(RegularIconsList);
+const TogglableIconIds = Object.keys(TogglableIconsList);
+
+const meta = {
+  title: "Icon",
+  component: IconComponent,
+  tags: ["autodocs"],
+  argTypes: {
+    name: {
+      control: "select",
+      options: [...RegularIconIds, ...TogglableIconIds].sort((a, b) => a.localeCompare(b)),
+      description: "Nom de l’icône à afficher",
+      defaultValue: "check",
+    },
+    appearance: {
+      control: "select",
+      options: ["outlined", "filled"],
+      description: "Apparence de l’icône (pour les icônes togglables)",
+      defaultValue: "outlined",
+    },
+    size: {
+      control: { type: "number", min: 20, step: 1 },
+      description: "Taille de l’icône en pixels",
+      defaultValue: 20,
+    },
+    color: {
+      control: "color",
+      description: "Couleur de l’icône",
+      defaultValue: "#000000",
+    },
+  },
+} satisfies Meta<IconComponent>;
+
+export default meta;
+
+type Story = StoryObj<IconComponent>;
+
+export const Default: Story = {
+  args: {
+    name: "add",
+    size: 20,
+    color: "#000000",
+    appearance: "outlined",
+  },
+};
+
+export const RegularIcons: Story = {
+  render: (args) => ({
+    props: { ...args, iconNames: RegularIconIds },
+    template: `
+    <div style="display: flex; flex-direction: column; flex-wrap: wrap; gap: 10px; height: 700px">
+      <div *ngFor="let iconName of iconNames" style="display: flex; align-items: center; gap: 5px; border: 1px solid #ccc; padding: 5px">
+        <rte-icon
+          [name]="iconName"
+        />
+      <span>{{iconName}}</span>
+      </div>
+    </div>`,
+  }),
+};
+
+export const TogglableIcons: Story = {
+  render: (args) => ({
+    props: { ...args, iconNames: TogglableIconIds },
+    template: `
+    <div style="display: flex; flex-direction: column; flex-wrap: wrap; gap: 10px; height: 700px">
+      <div *ngFor="let iconName of iconNames" style="display: flex; align-items: center; gap: 5px; border: 1px solid #ccc; padding: 5px">
+        <rte-icon
+          [name]="iconName"
+        />
+         <rte-icon
+          [name]="iconName"
+          appearance="filled"
+        />
+      <span>{{iconName}}</span>
+      </div>
+    </div>`,
+  }),
+};

package/src/lib/components/icon-button/icon-button.component.html

@@ -0,0 +1,16 @@
+<button
+  *ngIf="isValidIconName"
+  class="rte-icon-button {{ variant() }} size-{{ size() }}"
+  [class.compact-spacing]="compactSpacing()"
+  [disabled]="disabled()"
+  [attr.aria-label]="ariaLabel()"
+  [attr.aria-labelledby]="ariaLabelledBy()"
+  [type]="type()"
+  (click)="onClick($event)"
+>
+  <rte-icon
+    [name]="name()"
+    [appearance]="appearance()"
+    [size]="buttonIconSize()"
+  />
+</button>

package/src/lib/components/icon-button/icon-button.component.scss

@@ -0,0 +1,165 @@
+@use '@design-system-rte/core/design-tokens/main.scss' as *;
+
+.rte-icon-button {
+    display: inline-flex;
+    cursor: pointer;
+    height: 24px;
+    align-items: center;
+    gap: $positive-spacing_0;
+    flex-shrink: 0;
+
+    &:focus-visible {
+        outline: none;
+        position: relative;
+
+        &::after {
+            content: '';
+            position: absolute;
+            inset: -4px;
+            border-radius: 6px;
+            pointer-events: none;
+            box-shadow: 0 0 0 1px var(--border-brand-focused);
+        }
+    }
+
+    &.size-s {
+        border-radius: $radius-s;
+        height: 24px;
+        padding: $positive-spacing_025 $positive-spacing_050;
+
+        &.compact-spacing {
+            height: 16px;
+        }
+    }
+
+    &.size-m {
+        border-radius: $radius-s;
+        height: 32px;
+        padding: $positive-spacing_050 $positive-spacing_075;
+
+        &.compact-spacing {
+            height: 20px;
+        }
+    }
+
+    &.size-l {
+        border-radius: $radius-m;
+        height: 40px;
+        padding: $positive-spacing_075 $positive-spacing_100;
+
+        &.compact-spacing {
+            height: 24px;
+        }
+    }
+
+    &.primary {
+        background: var(--background-brand-default);
+        border: var(--border-brand-default);
+        color: var(--content-primary-inverse);
+
+        &:hover {
+            background: var(--background-brand-hover);
+            border: var(--background-brand-hover);
+        }
+
+        &:active {
+            background: var(--background-brand-pressed);
+        }
+
+        &:disabled {
+            background: var(--background-disabled);
+            border: solid $width-xs var(--border-disabled);
+            box-shadow: none;
+            color: var(--content-disabled);
+            cursor: default;
+        }
+    }
+
+    &.secondary {
+        background: var(--background-default);
+        border: solid $width-xs var(--border-brand-default);
+        color: var(--content-brand-default);
+
+        &:hover {
+            background: var(--background-brand-inverse-hover);
+            border: solid $width-xs var(--border-brand-default);
+        }
+
+        &:active {
+            background: var(--background-brand-inverse-pressed);
+        }
+
+        &:disabled {
+            background: var(--background-disabled);
+            border: solid $width-xs var(--border-disabled);
+            color: var(--content-disabled);
+            cursor: default;
+        }
+    }
+
+    &.text {
+        background: transparent;
+        border: none;
+        color: var(--content-brand-default);
+
+        &:hover {
+            background: var(--background-brand-inverse-hover);
+        }
+
+        &:active {
+            background: var(--background-brand-inverse-pressed);
+        }
+
+        &:disabled {
+            background: var(--background-disabled);
+            color: var(--content-disabled);
+            cursor: default;
+        }
+    }
+
+    &.transparent {
+        background: transparent;
+        border: none;
+        color: var(--content-brand-default);
+
+        &:hover {
+            color: var(--content-brand-hover);
+        }
+
+        &:active {
+            color: var(--content-brand-press);
+        }
+
+        &:disabled {
+            box-shadow: none;
+            background-color: var(--background-disabled);
+            color: var(--content-disabled);
+            cursor: default;
+        }
+    }
+
+    &.danger {
+        background: var(--background-danger-default);
+        border: none;
+        color: var(--content-primary-inverse);
+
+        &:hover {
+            background: var(--background-danger-hover);
+        }
+
+        &:active {
+            background: var(--background-danger-pressed);
+        }
+
+        &:disabled {
+            background: var(--background-disabled);
+            border: solid $width-xs var(--border-disabled);
+            color: var(--content-disabled);
+            cursor: default;
+        }
+    }
+
+    &.compact-spacing {
+        padding: $positive-spacing_0;
+    }
+}