[KOA-6229] Add viewbox to all JS icons and spinners (#224)

* Add viewbox to all JS icons and spinners * fix lint * Update default spinner
Skyscanner · Aug 10, 2023 · 262809c · 262809c
1 parent 144f367
commit 262809c
Show file tree

Hide file tree

Showing 562 changed files with 941 additions and 908 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,7 +1,26 @@
+# 2023-08-07
+
+**Added:**
+
+`@skyscanner/bpk-foundations-web`: 16.1.0 => 17.0.0 </br>
+`@skyscanner/bpk-foundations-ios`: 6.1.0 => 6.2.0 </br>
+`@skyscanner/bpk-foundations-android`: 7.1.0 => 7.2.0 </br>
+- Add new private colour for map markers.
+
+**Breaking:**
+
+- `@skyscanner/bpk-foundations-web`: 16.1.0 => 17.0.0
+  - Remove `spacing v2` and `spacing` tokens.
+  - Remove `bpk-heading-content-margin-top` token. 
+  - Spacing functions now only return the newer spacing values.
+
+- `bpk-mixins`: 41.2.1 => 42.0.0
+  - Remove `bpk-content-heading` as this is not used.
+
 # 2023-08-03
 
 **Breaking:**
-`bpk-svgs`: 16.4.0 => 17.0.0
+`@skyscanner/bpk-svgs`: 16.4.0 => 17.0.0
 - All JS icons have `aria-hidden` attribute set to true by default to hide icons from Assistive Technologies. You can overwrite the value if needed by passing `aria-hidden="false"` to the icon component.
 
 # 2023-07-25

diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -1,16 +1,4 @@
-**Added:**
-
-`@skyscanner/bpk-foundations-web`: </br>
-`@skyscanner/bpk-foundations-ios`: </br>
-`@skyscanner/bpk-foundations-android`: </br>
-- Add new private colour for map markers.
-
 **Breaking:**
 
-- bpk-foundations-web:
-  - Remove `spacing v2` and `spacing` tokens.
-  - Remove `bpk-heading-content-margin-top` token. 
-  - Spacing functions now only return the newer spacing values.
-
-- bpk-mixins:
-  - Remove `bpk-content-heading` as this is not used.
+`@skyscanner/bpk-svgs`:
+- All JS icons and spinners have a `viewBox` attribute and no longer have `width` and `height` attributes. This should not have any visual impact, but might break snapshots.
diff --git a/packages/bpk-svgs/dist/js/icons/lg/accessibility.js b/packages/bpk-svgs/dist/js/icons/lg/accessibility.js
@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" style={{
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" style={{
   width: "1.5rem",
   height: "1.5rem"
 }} {...props}><path d="M12 2a10 10 0 1010 10A10 10 0 0012 2zm0 18a8 8 0 118-8 8 8 0 01-8 8zM11 7.597V6.445a.314.314 0 01.19-.303A2.216 2.216 0 0112 6a2.15 2.15 0 01.797.141.33.33 0 01.203.314v1.142c0 .448-.5.676-1 .676s-1-.228-1-.676zm5.996 1.932a.525.525 0 01-.469.518l-2.35.235a1 1 0 00-.895.896l-.093.936a.97.97 0 00.005.241l.72 5.047a.524.524 0 01-1.023.218l-.795-2.784a.1.1 0 00-.192 0l-.795 2.784a.524.524 0 01-1.024-.218l.721-5.047a.916.916 0 00.005-.24l-.093-.937a1 1 0 00-.896-.896l-2.35-.235A.525.525 0 017.525 9h8.95a.525.525 0 01.521.529z" /></svg>);
