Merge pull request #427 from BeAPI/feat/external-link

Add link external to target _blank

src/scss/02-tools/_m-text-icon.scss

@@ -0,0 +1,33 @@
+/**
+ * Add icon before text with mask to have the same color of the text
+ *
+ * @author Cédric Andrietti
+ *
+ * @param $icon
+ *
+ * Examples :
+ *
+ *      .my-element {
+ *          @include text-icon('search');
+ *      }
+ *
+ */
+
+@mixin text-icon($icon: "arrow", $position: after, $color: currentColor, $size: 12px) {
+    position: relative;
+    display: inline-flex;
+    gap: 8px;
+    align-items: center;
+
+    &::#{$position} {
+        display: block;
+        width: $size;
+        height: $size;
+        content: "";
+        background-color: $color;
+        mask-image: get-svg-url($icon);
+        mask-position: center;
+        mask-repeat: no-repeat;
+        transition: background-color .5s $ease-out-expo;
+    }
+}

src/scss/02-tools/tools.scss

@@ -38,3 +38,4 @@
 @import "./m-not-acf";
 @import "./m-rtl";
 @import "./m-text";
+@import "./m-text-icon";

src/scss/03-base/_links.scss

@@ -3,7 +3,15 @@ a {
     text-decoration: underline;
     cursor: pointer;
 
+    &[target="_blank"] {
+        @include text-icon("external");
+    }
+
     @include hover {
         text-decoration: none;
     }
 }
+
+.link-external {
+    @include text-icon("external");
+}