[ARGG-812]: Remove svg imports and icon functions (#3048)

* [ARGG-812]: Remove svg imports and icon functions

* Update bpk-svgs version to latest

package.json

@@ -121,8 +121,8 @@
     "@babel/register": "^7.18.9",
     "@percy/cli": "^1.20.0",
     "@percy/storybook": "^4.3.6",
-    "@skyscanner/bpk-foundations-web": "^17.2.0",
-    "@skyscanner/bpk-svgs": "^18.1.2",
+    "@skyscanner/bpk-foundations-web": "^17.4.0",
+    "@skyscanner/bpk-svgs": "^19.0.0",
     "@skyscanner/stylelint-config-skyscanner": "^10.0.0",
     "@storybook/addon-a11y": "^7.1.1",
     "@storybook/addon-actions": "^7.1.1",

packages/bpk-mixins/src/mixins/_svgs.scss

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-@import '~@skyscanner/bpk-svgs/index.scss';
 @import '../bonds.scss';
 @import './utils.scss';
 
@@ -30,34 +29,6 @@
 /// @group svgs
 ////
 
-/// Icon factory.
-///
-/// @param {variable} $spacing
-/// @param {key} $icon
-///
-/// @access private
-
-@mixin _bpk-icon-factory($map, $size, $icon) {
-  @if map_has_key($map, $icon) != true {
-    $err: (
-      'Could not find "' +
-        $icon +
-        '" icon. Refer to ' +
-        'https://skyscanner.design/latest/components/icon/overview.html' +
-        ' for the list of supported icons.'
-    );
-
-    @error $err;
-  }
-
-  content: '';
-  display: inline-block;
-  width: $size;
-  height: $size;
-  background: url(map-get($map, $icon)) no-repeat;
-  background-size: cover;
-}
-
 /// Button alignment utility.
 ///
 /// @access private
@@ -75,70 +46,6 @@
   vertical-align: top;
 }
 
-/// Icon.
-///
-/// > **Note:** You will need to pass the sassFunction `encodebase64` to your node-sass process to use this mixin:
-/// >
-/// > ```js
-/// > var sass = require('node-sass');
-/// > var sassFunctions = require('bpk-mixins/sass-functions');
-/// > ...
-/// > sass.render({
-/// >   file: 'mysassfile.scss',
-/// >   functions: sassFunctions,
-/// > });
-/// > ```
-///
-/// @param {key} $icon
-/// @param {variable} $color
-/// @param {key} $size
-///
-/// @example scss
-///   .selector {
-///     @include bpk-icon(flight, $bpk-color-sky-gray-tint-02, large);
-///   }
-
-@mixin bpk-icon($icon, $color, $size: small) {
-  @if function-exists(encodebase64) != true {
-    $err: (
-      'Could not find encodebase64 function. Refer to ' +
-        'https://backpack.github.io/sassdoc/#svgs-mixin-bpk-icon' +
-        ' on how to provide it to node-sass.'
-    );
-
-    @error $err;
-  }
-
-  $icon-map: if($size == large, $bpk-icons-no-color-lg, $bpk-icons-no-color-sm);
-
-  @if map_has_key($icon-map, $icon) != true {
-    $err: (
-      'Could not find "' +
-        $icon +
-        '" icon. Refer to' +
-        'https://skyscanner.design/latest/components/icon/overview.html' +
-        ' for the list of supported icons.'
-    );
-
-    @error $err;
-  }
-
-  $icon-size: if($size == large, $bpk-icon-size-lg, $bpk-icon-size-sm);
-
-  /* Disabling rule here as this method is for newer sass versions that we don't yet support */
-  /* stylelint-disable-next-line scss/no-global-function-names */
-  $raw-svg: map-get($icon-map, $icon);
-  $svg-string: str-replace($raw-svg, '$$COLOR$$', $color);
-  $datauri: 'data:image/svg+xml;base64,' + encodebase64($svg-string);
-
-  content: '';
-  display: inline-block;
-  width: $icon-size;
-  height: $icon-size;
-  background: url($datauri) no-repeat;
-  background-size: cover;
-}
-
 /// Align to button. Modifies the bpk-icon-sm mixin.
 ///
 /// @require {mixin} bpk-icon-sm

packages/package.json

@@ -25,7 +25,7 @@
     "@popperjs/core": "^2.11.5",
     "@react-google-maps/api": "^2.12.0",
     "@skyscanner/bpk-foundations-web": "^17.4.0",
-    "@skyscanner/bpk-svgs": "^18.1.2",
+    "@skyscanner/bpk-svgs": "^19.0.0",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
     "d3-path": "^2.0.0",