diff --git a/packages/bpk-svgs/dist/js/icons/lg/account--add.js b/packages/bpk-svgs/dist/js/icons/lg/account--add.js
@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" style={{
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" style={{
   width: "1.5rem",
   height: "1.5rem"
 }} {...props}><path d="M9.5 12c1.5 0 3-.8 3-2.378V4.6a1.179 1.179 0 00-.608-1.102A5.616 5.616 0 009.5 3a5.833 5.833 0 00-2.428.499A1.13 1.13 0 006.5 4.568v5.054C6.5 11.199 8 12 9.5 12zm-1-3h2v.028a1 1 0 01-2 0zm2 7a6.98 6.98 0 002.1 5H4.546A2.951 2.951 0 011.5 18.227v-.996a1.77 1.77 0 01.99-1.634A16.867 16.867 0 019.472 14q.666 0 1.3.058A7.002 7.002 0 0010.5 16zm7-5a5 5 0 105 5 5 5 0 00-5-5zm3 5a1 1 0 01-1 1h-1v1a1 1 0 01-2 0v-1h-1a1 1 0 010-2h1v-1a1 1 0 012 0v1h1a1 1 0 011 1z" /></svg>);
diff --git a/packages/bpk-svgs/dist/js/icons/lg/account--female.js b/packages/bpk-svgs/dist/js/icons/lg/account--female.js
@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" style={{
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" style={{
   width: "1.5rem",
   height: "1.5rem"
 }} {...props}><path d="M10.865 12h2.27a8.07 8.07 0 003.223-.614c.234-.117.15-.44-.046-.61a3.617 3.617 0 01-.744-2.63 8.345 8.345 0 01.079-1.068 4.03 4.03 0 00-.08-1.808c-.454-1.575-1.296-1.766-2.27-1.46a2.682 2.682 0 00-4.54 1.284 10.123 10.123 0 00-.325 3.052 3.617 3.617 0 01-.744 2.63c-.197.17-.28.493-.046.61a8.07 8.07 0 003.223.614zM11 9h2v.028a1 1 0 01-2 0zm9 8.25v.977A2.712 2.712 0 0117.227 21H7.045A2.951 2.951 0 014 18.227v-.995a1.77 1.77 0 01.99-1.634A16.866 16.866 0 0111.972 14a17.328 17.328 0 017.016 1.6A1.784 1.784 0 0120 17.25z" /></svg>);
diff --git a/packages/bpk-svgs/dist/js/icons/lg/account--id-card.js b/packages/bpk-svgs/dist/js/icons/lg/account--id-card.js
@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" style={{
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" style={{
   width: "1.5rem",
   height: "1.5rem"
 }} {...props}><path d="M18.922 2H5a3.226 3.226 0 00-3 3v13.768A3.27 3.27 0 005 22h14a3.226 3.226 0 003-3V5a3.238 3.238 0 00-3.078-3zM8 7.858A.878.878 0 018.897 7h1.206a.878.878 0 01.897.858v1.707a1.501 1.501 0 01-3 0zm6 7.557A1.537 1.537 0 0112.44 17H6.713A1.67 1.67 0 015 15.415v-.653a.892.892 0 01.487-.815A9.372 9.372 0 019.484 13a9.647 9.647 0 014.017.947.898.898 0 01.499.825zM18.5 11h-4a.5.5 0 010-1h4a.5.5 0 010 1zm0-2h-4a.5.5 0 010-1h4a.5.5 0 010 1z" /></svg>);
diff --git a/packages/bpk-svgs/dist/js/icons/lg/account--name.js b/packages/bpk-svgs/dist/js/icons/lg/account--name.js
@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" style={{
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" style={{
   width: "1.5rem",
   height: "1.5rem"
 }} {...props}><path d="M10 12c1.5 0 3-.8 3-2.378V4.6a1.179 1.179 0 00-.608-1.102A5.619 5.619 0 0010 3a5.833 5.833 0 00-2.428.499A1.13 1.13 0 007 4.568v5.054C7 11.2 8.5 12 10 12zM9 9h2v.028a1 1 0 01-2 0zm9 8.25v.977A2.712 2.712 0 0115.227 21H5.045A2.951 2.951 0 012 18.227v-.995a1.77 1.77 0 01.99-1.634A16.866 16.866 0 019.972 14a17.328 17.328 0 017.016 1.6A1.784 1.784 0 0118 17.25zM22 7a1 1 0 01-1 1h-4a1 1 0 010-2h4a1 1 0 011 1zm-1 4a1 1 0 01-1 1h-3a1 1 0 010-2h3a1 1 0 011 1z" /></svg>);
