Little adjustments / fixes

Pulsanova · Jul 30, 2024 · 99e5a16 · 99e5a16
1 parent 0f1725a
commit 99e5a16
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # @pulsanova/icons
 
-> An icon set, ready to be used in SCSS (entirely based on Phosphor icons)
+> An icon set, ready to be used in SCSS (entirely based on Phosphor icons)  
 > _(See `./package.json` for the exact version of Phosphor on which this project is based)_
 
 ## Installation
@@ -12,3 +12,17 @@ npm install @pulsanova/icons
 # - Yarn
 yarn add @pulsanova/icons
 ```
+
+## Usage
+
+```scss
+@use '@pulsanova/icons' with (
+    $duotone-primary-color: #eb4034,
+);
+
+.my-rule {
+    @include icons.icon('plus', 'fill') {
+        font-size: 1.75rem;
+    }
+}
+```
diff --git a/style/_mixins.scss b/style/_mixins.scss
@@ -15,7 +15,7 @@
     font-style: normal;
     line-height: 1;
     font-variant: normal;
-    speak: never;
+    speak: none;
     text-transform: none;
     text-rendering: auto;
     word-wrap: normal;
@@ -24,7 +24,15 @@
     // - Enable Ligatures.
     // stylelint-disable-next-line order/properties-order
     letter-spacing: 0;
-    font-feature-settings: 'liga' 1;
+
+    /* stylelint-disable property-no-vendor-prefix, declaration-block-no-duplicate-properties */
+    -webkit-font-feature-settings: 'liga';
+    -moz-font-feature-settings: 'liga=1';
+    -moz-font-feature-settings: 'liga';
+    -ms-font-feature-settings: 'liga' 1;
+    font-feature-settings: 'liga';
+    /* stylelint-enable property-no-vendor-prefix, declaration-block-no-duplicate-properties */
+
     font-variant-ligatures: discretionary-ligatures;
 
     // - Improve font rendering.
@@ -42,7 +50,7 @@
     line-height: 1;
     font-variant: normal;
     text-transform: none;
-    speak: never;
+    speak: none;
 
     // - Improve font rendering.
     -webkit-font-smoothing: antialiased;
@@ -111,11 +119,11 @@
     @if ($variant == 'duotone') {
         position: relative;
 
-        // @if ($after) {
-        //     padding-right: 1.25em;
-        // } @else {
-        //     padding-left: 1.25em;
-        // }
+        @if ($after) {
+            padding-right: 1.25em;
+        } @else {
+            padding-left: 1.25em;
+        }
 
         &::before {
             color: $duotone-secondary-color;
@@ -148,11 +156,11 @@
                 @if ($variant == 'duotone') {
                     @extend %icon-font-duotone;
 
-                    // position: absolute;
-                    // top: 50%;
-                    // width: 1.25em;
-                    // text-align: center;
-                    // transform: translateY(-50%);
+                    position: absolute;
+                    top: 50%;
+                    width: 1.25em;
+                    text-align: center;
+                    transform: translateY(-50%);
 
                     @if ($after) {
                         right: 0;

diff --git a/style/_variables.scss b/style/_variables.scss
@@ -1,6 +1,6 @@
 /// Path to the font files root directory.
 /// @type String
-$font-root-path: '~@phosphor-icons/web/src' !default;
+$font-root-path: '~@phosphor-icons/web/' !default;
 
 /// Primary color used for duotone icons.
 /// @type Color