[LOOM-1377]: transform to mjs & replace svg2react with svgr (#71)

README.md

@@ -26,6 +26,15 @@ This package exposes Backpack SVGs in various formats:
   dist/font/BpkIcon.ttf
   ```
 
+## Implementation 
+
+`.svg` assets are stored within `./src` and various different formats are generated based upon this source. The generation tasks are defined within `gulpfile.mjs`. 
+
+### JS
+
+For web consumption, `.svg` files are transformed into individual react components. [svgr](https://react-svgr.com/) is used to power the transformation, optimisation and form of the resulting react component. The current `svgr` setup will create typescript components, in order to provide consumers with `.js` assets to consume within their react codebase, `typescript` is used to transpile from typescript to javascript. `.d.ts` files are nested alongside the original source to provide typescript types to consumers.
+
+
 ## Contributing
 
 To contribute please see [contributing.md](CONTRIBUTING.md).

dist/js/icons/lg/accessibility.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { SVGProps } from 'react';
+declare const AccessibilityIcon: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default AccessibilityIcon;

dist/js/icons/lg/accessibility.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+const AccessibilityIcon = (props) => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="1.5rem" height="1.5rem" {...props}>
+    <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2m0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8M11 7.597V6.445a.31.31 0 0 1 .19-.303A2.2 2.2 0 0 1 12 6a2.2 2.2 0 0 1 .797.141.33.33 0 0 1 .203.314v1.142c0 .448-.5.676-1 .676s-1-.228-1-.676m5.996 1.932a.525.525 0 0 1-.469.518l-2.35.235a1 1 0 0 0-.895.896l-.093.936a1 1 0 0 0 .005.241l.72 5.047a.524.524 0 0 1-1.023.218l-.795-2.784a.1.1 0 0 0-.192 0l-.795 2.784a.524.524 0 0 1-1.024-.218l.721-5.047a1 1 0 0 0 .005-.24l-.093-.937a1 1 0 0 0-.896-.896l-2.35-.235A.525.525 0 0 1 7.525 9h8.95a.525.525 0 0 1 .521.529"/>
+  </svg>);
+export default AccessibilityIcon;

dist/js/icons/lg/account--add.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { SVGProps } from 'react';
+declare const AccountAddIcon: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default AccountAddIcon;

dist/js/icons/lg/account--add.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+const AccountAddIcon = (props) => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="1.5rem" height="1.5rem" {...props}>
+    <path d="M9.5 12c1.5 0 3-.8 3-2.378V4.6a1.18 1.18 0 0 0-.608-1.102A5.6 5.6 0 0 0 9.5 3a5.8 5.8 0 0 0-2.428.499A1.13 1.13 0 0 0 6.5 4.568v5.054C6.5 11.199 8 12 9.5 12m-1-3h2v.028a1 1 0 0 1-2 0zm2 7a6.98 6.98 0 0 0 2.1 5H4.546A2.95 2.95 0 0 1 1.5 18.227v-.996a1.77 1.77 0 0 1 .99-1.634A16.9 16.9 0 0 1 9.472 14q.666 0 1.3.058A7 7 0 0 0 10.5 16m7-5a5 5 0 1 0 5 5 5 5 0 0 0-5-5m3 5a1 1 0 0 1-1 1h-1v1a1 1 0 0 1-2 0v-1h-1a1 1 0 0 1 0-2h1v-1a1 1 0 0 1 2 0v1h1a1 1 0 0 1 1 1"/>
+  </svg>);
+export default AccountAddIcon;

dist/js/icons/lg/account--female.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { SVGProps } from 'react';
+declare const AccountFemaleIcon: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default AccountFemaleIcon;

dist/js/icons/lg/account--female.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+const AccountFemaleIcon = (props) => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="1.5rem" height="1.5rem" {...props}>
+    <path d="M10.865 12h2.27a8.1 8.1 0 0 0 3.223-.614c.234-.117.15-.44-.046-.61a3.62 3.62 0 0 1-.744-2.63 8 8 0 0 1 .079-1.068 4 4 0 0 0-.08-1.808c-.454-1.575-1.296-1.766-2.27-1.46a2.682 2.682 0 0 0-4.54 1.284 10.1 10.1 0 0 0-.325 3.052 3.62 3.62 0 0 1-.744 2.63c-.197.17-.28.493-.046.61a8.1 8.1 0 0 0 3.223.614M11 9h2v.028a1 1 0 0 1-2 0zm9 8.25v.977A2.71 2.71 0 0 1 17.227 21H7.045A2.95 2.95 0 0 1 4 18.227v-.995a1.77 1.77 0 0 1 .99-1.634A16.9 16.9 0 0 1 11.972 14a17.3 17.3 0 0 1 7.016 1.6A1.78 1.78 0 0 1 20 17.25"/>
+  </svg>);
+export default AccountFemaleIcon;

dist/js/icons/lg/account--id-card.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { SVGProps } from 'react';
+declare const AccountIdCardIcon: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default AccountIdCardIcon;

dist/js/icons/lg/account--id-card.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+const AccountIdCardIcon = (props) => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="1.5rem" height="1.5rem" {...props}>
+    <path d="M18.922 2H5a3.226 3.226 0 0 0-3 3v13.768A3.27 3.27 0 0 0 5 22h14a3.226 3.226 0 0 0 3-3V5a3.24 3.24 0 0 0-3.078-3M8 7.858A.88.88 0 0 1 8.897 7h1.206a.88.88 0 0 1 .897.858v1.707a1.501 1.501 0 0 1-3 0zm6 7.557A1.537 1.537 0 0 1 12.44 17H6.713A1.67 1.67 0 0 1 5 15.415v-.653a.89.89 0 0 1 .487-.815A9.4 9.4 0 0 1 9.484 13a9.65 9.65 0 0 1 4.017.947.9.9 0 0 1 .499.825zM18.5 11h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 1 0 1m0-2h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 1 0 1"/>
+  </svg>);
+export default AccountIdCardIcon;

dist/js/icons/lg/account--name.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { SVGProps } from 'react';
+declare const AccountNameIcon: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default AccountNameIcon;

dist/js/icons/lg/account--name.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+const AccountNameIcon = (props) => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="1.5rem" height="1.5rem" {...props}>
+    <path d="M10 12c1.5 0 3-.8 3-2.378V4.6a1.18 1.18 0 0 0-.608-1.102A5.6 5.6 0 0 0 10 3a5.8 5.8 0 0 0-2.428.499A1.13 1.13 0 0 0 7 4.568v5.054C7 11.2 8.5 12 10 12M9 9h2v.028a1 1 0 0 1-2 0zm9 8.25v.977A2.71 2.71 0 0 1 15.227 21H5.045A2.95 2.95 0 0 1 2 18.227v-.995a1.77 1.77 0 0 1 .99-1.634A16.9 16.9 0 0 1 9.972 14a17.3 17.3 0 0 1 7.016 1.6A1.78 1.78 0 0 1 18 17.25M22 7a1 1 0 0 1-1 1h-4a1 1 0 0 1 0-2h4a1 1 0 0 1 1 1m-1 4a1 1 0 0 1-1 1h-3a1 1 0 0 1 0-2h3a1 1 0 0 1 1 1"/>
+  </svg>);
+export default AccountNameIcon;

dist/js/icons/lg/account--permit.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { SVGProps } from 'react';
+declare const AccountPermitIcon: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default AccountPermitIcon;

dist/js/icons/lg/account--permit.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+const AccountPermitIcon = (props) => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="1.5rem" height="1.5rem" {...props}>
+    <path d="M4 5a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v16.382a1 1 0 0 1-1.447.894l-5.659-2.829a2 2 0 0 0-1.788 0l-5.659 2.83A1 1 0 0 1 4 21.381zm13.237 3.676a1 1 0 0 0-1.474-1.352l-4.794 5.23-2.262-2.261a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.444-.031z"/>
+  </svg>);
+export default AccountPermitIcon;

dist/js/icons/lg/account-circle.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { SVGProps } from 'react';
+declare const AccountCircleIcon: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default AccountCircleIcon;

dist/js/icons/lg/account-circle.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+const AccountCircleIcon = (props) => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" 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 10M6.21 15.975A7.04 7.04 0 0 0 12 19a7.04 7.04 0 0 0 5.79-3.024c.427-.613.174-1.435-.5-1.762A12.06 12.06 0 0 0 12 13c-1.898 0-3.693.436-5.29 1.213-.673.327-.927 1.15-.5 1.762M10.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>);
+export default AccountCircleIcon;

dist/js/icons/lg/account.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { SVGProps } from 'react';
+declare const AccountIcon: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default AccountIcon;

dist/js/icons/lg/account.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+const AccountIcon = (props) => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="1.5rem" height="1.5rem" {...props}>
+    <path d="M12 12c1.5 0 3-.8 3-2.378V4.6a1.18 1.18 0 0 0-.608-1.102A5.6 5.6 0 0 0 12 3a5.8 5.8 0 0 0-2.428.499A1.13 1.13 0 0 0 9 4.568v5.054C9 11.2 10.5 12 12 12m-1-3h2v.028a1 1 0 0 1-2 0zm7.988 6.6a17.3 17.3 0 0 0-7.016-1.6 16.9 16.9 0 0 0-6.982 1.598A1.77 1.77 0 0 0 4 17.232v.995A2.95 2.95 0 0 0 7.045 21h10.182A2.71 2.71 0 0 0 20 18.227v-.977a1.78 1.78 0 0 0-1.012-1.65"/>
+  </svg>);
+export default AccountIcon;

dist/js/icons/lg/add-circle.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { SVGProps } from 'react';
+declare const AddCircleIcon: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default AddCircleIcon;

dist/js/icons/lg/add-circle.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+const AddCircleIcon = (props) => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="1.5rem" height="1.5rem" {...props}>
+    <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2m4 11h-3v3a1 1 0 0 1-2 0v-3H8a1 1 0 0 1 0-2h3V8a1 1 0 0 1 2 0v3h3a1 1 0 0 1 0 2"/>
+  </svg>);
+export default AddCircleIcon;

dist/js/icons/lg/adult.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { SVGProps } from 'react';
+declare const AdultIcon: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default AdultIcon;

dist/js/icons/lg/adult.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+const AdultIcon = (props) => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="1.5rem" height="1.5rem" {...props}>
+    <path d="M10 1.98a.7.7 0 0 1 .382-.667A4.1 4.1 0 0 1 12 1a4 4 0 0 1 1.595.31A.73.73 0 0 1 14 2v2.514C14 5.5 13 6 12 6s-2-.5-2-1.486zm6 12.244V8.302a.84.84 0 0 0-.548-.823A12.6 12.6 0 0 0 12.035 7a12.7 12.7 0 0 0-3.488.55.85.85 0 0 0-.547.83v5.92c0 .402.62.749 1.191.964a1.2 1.2 0 0 1 .805.989l.45 5.823a1 1 0 0 0 .997.923h1.184a1 1 0 0 0 .997-.923l.45-5.823a1.27 1.27 0 0 1 .797-1.014C15.418 15 16 14.624 16 14.224"/>
+  </svg>);
+export default AdultIcon;

dist/js/icons/lg/ai.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { SVGProps } from 'react';
+declare const AiIcon: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default AiIcon;

dist/js/icons/lg/ai.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+const AiIcon = (props) => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="1.5rem" height="1.5rem" {...props}>
+    <path d="M4.094 1.072c-.025-.096-.163-.096-.188 0-.214.824-.734 2.775-.896 2.938-.163.162-2.114.682-2.938.896-.096.025-.096.163 0 .188.824.214 2.775.734 2.938.896.162.163.682 2.114.896 2.938.025.096.163.096.188 0 .214-.824.734-2.775.896-2.938.163-.162 2.114-.682 2.938-.896.096-.025.096-.163 0-.188-.824-.214-2.775-.734-2.938-.896-.162-.163-.682-2.114-.896-2.938m9.475 2.256c.115-.437.747-.437.862 0 .638 2.42 1.797 6.668 2.185 7.056s4.635 1.547 7.056 2.185c.437.115.437.747 0 .862-2.42.638-6.668 1.797-7.056 2.185s-1.547 4.635-2.185 7.056c-.115.437-.747.437-.862 0-.638-2.42-1.797-6.668-2.185-7.056s-4.635-1.547-7.056-2.185c-.437-.115-.437-.747 0-.862 2.42-.638 6.668-1.797 7.056-2.185s1.547-4.635 2.185-7.056M6.953 18.036c.013-.048.081-.048.094 0 .107.412.367 1.387.448 1.469.082.081 1.057.341 1.47.448.047.013.047.081 0 .094-.413.107-1.388.367-1.47.448-.081.081-.341 1.057-.448 1.47-.013.047-.081.047-.094 0-.107-.413-.367-1.389-.448-1.47s-1.057-.341-1.47-.448c-.047-.013-.047-.081 0-.094.413-.107 1.388-.367 1.47-.448.081-.081.341-1.057.448-1.47Z"/>
+  </svg>);
+export default AiIcon;

dist/js/icons/lg/aircon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { SVGProps } from 'react';
+declare const AirconIcon: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default AirconIcon;