diff --git a/packages/bpk-svgs/dist/js/icons/lg/account--permit.js b/packages/bpk-svgs/dist/js/icons/lg/account--permit.js
@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" style={{
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" style={{
   width: "1.5rem",
   height: "1.5rem"
 }} {...props}><path d="M4 5a3 3 0 013-3h10a3 3 0 013 3v16.382a1 1 0 01-1.447.894l-5.659-2.829a2 2 0 00-1.788 0l-5.659 2.83A1 1 0 014 21.381V5zm13.237 3.676a1 1 0 00-1.474-1.352l-4.794 5.23-2.262-2.261a1 1 0 10-1.414 1.414l3 3a1 1 0 001.444-.031l5.5-6z" /></svg>);
diff --git a/packages/bpk-svgs/dist/js/icons/lg/account-circle.js b/packages/bpk-svgs/dist/js/icons/lg/account-circle.js
@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" style={{
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" style={{
   width: "1.5rem",
   height: "1.5rem"
 }} {...props}><path d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10zM6.21 15.975A7.037 7.037 0 0012 19a7.037 7.037 0 005.79-3.024c.427-.613.174-1.435-.5-1.762A12.06 12.06 0 0012 13c-1.898 0-3.693.436-5.29 1.213-.673.327-.927 1.15-.5 1.762zM10.994 5C10.17 5 9.5 5.618 9.5 6.381v2.31C9.5 9.965 10.62 11 12 11s2.5-1.035 2.5-2.31V6.382C14.5 5.618 13.83 5 13.005 5h-2.01z" /></svg>);
diff --git a/packages/bpk-svgs/dist/js/icons/lg/account.js b/packages/bpk-svgs/dist/js/icons/lg/account.js
@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" style={{
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" style={{
   width: "1.5rem",
   height: "1.5rem"
 }} {...props}><path d="M12 12c1.5 0 3-.8 3-2.378V4.6a1.179 1.179 0 00-.608-1.102A5.619 5.619 0 0012 3a5.833 5.833 0 00-2.428.499A1.13 1.13 0 009 4.568v5.054C9 11.2 10.5 12 12 12zm-1-3h2v.028a1 1 0 01-2 0zm7.988 6.6a17.328 17.328 0 00-7.016-1.6 16.866 16.866 0 00-6.982 1.598A1.77 1.77 0 004 17.232v.995A2.951 2.951 0 007.045 21h10.182A2.712 2.712 0 0020 18.227v-.977a1.784 1.784 0 00-1.012-1.65z" /></svg>);
diff --git a/packages/bpk-svgs/dist/js/icons/lg/add-circle.js b/packages/bpk-svgs/dist/js/icons/lg/add-circle.js
@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" style={{
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" style={{
   width: "1.5rem",
   height: "1.5rem"
 }} {...props}><path d="M12 2a10 10 0 1010 10A10 10 0 0012 2zm4 11h-3v3a1 1 0 01-2 0v-3H8a1 1 0 010-2h3V8a1 1 0 012 0v3h3a1 1 0 010 2z" /></svg>);
diff --git a/packages/bpk-svgs/dist/js/icons/lg/adult.js b/packages/bpk-svgs/dist/js/icons/lg/adult.js
@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" style={{
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" style={{
   width: "1.5rem",
   height: "1.5rem"
 }} {...props}><path d="M10 1.98a.697.697 0 01.382-.667A4.083 4.083 0 0112 1a3.974 3.974 0 011.595.31A.73.73 0 0114 2v2.514C14 5.5 13 6 12 6s-2-.5-2-1.486zm6 12.244V8.302a.84.84 0 00-.548-.823A12.589 12.589 0 0012.035 7a12.671 12.671 0 00-3.488.55.854.854 0 00-.547.83v5.92c0 .402.62.749 1.191.964a1.195 1.195 0 01.805.989l.45 5.823a1 1 0 00.997.923h1.184a1 1 0 00.997-.923l.45-5.823a1.267 1.267 0 01.797-1.014C15.418 15 16 14.624 16 14.224z" /></svg>);
