From 83d8ee322c6c5a03e57e5a798fa47e955eeef11e Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 6 Apr 2023 21:07:25 +0200 Subject: [PATCH 1/3] refactor(icon): provide possibility for overwrites for font-size of the icons from the outside. --- source/_patterns/00-base/icons/_icons.helpers.scss | 8 +++++--- source/_patterns/00-base/icons/_icons.placeholder.scss | 2 -- source/_patterns/00-base/icons/icons.scss | 2 ++ 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/source/_patterns/00-base/icons/_icons.helpers.scss b/source/_patterns/00-base/icons/_icons.helpers.scss index 41d40d7975..dfb8da8add 100644 --- a/source/_patterns/00-base/icons/_icons.helpers.scss +++ b/source/_patterns/00-base/icons/_icons.helpers.scss @@ -9,7 +9,11 @@ &::#{$position} { --icon-font-family: "#{"icons-" + $size + "-" + $style}", "missing-icons" !important; - --icon-font-size: #{to-rem($pxValue: $size)}; + + font-size: var( + --icon-font-size-#{$position}, + var(--icon-font-size, #{to-rem($pxValue: $size)}) + ); @if $position == "before" { margin-inline-end: var(--icon-margin-after, #{$icon-content-space}); @@ -30,8 +34,6 @@ /*** icon - partial ***/ // * use !important to prevent issues with browser extensions that change fonts font-family: var(--icon-font-family) !important; - - font-size: var(--icon-font-size); font-style: normal; font-variant: normal; diff --git a/source/_patterns/00-base/icons/_icons.placeholder.scss b/source/_patterns/00-base/icons/_icons.placeholder.scss index 456a3ee533..578c368588 100644 --- a/source/_patterns/00-base/icons/_icons.placeholder.scss +++ b/source/_patterns/00-base/icons/_icons.placeholder.scss @@ -10,8 +10,6 @@ // * use !important to prevent issues with browser extensions that change fonts font-family: var(--icon-font-family) !important; - font-size: var(--icon-font-size); - // * Better Font Rendering =========== -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; diff --git a/source/_patterns/00-base/icons/icons.scss b/source/_patterns/00-base/icons/icons.scss index 4311ea8bac..6155ccc404 100644 --- a/source/_patterns/00-base/icons/icons.scss +++ b/source/_patterns/00-base/icons/icons.scss @@ -12,6 +12,7 @@ &::before { @extend %icon; margin-inline-end: var(--icon-margin-after, #{$icon-content-space}); + font-size: var(--icon-font-size-before, var(--icon-font-size)); } } @@ -19,6 +20,7 @@ &::after { @extend %icon; margin-inline-start: var(--icon-margin-before, #{$icon-content-space}); + font-size: var(--icon-font-size-after, var(--icon-font-size)); } } From 13f07932f0b2733c69ca062494316144f5a8f9b3 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 6 Apr 2023 21:44:26 +0200 Subject: [PATCH 2/3] docs: added relevant information regarding that new possibility --- source/_patterns/00-base/icons/_icons.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/source/_patterns/00-base/icons/_icons.md b/source/_patterns/00-base/icons/_icons.md index 147f12bf4d..650f60570a 100644 --- a/source/_patterns/00-base/icons/_icons.md +++ b/source/_patterns/00-base/icons/_icons.md @@ -94,6 +94,22 @@ In case of the need to display only the icon and hide the text next to it, use t .is-icon-text-replace ``` +###### Tweaking icons `font-size` + +If you'd like to control the icons `font-size` any further (defining sizes in between all of the `data-icon-variant` declarations, like e.g. having an icon `font-size` of `23px` instead of `24px` when defining `data-icon-variant="24-outline"`), you could set set one of the CSS variables `--icon-font-size-before` or `--icon-font-size-after` (in this case `--icon-font-size-before: 23px`). + +```html +Alarm +``` + +#### Further tweaking + ### SVG files As mentioned above we're even also providing all of the icon sources (`svg` files) within this package in the folder `node_modules/@db-ui/core/dist/icons/`. From 8b4eb77309c4867c1b4421fcc5b69821657c8cae Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Tue, 11 Apr 2023 10:16:48 +0200 Subject: [PATCH 3/3] refactor: hardening by adding a default value --- source/_patterns/00-base/icons/icons.scss | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/source/_patterns/00-base/icons/icons.scss b/source/_patterns/00-base/icons/icons.scss index 6155ccc404..666517a1fa 100644 --- a/source/_patterns/00-base/icons/icons.scss +++ b/source/_patterns/00-base/icons/icons.scss @@ -12,7 +12,10 @@ &::before { @extend %icon; margin-inline-end: var(--icon-margin-after, #{$icon-content-space}); - font-size: var(--icon-font-size-before, var(--icon-font-size)); + font-size: var( + --icon-font-size-before, + var(--icon-font-size, #{to-rem($pxValue: $icon-size)}) + ); } } @@ -20,7 +23,10 @@ &::after { @extend %icon; margin-inline-start: var(--icon-margin-before, #{$icon-content-space}); - font-size: var(--icon-font-size-after, var(--icon-font-size)); + font-size: var( + --icon-font-size-after, + var(--icon-font-size, #{to-rem($pxValue: $icon-size)}) + ); } }