Skip to content

refactor(icon): provide possibility for overwrites #398

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Apr 12, 2023
Merged

refactor(icon): provide possibility for overwrites #398

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
83d8ee3
refactor(icon): provide possibility for overwrites
mfranzke Apr 6, 2023
3ec317f
Merge branch 'main' into 376-possibility-to-overwrite-icons-font-size
mfranzke Apr 6, 2023
13f0793
docs: added relevant information regarding that new possibility
mfranzke Apr 6, 2023
7ccf77a
Merge branch 'main' into 376-possibility-to-overwrite-icons-font-size
mfranzke Apr 11, 2023
970d5e5
Merge branch '376-possibility-to-overwrite-icons-font-size' of https:…
mfranzke Apr 11, 2023
8b4eb77
refactor: hardening by adding a default value
mfranzke Apr 11, 2023
becc45f
Merge branch 'main' into 376-possibility-to-overwrite-icons-font-size
mfranzke Apr 11, 2023
29621d3
Merge branch 'main' into 376-possibility-to-overwrite-icons-font-size
mfranzke Apr 12, 2023
993455b
Merge branch 'main' into 376-possibility-to-overwrite-icons-font-size
mfranzke Apr 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions source/_patterns/00-base/icons/_icons.helpers.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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});
Expand All @@ -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;

Expand Down
16 changes: 16 additions & 0 deletions source/_patterns/00-base/icons/_icons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
<a
href="#"
data-icon="alarm"
data-icon-variant="24-outline"
style="--icon-font-size-before: 23px"
>Alarm</a
>
```

#### 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/`.
Expand Down
2 changes: 0 additions & 2 deletions source/_patterns/00-base/icons/_icons.placeholder.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
8 changes: 8 additions & 0 deletions source/_patterns/00-base/icons/icons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,21 @@
&::before {
@extend %icon;
margin-inline-end: var(--icon-margin-after, #{$icon-content-space});
font-size: var(
--icon-font-size-before,
var(--icon-font-size, #{to-rem($pxValue: $icon-size)})
);
}
}

[data-icon-after] {
&::after {
@extend %icon;
margin-inline-start: var(--icon-margin-before, #{$icon-content-space});
font-size: var(
--icon-font-size-after,
var(--icon-font-size, #{to-rem($pxValue: $icon-size)})
);
}
}

Expand Down