diff --git a/packages/bpk-svgs/dist/js/icons/lg/ai.js b/packages/bpk-svgs/dist/js/icons/lg/ai.js
diff --git a/packages/bpk-svgs/dist/js/icons/lg/aircon.js b/packages/bpk-svgs/dist/js/icons/lg/aircon.js
@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" style={{
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" style={{
   width: "1.5rem",
   height: "1.5rem"
 }} {...props}><path d="M13 3a1 1 0 00-2 0v3.296L8.659 4.247a1 1 0 00-1.317 1.506L11 8.953V11H8.954L5.753 7.341a1 1 0 10-1.506 1.317L6.297 11H3a1 1 0 000 2h3.296l-2.049 2.341a1 1 0 101.506 1.318L8.953 13H11v2.046l-3.659 3.201a1 1 0 101.317 1.506L11 17.703V21a1 1 0 002 0v-3.296l2.341 2.049a1 1 0 101.318-1.506L13 15.047V13h2.046l3.201 3.659a1 1 0 001.506-1.317L17.703 13H21a1 1 0 000-2h-3.296l2.049-2.342a1 1 0 00-1.506-1.317L15.047 11H13V8.954l3.659-3.201a1 1 0 00-1.317-1.506L13 6.297z" /></svg>);
diff --git a/packages/bpk-svgs/dist/js/icons/lg/aircraft.js b/packages/bpk-svgs/dist/js/icons/lg/aircraft.js
@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" style={{
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" style={{
   width: "1.5rem",
   height: "1.5rem"
 }} {...props}><path d="M7.203 2.65L9.28 9.297a1 1 0 00.954.702h3.815a.5.5 0 00.411-.783L9.798 2.433A1 1 0 008.974 2H7.68a.5.5 0 00-.477.65z" /><path d="M4.7 10.587a1 1 0 00.81.413h14.798a3.822 3.822 0 012.077.6l.153.1a.924.924 0 010 1.6l-.153.1a3.822 3.822 0 01-2.077.6h-4.784a1 1 0 00-.822.431L9.794 21.53a1 1 0 01-.848.47H7.68a.5.5 0 01-.477-.65l2.094-6.7A.5.5 0 008.82 14H5.564a1 1 0 00-.856.482l-1.277 2.11a1.283 1.283 0 01-1.403.323h-.002a.985.985 0 01-.623-1.299l1.096-2.62a1.525 1.525 0 000-.996L1.067 9.395a1.005 1.005 0 01.607-1.29 1.272 1.272 0 011.437.292l1.59 2.19z" /></svg>);
diff --git a/packages/bpk-svgs/dist/js/icons/lg/airline--multiple.js b/packages/bpk-svgs/dist/js/icons/lg/airline--multiple.js
@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" style={{
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" style={{
   width: "1.5rem",
   height: "1.5rem"
 }} {...props}><path d="M7.341 19.435A1 1 0 008.167 21h7.42a2.002 2.002 0 001.935-1.492l3.906-14.872C21.654 3.818 21.315 3 20.75 3h-1.357a1.66 1.66 0 00-1.358.818zm5.15-9.738a1.08 1.08 0 01-.237.639L4.952 21h-1.45a1 1 0 01-.805-1.595l7.298-9.86A1.212 1.212 0 0110.973 9h.978c.308 0 .522.31.54.697z" /></svg>);
diff --git a/packages/bpk-svgs/dist/js/icons/lg/airline.js b/packages/bpk-svgs/dist/js/icons/lg/airline.js
@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" style={{
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" style={{
   width: "1.5rem",
   height: "1.5rem"
 }} {...props}><path d="M3.208 19.382A1.003 1.003 0 003.966 21h11.55a1.941 1.941 0 001.873-1.526l3.583-15.237A.992.992 0 0020.035 3H18.32a5.522 5.522 0 00-4.394 2.236z" /></svg>);
