@energie360/ui-library 0.0.3

package/dist/style.css

@@ -0,0 +1,20 @@
+@import"//hello.myfonts.net/count/3c2a64";/**
+ * @license
+ * MyFonts Webfont Build ID 3943012, 2020-09-02T07:30:46-0400
+ *
+ * The fonts listed in this notice are subject to the End User License
+ * Agreement(s) entered into by the website owner. All other parties are
+ * explicitly restricted from using the Licensed Webfonts(s).
+ *
+ * Webfont: Glober-Bold by Fontfabric
+ * URL: https://www.myfonts.com/fonts/font-fabric/glober/bold/
+ * Copyright: Copyright (c) 2019 by Svet Simov. All rights reserved.
+ *
+ *
+ * Webfont: Glober-Regular by Fontfabric
+ * URL: https://www.myfonts.com/fonts/font-fabric/glober/regular/
+ * Copyright: Copyright (c) 2019 by Svet Simov. All rights reserved.
+ *
+ *
+ * © 2020 MyFonts Inc
+*/@font-face{font-family:Glober;font-weight:400;font-style:normal;font-display:swap;src:url(/static/ui-assets/fonts/Glober/Glober-Regular/font.woff2) format("woff2"),url(/static/ui-assets/fonts/Glober/Glober-Regular/font.woff) format("woff")}@font-face{font-family:Glober;font-weight:700;font-style:normal;font-display:swap;src:url(/static/ui-assets/fonts/Glober/Glober-Bold/font.woff2) format("woff2"),url(/static/ui-assets/fonts/Glober/Glober-Bold/font.woff) format("woff")}:root{--e-c-primary-01-50: #edf6e9;--e-c-primary-01-50-rgb: 237, 246, 233;--e-c-primary-01-100: #dbedd4;--e-c-primary-01-100-rgb: 219, 237, 212;--e-c-primary-01-200: #9cce89;--e-c-primary-01-200-rgb: 156, 206, 137;--e-c-primary-01-500: #4ba528;--e-c-primary-01-500-rgb: 75, 165, 40;--e-c-primary-01-700: #3c8420;--e-c-primary-01-700-rgb: 60, 132, 32;--e-c-primary-01-900: #316b1a;--e-c-primary-01-900-rgb: 49, 107, 26;--e-c-secondary-01-50: #e5f2eb;--e-c-secondary-01-50-rgb: 229, 242, 235;--e-c-secondary-01-100: #cce5d8;--e-c-secondary-01-100-rgb: 204, 229, 216;--e-c-secondary-01-200: #73b894;--e-c-secondary-01-200-rgb: 115, 184, 148;--e-c-secondary-01-500: #007d3c;--e-c-secondary-01-500-rgb: 0, 125, 60;--e-c-secondary-01-700: #006430;--e-c-secondary-01-700-rgb: 0, 100, 48;--e-c-secondary-01-900: #005127;--e-c-secondary-01-900-rgb: 0, 81, 39;--e-c-secondary-02-50: #ede9ee;--e-c-secondary-02-50-rgb: 237, 233, 238;--e-c-secondary-02-100: #dcd3de;--e-c-secondary-02-100-rgb: 220, 211, 222;--e-c-secondary-02-200: #9f86a4;--e-c-secondary-02-200-rgb: 159, 134, 164;--e-c-secondary-02-500: #50235a;--e-c-secondary-02-500-rgb: 80, 35, 90;--e-c-secondary-02-700: #401c48;--e-c-secondary-02-700-rgb: 64, 28, 72;--e-c-secondary-02-900: #34173b;--e-c-secondary-02-900-rgb: 52, 23, 59;--e-c-secondary-03-50: #f8e7ed;--e-c-secondary-03-50-rgb: 248, 231, 237;--e-c-secondary-03-100: #f1cfdb;--e-c-secondary-03-100-rgb: 241, 207, 219;--e-c-secondary-03-200: #d97b9c;--e-c-secondary-03-200-rgb: 217, 123, 156;--e-c-secondary-03-500: #b90f4b;--e-c-secondary-03-500-rgb: 185, 15, 75;--e-c-secondary-03-700: #940c3c;--e-c-secondary-03-700-rgb: 148, 12, 60;--e-c-secondary-03-900: #780a31;--e-c-secondary-03-900-rgb: 120, 10, 49;--e-c-secondary-04-50: #fffbe5;--e-c-secondary-04-50-rgb: 255, 251, 229;--e-c-secondary-04-100: #fff7cc;--e-c-secondary-04-100-rgb: 255, 247, 204;--e-c-secondary-04-200: #ffe973;--e-c-secondary-04-200-rgb: 255, 233, 115;--e-c-secondary-04-500: #ffd700;--e-c-secondary-04-500-rgb: 255, 215, 0;--e-c-secondary-04-700: #ccac00;--e-c-secondary-04-700-rgb: 204, 172, 0;--e-c-secondary-04-900: #a68c00;--e-c-secondary-04-900-rgb: 166, 140, 0;--e-c-secondary-05-50: #e5f5fc;--e-c-secondary-05-50-rgb: 229, 245, 252;--e-c-secondary-05-100: #cceaf8;--e-c-secondary-05-100-rgb: 204, 234, 248;--e-c-secondary-05-200: #73c5ec;--e-c-secondary-05-200-rgb: 115, 197, 236;--e-c-secondary-05-500: #0096dc;--e-c-secondary-05-500-rgb: 0, 150, 220;--e-c-secondary-05-700: #0078b0;--e-c-secondary-05-700-rgb: 0, 120, 176;--e-c-secondary-05-900: #00618f;--e-c-secondary-05-900-rgb: 0, 97, 143;--e-c-secondary-06-50: #f4e6e5;--e-c-secondary-06-50-rgb: 244, 230, 229;--e-c-secondary-06-100: #e9cdcc;--e-c-secondary-06-100-rgb: 233, 205, 204;--e-c-secondary-06-200: #c27673;--e-c-secondary-06-200-rgb: 194, 118, 115;--e-c-secondary-06-500: #910500;--e-c-secondary-06-500-rgb: 145, 5, 0;--e-c-secondary-06-700: #740400;--e-c-secondary-06-700-rgb: 116, 4, 0;--e-c-secondary-06-900: #5e0300;--e-c-secondary-06-900-rgb: 94, 3, 0;--e-c-mono-50: #f5f5f5;--e-c-mono-50-rgb: 245, 245, 245;--e-c-mono-100: #ececec;--e-c-mono-100-rgb: 236, 236, 236;--e-c-mono-200: #dddddd;--e-c-mono-200-rgb: 221, 221, 221;--e-c-mono-500: #b3b3b3;--e-c-mono-500-rgb: 179, 179, 179;--e-c-mono-700: #6b6b6b;--e-c-mono-700-rgb: 107, 107, 107;--e-c-mono-900: #333333;--e-c-mono-900-rgb: 51, 51, 51;--e-c-mono-00: #ffffff;--e-c-mono-00-rgb: 255, 255, 255;--e-c-signal-01-100: #b6e6cf;--e-c-signal-01-100-rgb: 182, 230, 207;--e-c-signal-01-500: #1aa764;--e-c-signal-01-500-rgb: 26, 167, 100;--e-c-signal-01-700: #0e6f41;--e-c-signal-01-700-rgb: 14, 111, 65;--e-c-signal-01-900: #004926;--e-c-signal-01-900-rgb: 0, 73, 38;--e-c-signal-02-100: #ffe2b6;--e-c-signal-02-100-rgb: 255, 226, 182;--e-c-signal-02-500: #ff9800;--e-c-signal-02-500-rgb: 255, 152, 0;--e-c-signal-02-700: #cc7a00;--e-c-signal-02-700-rgb: 204, 122, 0;--e-c-signal-02-900: #703600;--e-c-signal-02-900-rgb: 112, 54, 0;--e-c-signal-03-100: #ffb5c4;--e-c-signal-03-100-rgb: 255, 181, 196;--e-c-signal-03-500: #ff0c3e;--e-c-signal-03-500-rgb: 255, 12, 62;--e-c-signal-03-700: #b90d31;--e-c-signal-03-700-rgb: 185, 13, 49;--e-c-signal-03-900: #790019;--e-c-signal-03-900-rgb: 121, 0, 25;--e-space-1: 4px;--e-space-2: 8px;--e-space-3: 12px;--e-space-4: 16px;--e-space-5: 20px;--e-space-6: 24px;--e-space-7: 28px;--e-space-8: 32px;--e-space-9: 36px;--e-space-10: 40px;--e-space-11: 44px;--e-space-12: 48px;--e-space-14: 56px;--e-space-16: 64px;--e-space-20: 80px;--e-space-24: 96px;--e-space-28: 112px;--e-space-30: 120px;--e-space-32: 128px;--e-space-36: 144px;--e-space-40: 160px;--e-space-44: 176px;--e-space-48: 192px;--e-space-52: 208px;--e-space-56: 224px;--e-space-60: 240px;--e-space-64: 256px;--e-space-72: 288px;--e-space-80: 320px;--e-space-96: 384px;--e-space-0_5: 2px;--e-space-1_5: 6px;--e-space-2_5: 10px;--e-space-3_5: 14px;--e-type-font-body: Glober;--e-type-font-fallback: "Helvetica Neue", helvetica, arial, sans-serif;--e-type-font-base-size: 16px;--e-type-size-50: 12px;--e-type-size-100: 14px;--e-type-size-200: 16px;--e-type-size-300: 18px;--e-type-size-400: 20px;--e-type-size-500: 22px;--e-type-size-600: 26px;--e-type-size-700: 26px;--e-type-size-800: 32px;--e-type-size-900: 48px;--e-type-size-1000: 56px;--e-type-line-height-50: 1.5 ;--e-type-line-height-100: calc(22 / 14);--e-type-line-height-200: 1.5 ;--e-type-line-height-300: calc(28 / 18);--e-type-line-height-400: 1.3 ;--e-type-line-height-500: calc(30 / 22);--e-type-line-height-600: calc(36 / 26);--e-type-line-height-700: calc(34 / 26);--e-type-line-height-800: 1.1875 ;--e-type-line-height-900: 1.125 ;--e-type-line-height-1000: calc(62 / 56);--e-type-weight-weak: 400;--e-type-weight-strong: 700;--e-type-decoration-enhance: underline;--e-trs-duration-fastest: .1s;--e-trs-duration-faster: .2s;--e-trs-duration-fast: .4s;--e-trs-duration-slow: .6s;--e-trs-duration-slower: .8s;--e-trs-duration-slowest: 1s;--e-trs-easing-default: ease-in-out;--e-brd-radius-1: 4px;--e-brd-radius-2: 8px;--e-brd-radius-3: 12px;--e-brd-radius-4: 16px;--e-brd-radius-5: 20px;--e-brd-radius-6: 24px;--e-mq-breakpoint-xs: 480px;--e-mq-breakpoint-s: 520px;--e-mq-breakpoint-m: 740px;--e-mq-breakpoint-lg: 1020px;--e-mq-breakpoint-xl: 1240px;--e-mq-breakpoint-2xl: 1520px;--e-layout-site-width: 1680px;--e-layout-site-width-lg: 1020px;--e-layout-site-width-m: 740px;--e-layout-site-width-s: 520px;--e-layout-grid-columns: 12;--e-elevation-xs: 0px 1px 2px rgba(0, 0, 0, .05);--e-elevation-sm: 0px 1px 3px rgba(0, 0, 0, .1), 0px 1px 2px -1px rgba(0, 0, 0, .1);--e-elevation-md: 0px 4px 6px -1px rgba(0, 0, 0, .1), 0px 2px 4px -2px rgba(0, 0, 0, .1);--e-elevation-lg: 0px 10px 15px -3px rgba(0, 0, 0, .1), 0px 4px 6px -4px rgba(0, 0, 0, .1);--e-elevation-xl: 0px 20px 25px -5px rgba(0, 0, 0, .1), 0px 8px 10px -6px rgba(0, 0, 0, .1);--e-elevation-2xl: 0px 25px 50px -12px rgba(0, 0, 0, .25)}body{margin:0;min-height:100vh}h1,h2,h3,h4,h5,h6{margin:0;text-wrap:balance}p,figure,blockquote{margin:0}button{padding:0;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;font-family:inherit;font-size:inherit;background:none}ul,ol{list-style:none;padding:0;margin:0}dl,dt,dd{margin:0}address{font-style:normal}img,picture{max-width:100%;display:block}fieldset{padding:0;margin:0;border:0}html{box-sizing:border-box;scroll-behavior:smooth;min-height:100vh}*,*:before,*:after{box-sizing:inherit}body{font-family:var(--e-type-font-body),var(--e-type-font-fallback);font-size:var(--e-type-size-300);font-weight:var(--e-type-weight-weak);line-height:var(--e-type-line-height-300);color:var(--e-c-mono-900)}*{outline:none}*:focus-visible{outline-style:solid;outline-offset:4px;outline-color:#b3b3b3cc}[data-whatintent=mouse] *:focus{outline:none}e-button:not(:defined),e-icon-button:not(:defined),e-loader:not(:defined){opacity:0}

package/dist/style.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=style.js.map

package/dist/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/elements/button/_button-base.scss

@@ -0,0 +1,49 @@
+@use '../../base/abstracts' as a;
+
+@mixin button-base {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: a.rem(10) a.rem(30);
+  grid-gap: var(--e-space-2);
+  border-radius: 24px;
+  transition:
+    background-color a.$trs-default,
+    box-shadow a.$trs-default,
+    color a.$trs-default,
+    border a.$trs-default;
+  border-width: 2px;
+  border-style: solid;
+  text-decoration: none;
+  vertical-align: middle;
+  text-align: center;
+  cursor: pointer;
+
+  @include a.type(200, strong);
+
+  .button__loader {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  &.disabled,
+  &:disabled {
+    pointer-events: none;
+  }
+
+  &[loading] {
+    cursor: default;
+  }
+
+  .icon,
+  e-icon {
+    --icon-transition: fill #{a.$trs-default};
+  }
+}

package/elements/button/_button-filled-inverted.scss

@@ -0,0 +1,41 @@
+@mixin button-filled-inverted {
+  background-color: var(--e-c-mono-00);
+  border-color: var(--e-c-mono-00);
+  color: var(--e-c-primary-01-700);
+
+  e-loader {
+    --dot-color: var(--e-c-secondary-01-900);
+  }
+
+  .icon,
+  e-icon {
+    --icon-fill-color: var(--e-c-primary-01-700);
+  }
+
+  &:hover {
+    background-color: var(--e-c-primary-01-100);
+    border-color: var(--e-c-primary-01-100);
+    color: var(--e-c-secondary-01-700);
+
+    .icon,
+    e-icon {
+      --icon-fill-color: var(--e-c-secondary-01-700);
+    }
+  }
+
+  &:active,
+  &[loading] {
+    background-color: var(--e-c-primary-01-200);
+    border-color: var(--e-c-primary-01-200);
+  }
+
+  &.disabled:not([loading]),
+  &:disabled:not([loading]) {
+    color: var(--e-c-mono-700);
+
+    .icon,
+    e-icon {
+      --icon-fill-color: var(--e-c-mono-700);
+    }
+  }
+}

package/elements/button/_button-filled.scss

@@ -0,0 +1,32 @@
+@mixin button-filled {
+  background-color: var(--e-c-primary-01-700);
+  color: var(--e-c-mono-00);
+  border-color: var(--e-c-primary-01-700);
+
+  .icon,
+  e-icon {
+    --icon-fill-color: var(--e-c-mono-00);
+  }
+
+  .loader,
+  e-loader {
+    --dot-color: var(--e-c-mono-00);
+  }
+
+  &:hover {
+    background-color: var(--e-c-secondary-01-900);
+    border-color: var(--e-c-secondary-01-900);
+  }
+
+  &:active,
+  &[loading] {
+    background-color: var(--e-c-secondary-01-700);
+    border-color: var(--e-c-secondary-01-700);
+  }
+
+  &.disabled:not([loading]),
+  &:disabled:not([loading]) {
+    background-color: var(--e-c-mono-500);
+    border-color: var(--e-c-mono-500);
+  }
+}

package/elements/button/_button-outlined-inverted.scss

@@ -0,0 +1,38 @@
+@mixin button-outlined-inverted {
+  background-color: transparent;
+  border-color: var(--e-c-mono-00);
+  color: var(--e-c-mono-00);
+
+  .icon,
+  e-icon {
+    --icon-fill-color: var(--e-c-mono-00);
+  }
+
+  .loader,
+  e-loader {
+    --dot-color: var(--e-c-mono-00);
+  }
+
+  &:hover {
+    background-color: rgba(var(--e-c-primary-01-900-rgb), 0.7);
+    border-color: var(--e-c-primary-01-200);
+  }
+
+  &:active,
+  &[loading] {
+    background-color: transparent;
+    border-color: var(--e-c-primary-01-500);
+  }
+
+  &.disabled:not([loading]),
+  &:disabled:not([loading]) {
+    color: var(--e-c-mono-500);
+    border: 2px solid var(--e-c-mono-500);
+    background-color: transparent;
+
+    .icon,
+    e-icon {
+      --icon-fill-color: var(--e-c-mono-500);
+    }
+  }
+}

package/elements/button/_button-outlined.scss

@@ -0,0 +1,38 @@
+@mixin button-outlined {
+  background-color: transparent;
+  color: var(--e-c-primary-01-700);
+  border: 2px solid var(--e-c-primary-01-700);
+
+  .icon,
+  e-icon {
+    --icon-fill-color: var(--e-c-primary-01-700);
+  }
+
+  .loader,
+  e-loader {
+    --dot-color: var(--e-c-primary-01-500);
+  }
+
+  &:hover {
+    background-color: var(--e-c-primary-01-50);
+    border-color: var(--e-c-primary-01-200);
+  }
+
+  &:active,
+  &[loading] {
+    background-color: transparent;
+    border-color: var(--e-c-primary-01-500);
+  }
+
+  &.disabled:not([loading]),
+  &:disabled:not([loading]) {
+    border-color: var(--e-c-mono-500);
+    background-color: transparent;
+    color: var(--e-c-mono-500);
+
+    .icon,
+    e-icon {
+      --icon-fill-color: var(--e-c-mono-500);
+    }
+  }
+}

package/elements/button/_button-plain-small.scss

@@ -0,0 +1,7 @@
+@use '../../base/abstracts' as a;
+@use './button-plain' as *;
+
+@mixin button-plain-small {
+  @include button-plain;
+  @include a.type(100, strong);
+}

package/elements/button/_button-plain.scss

@@ -0,0 +1,49 @@
+@mixin button-plain {
+  padding: var(--e-space-2) var(--e-space-3);
+  color: var(--e-c-primary-01-700);
+  background: none;
+  border: 0;
+  text-decoration: none;
+  grid-gap: var(--e-space-1);
+
+  .icon,
+  e-icon {
+    --icon-fill-color: var(--e-c-primary-01-700);
+  }
+
+  &:hover {
+    color: var(--e-c-secondary-01-900);
+
+    .icon,
+    e-icon {
+      --icon-fill-color: var(--e-c-secondary-01-900);
+    }
+  }
+
+  &:active {
+    color: var(--e-c-secondary-01-700);
+
+    .icon,
+    e-icon {
+      --icon-fill-color: var(--e-c-secondary-01-700);
+    }
+  }
+
+  &.disabled:not([loading]),
+  &:disabled:not([loading]) {
+    background: none;
+    color: var(--e-c-mono-500);
+
+    .icon,
+    e-icon {
+      --icon-fill-color: var(--e-c-mono-500);
+    }
+  }
+
+  &[loading] {
+    .loader,
+    e-loader {
+      --dot-color: var(--e-c-secondary-01-700);
+    }
+  }
+}

package/elements/button/_button-secondary-outlined.scss

@@ -0,0 +1,38 @@
+@mixin button-secondary-outlined {
+  background-color: transparent;
+  color: var(--e-c-secondary-02-500);
+  border: 2px solid var(--e-c-secondary-02-500);
+
+  .icon,
+  e-icon {
+    --icon-fill-color: var(--e-c-secondary-02-500);
+  }
+
+  .loader,
+  e-loader {
+    --dot-color: var(--e-c-secondary-02-500);
+  }
+
+  &:hover {
+    background-color: var(--e-c-secondary-02-50);
+    border-color: var(--e-c-secondary-02-200);
+  }
+
+  &:active,
+  &[loading] {
+    background-color: transparent;
+    border-color: var(--e-c-secondary-02-200);
+  }
+
+  &.disabled:not([loading]),
+  &:disabled:not([loading]) {
+    border-color: var(--e-c-mono-500);
+    background-color: transparent;
+    color: var(--e-c-mono-500);
+
+    .icon,
+    e-icon {
+      --icon-fill-color: var(--e-c-mono-500);
+    }
+  }
+}

package/elements/button/button.js

@@ -0,0 +1,12 @@
+import { defineCustomElement } from 'vue'
+import Button from './button.vue'
+import customElementBaseStyle from '../../base/custom-element-base.scss?inline'
+import styles from './button.scss?inline'
+
+Button.styles = [customElementBaseStyle, styles]
+
+export const ButtonElement = {
+  register: () => {
+    customElements.define('e-button', defineCustomElement(Button))
+  },
+}

package/elements/button/button.scss

@@ -0,0 +1,68 @@
+@use 'button-base' as *;
+@use 'button-filled' as *;
+@use 'button-outlined' as *;
+@use 'button-plain' as *;
+@use 'button-plain-small' as *;
+@use 'button-filled-inverted' as *;
+@use 'button-outlined-inverted' as *;
+@use 'button-secondary-outlined' as *;
+@use '../../base/abstracts' as a;
+@include a.button-reset;
+
+.button {
+  .icon,
+  e-icon {
+    // Icons must always have this size in button.
+    width: 24px;
+    height: 24px;
+  }
+
+  @include button-base;
+
+  // ---- PRIMARY ----
+  & {
+    @include button-filled;
+  }
+
+  &.outlined {
+    @include button-outlined;
+  }
+
+  &.plain {
+    @include button-plain;
+  }
+
+  &.plain-small {
+    @include button-plain-small;
+  }
+
+  &.filled-inverted {
+    @include button-filled-inverted;
+  }
+
+  &.outlined-inverted {
+    @include button-outlined-inverted;
+  }
+
+  // ---- SECONDARY ----
+  &.secondary-outlined {
+    @include button-secondary-outlined;
+  }
+
+  &.secondary-outlined-small {
+    padding: var(--e-space-2_5) var(--e-space-6); // stylelint-disable custom-property-pattern
+
+    @include button-secondary-outlined;
+    @include a.type(100, strong);
+  }
+
+  // States
+  &[loading] {
+    color: transparent;
+
+    .icon,
+    e-icon {
+      --icon-fill-color: transparent;
+    }
+  }
+}

package/elements/button/button.vue

@@ -0,0 +1,42 @@
+<script setup>
+import Icon from '../icon/icon.vue'
+import Loader from '../loader/loader.vue'
+
+defineProps({
+  label: String,
+  loading: Boolean,
+  disabled: Boolean,
+  icon: String,
+  href: String,
+  target: String,
+  variant: String,
+})
+</script>
+
+<template>
+  <template v-if="href">
+    <a :class="['button', variant]" :href="href" :target="target">
+      <Icon v-if="icon" :name="icon"></Icon>
+      <slot>{{ label }}</slot>
+    </a>
+  </template>
+
+  <template v-else>
+    <button
+      :class="['button', variant]"
+      :disabled="disabled || null"
+      :loading="loading || null"
+    >
+      <Icon v-if="icon" :name="icon" />
+      <slot>{{ label }}</slot>
+
+      <span class="button__loader" v-if="loading">
+        <Loader />
+      </span>
+    </button>
+  </template>
+</template>
+
+<style lang="scss" scoped>
+@use './button.scss';
+</style>

package/elements/icon/icon.ce.scss

@@ -0,0 +1,6 @@
+:host {
+  --icon-fill-color: currentcolor;
+  --icon-transition: none;
+  --icon-width: 24px;
+  --icon-height: 24px;
+}

package/elements/icon/icon.js

@@ -0,0 +1,13 @@
+import { defineCustomElement } from 'vue'
+import Icon from './icon.vue'
+import customElementBaseStyle from '../../base/custom-element-base.scss?inline'
+import ceStyles from './icon.ce.scss?inline'
+import styles from './icon.scss?inline'
+
+Icon.styles = [customElementBaseStyle, ceStyles, styles]
+
+export const IconElement = {
+  register: () => {
+    customElements.define('e-icon', defineCustomElement(Icon))
+  },
+}

package/elements/icon/icon.scss

@@ -0,0 +1,25 @@
+.icon {
+  display: block;
+  fill: var(--icon-fill-color, currentColor);
+
+  // Default dimension, in case the given icon doesn't exist. Else the svg would use the default size 300x150px.
+  width: var(--icon-width, 24px);
+  height: var(--icon-height, 24px);
+
+  // TODO: refactor this. per default there should be no transitions. (buttons need transition on icons.)
+
+  // transition: fill var(--e-trs-duration-faster) var(--e-trs-easing-default);
+
+  // solution for the above
+  transition: var(--icon-transition, none);
+
+  &.icon--custom-size {
+    width: 100%;
+    height: 100%;
+  }
+
+  &.icon--inline {
+    display: inline-block;
+    vertical-align: baseline;
+  }
+}

package/elements/icon/icon.vue

@@ -0,0 +1,80 @@
+<script setup>
+import { ref } from 'vue'
+import { assetsPath } from '../../globals.js'
+
+/**
+ * Path prefix for icons.
+ */
+const iconPath = assetsPath + '/icons/'
+
+/**
+ * This map will hold all fetched icons. Should minimize unnecesary requests. It's just a cache.
+ */
+const iconMap = new Map()
+
+/**
+ * A simple (non-visible) placeholder, which will is used when an error happened or the icon couldn't be found.
+ */
+const svgPlaceholder = `
+  <svg width="24" height="24"></svg>
+`
+
+/**
+ * @typedef { import('vue').Ref } Ref
+ */
+let svgContent = ref(svgPlaceholder)
+
+/**
+ * Fetches an icon from the assets folder. Or if already fecthed gets it from `iconMap`.
+ *
+ * @param {string} name - Icon name (without extension)
+ * @returns {Ref}
+ */
+const getIcon = (name) => {
+  // Check if icon has already been fetched.
+  if (iconMap.has(name)) {
+    svgContent.value = iconMap.get(name)
+    return svgContent.value
+  }
+
+  fetch(`${iconPath}${name}.svg`)
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error('Something went wrong when fetching the icon.')
+      }
+
+      return response.text()
+    })
+    .then((text) => {
+      iconMap.set(name, text)
+      svgContent.value = text
+    })
+    .catch((err) => {
+      svgContent.value = svgPlaceholder
+    })
+
+  return svgContent.value
+}
+
+defineProps({
+  name: String,
+  inline: Boolean,
+  width: Number,
+  height: Number,
+})
+</script>
+
+<template>
+  <svg
+    aria-hidden="true"
+    :style="
+      width && height ? { width: width + 'px', height: height + 'px' } : false
+    "
+    :class="['icon', { 'icon-inline': inline }]"
+    v-html="getIcon(name)"
+  ></svg>
+</template>
+
+<style lang="scss" scoped>
+@use './icon.scss';
+</style>

package/elements/icon-button/_icon-button-base.scss

@@ -0,0 +1,59 @@
+@use '../../base/abstracts' as a;
+
+$icon-button-size: 48px;
+
+@mixin icon-button-hover-state {
+  &::before {
+    transform: scale(1.05);
+  }
+}
+
+@mixin icon-button-base {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: a.rem($icon-button-size);
+  height: a.rem($icon-button-size);
+  border-radius: 100%;
+  color: transparent;
+
+  // Pointer should only be used for actual 'links'.
+  // And buttons shouldn't have a pointer cursor. But it seems people still want this.
+  cursor: pointer;
+
+  .icon,
+  e-icon {
+    position: relative;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 100%;
+    border-width: 2px;
+    border-style: solid;
+    transition:
+      background-color a.$trs-default,
+      border-color a.$trs-default,
+      transform a.$trs-default;
+  }
+
+  &:hover:not(:disabled) {
+    @include icon-button-hover-state;
+  }
+
+  &:active {
+    &::before {
+      transform: scale(1);
+    }
+  }
+
+  &:disabled {
+    cursor: default;
+  }
+}