Icon link: envariable + enhance the documentation (#38130)

* Envariable the icon-link helper

* Proposal

* .

diff --git a/scss/_variables.scss b/scss/_variables.scss
index c20af01c5187a704bd5aa3b52dfcc291d7d2fe59..ec2ff3750f8fdc09d974979f8f75956f806781e5 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -459,6 +459,15 @@ $link-hover-decoration:                   null !default;
 $stretched-link-pseudo-element:           after !default;
 $stretched-link-z-index:                  1 !default;
 
+// Icon links
+// scss-docs-start icon-link-variables
+$icon-link-gap:               .375rem !default;
+$icon-link-underline-offset:  .25em !default;
+$icon-link-icon-size:         1em !default;
+$icon-link-icon-transition:   .2s ease-in-out transform !default;
+$icon-link-icon-transform:    translate3d(.25em, 0, 0) !default;
+// scss-docs-end icon-link-variables
+
 // Paragraphs
 //
 // Style p element.

diff --git a/scss/helpers/_icon-link.scss b/scss/helpers/_icon-link.scss
index 501184e78fd52bbee60fb80946cc5239ced79f21..3f8bcb335c140158d9a44e61ba900d21fad9a5ca 100644 (file)
--- a/scss/helpers/_icon-link.scss
+++ b/scss/helpers/_icon-link.scss
@@ -1,16 +1,17 @@
 .icon-link {
   display: inline-flex;
-  gap: .375rem;
+  gap: $icon-link-gap;
   align-items: center;
   text-decoration-color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, .5));
-  text-underline-offset: .25em;
+  text-underline-offset: $icon-link-underline-offset;
   backface-visibility: hidden;
 
   > .bi {
     flex-shrink: 0;
-    width: 1em;
-    height: 1em;
-    @include transition(.2s ease-in-out transform);
+    width: $icon-link-icon-size;
+    height: $icon-link-icon-size;
+    fill: currentcolor;
+    @include transition($icon-link-icon-transition);
   }
 }
 
@@ -18,7 +19,7 @@
   &:hover,
   &:focus-visible {
     > .bi {
-      transform: var(--#{$prefix}icon-link-transform, translate3d(.25em, 0, 0));
+      transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform);
     }
   }
 }

diff --git a/site/content/docs/5.3/helpers/icon-link.md b/site/content/docs/5.3/helpers/icon-link.md
index ac36dcb3f00c849af1b74860fd0ad39bb9ca70ee..18bef9ae497b94e908d4e6c44a1330b19e802a94 100644 (file)
--- a/site/content/docs/5.3/helpers/icon-link.md
+++ b/site/content/docs/5.3/helpers/icon-link.md
@@ -45,6 +45,14 @@ Add `.icon-link-hover` to move the icon to the right on hover.
 </a>
 {{< /example >}}
 
+## Customize
+
+Modify the styling of an icon link with our link CSS variables, Sass variables, utilities, or custom styles.
+
+### CSS variables
+
+Modify the `--bs-link-*` and `--bs-icon-link-*` CSS variables as needed to change the default appearance.
+
 Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS variable:
 
 {{< example >}}
@@ -54,7 +62,22 @@ Customize the hover `transform` by overriding the `--bs-icon-link-transform` CSS
 </a>
 {{< /example >}}
 
-## Pairs with link utilities
+Customize the color by overriding the `--bs-link-*` CSS variable:
+
+{{< example >}}
+<a class="icon-link icon-link-hover" style="--bs-link-hover-color-rgb: 25, 135, 84;" href="#">
+  Icon link
+  <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right"></use></svg>
+</a>
+{{< /example >}}
+
+### Sass
+
+Customize the icon link Sass variables to modify all icon link styles across your Bootstrap-powered project.
+
+{{< scss-docs name="icon-link-variables" file="scss/_variables.scss" >}}
+
+### Utilities
 
 Modify icon links with any of [our link utilities]({{< docsref "/utilities/link/" >}}) for modifying underline color and offset.