diff --git a/packages/bpk-svgs/dist/js/icons/lg/airports.js b/packages/bpk-svgs/dist/js/icons/lg/airports.js
diff --git a/packages/bpk-svgs/dist/js/icons/lg/alert--active.js b/packages/bpk-svgs/dist/js/icons/lg/alert--active.js
diff --git a/packages/bpk-svgs/dist/js/icons/lg/alert--add.js b/packages/bpk-svgs/dist/js/icons/lg/alert--add.js
@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" style={{
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" style={{
   width: "1.5rem",
   height: "1.5rem"
 }} {...props}><path d="M20.552 15.606l-.497-.995A10 10 0 0119 10.14V9.5a7 7 0 00-14 0v.64a10 10 0 01-1.055 4.47l-.497.996a2 2 0 001.79 2.894h13.525a2 2 0 001.79-2.894zM15 11.5h-2v2a1 1 0 01-2 0v-2H9a1 1 0 110-2h2v-2a1 1 0 012 0v2h2a1 1 0 010 2zm-.08 8.959a2.141 2.141 0 01-1.86 1.041h-2.12a2.138 2.138 0 01-1.86-1.041c-.28-.485.215-.959.8-.959h4.238c.585 0 1.081.474.8.959z" /></svg>);
diff --git a/packages/bpk-svgs/dist/js/icons/lg/alert--expired.js b/packages/bpk-svgs/dist/js/icons/lg/alert--expired.js
@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" style={{
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" style={{
   width: "1.5rem",
   height: "1.5rem"
 }} {...props}><path d="M20.056 14.61A10 10 0 0119 10.14V9.5a7 7 0 00-14 0v.64a10 10 0 01-1.056 4.47l-.497.996a2 2 0 001.79 2.894h13.527a2 2 0 001.79-2.894zm-5.349-1.428a1 1 0 01-1.414.025L12 11.914l-1.293 1.293-.024.024a1 1 0 01-1.39-1.438l1.293-1.293-1.293-1.293a1 1 0 011.414-1.414L12 9.086l1.293-1.293a1 1 0 011.414 1.414L13.414 10.5l1.293 1.293a1 1 0 010 1.39zm.212 7.277a2.14 2.14 0 01-1.86 1.041h-2.118a2.141 2.141 0 01-1.86-1.041c-.28-.485.215-.959.8-.959h4.238c.585 0 1.081.474.8.959z" /></svg>);
diff --git a/packages/bpk-svgs/dist/js/icons/lg/alert--remove.js b/packages/bpk-svgs/dist/js/icons/lg/alert--remove.js
@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" style={{
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" style={{
   width: "1.5rem",
   height: "1.5rem"
 }} {...props}><path d="M18.206 7.21l3.514-3.515a1 1 0 00-1.414-1.414l-3.184 3.184A7 7 0 004.78 9.988v.64a10 10 0 01-1.057 4.47l-.497.995a2 2 0 00.695 2.571L2.305 20.28a1 1 0 101.39 1.439l.024-.025L18.206 7.21c-.062.063.05-.05 0 0zm.337 11.778h-7.91a.5.5 0 01-.352-.854l7.893-7.893a.344.344 0 01.597.247l.009.14a9.998 9.998 0 001.055 4.471l.497.995a2 2 0 01-1.79 2.894zm-9.45 1.96c-.28-.486.216-.96.8-.96h4.239c.585 0 1.08.474.8.96a2.141 2.141 0 01-1.86 1.04h-2.118a2.138 2.138 0 01-1.86-1.04z" /></svg>);
diff --git a/packages/bpk-svgs/dist/js/icons/lg/arrow-down.js b/packages/bpk-svgs/dist/js/icons/lg/arrow-down.js
@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" style={{
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" style={{
   width: "1.5rem",
   height: "1.5rem"
 }} {...props}><path d="M17.293 7.5H6.707a1.632 1.632 0 00-1.296 2.701l5.081 5.724a1.75 1.75 0 002.472.121q.039-.035.075-.072l5.505-5.724a1.632 1.632 0 00-1.251-2.75z" /></svg>);
diff --git a/packages/bpk-svgs/dist/js/icons/lg/arrow-left.js b/packages/bpk-svgs/dist/js/icons/lg/arrow-left.js
@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" aria-hidden="true" style={{
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" style={{
   width: "1.5rem",
   height: "1.5rem"
 }} {...props}><path d="M16.5 17.293V6.707a1.632 1.632 0 00-2.701-1.296l-5.724 5.081a1.75 1.75 0 00-.121 2.472q.035.039.072.075l5.724 5.505a1.632 1.632 0 002.75-1.251z" /></svg>);