[NO JIRA]: Fixing the icon distribution flow for generating react svgs (#108)

Author: olliecurtis

dist/js/icons/lg/award.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-const AwardIcon = (props) => (<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1.5rem" height="1.5rem" {...props}>
+const AwardIcon = (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="m15.431 9.576-.034.033a6.75 6.75 0 0 1 3.353 5.823 6.757 6.757 0 0 1-6.75 6.75 6.757 6.757 0 0 1-6.75-6.75A6.75 6.75 0 0 1 8.603 9.61a27 27 0 0 1-.793-.76c-2.44-2.43-3.983-4.828-4.685-6.04l1.298-.753c.665 1.15 2.128 3.421 4.447 5.731.296.296.59.582.885.848q.11.1.22.192l.148.126A6.7 6.7 0 0 1 12 8.683c.3 0 .594.026.884.064a25 25 0 0 1-1.381-1.106 24 24 0 0 1-1.288-1.22 28 28 0 0 1-3-3.557L8.44 2a26.8 26.8 0 0 0 3.547 4.053l.166-.151c.186-.17.372-.339.558-.529A27 27 0 0 0 15.56 2l1.227.864a28 28 0 0 1-3.005 3.562c-.153.156-.306.296-.46.436l-.196.18c.584.477 1.116.874 1.553 1.179l.128-.122q.16-.149.323-.31c2.32-2.312 3.783-4.584 4.448-5.733l1.298.752c-.702 1.213-2.245 3.61-4.686 6.042-.254.254-.508.492-.758.726m-1.484 6.52.86-.318a.297.297 0 0 0 0-.556l-.86-.318a2.29 2.29 0 0 1-1.351-1.351l-.318-.86a.296.296 0 0 0-.556 0l-.318.86a2.29 2.29 0 0 1-1.351 1.351l-.86.318a.297.297 0 0 0 0 .556l.86.318c.626.232 1.12.725 1.35 1.351l.319.86c.095.258.46.258.556 0l.318-.86a2.29 2.29 0 0 1 1.351-1.351"/>
   </svg>);
 export default AwardIcon;

dist/js/icons/lg/loyalty.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-const LoyaltyIcon = (props) => (<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1.5rem" height="1.5rem" {...props}>
+const LoyaltyIcon = (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="M17 2H7a1 1 0 0 0-1 1v7.646a3 3 0 0 0 1.658 2.683L11 15v4H9a2 2 0 0 0-2 2v1h10v-1a2 2 0 0 0-2-2h-2v-4l3.342-1.67A3 3 0 0 0 18 10.645V3a1 1 0 0 0-1-1M19 9.5c0-.276.227-.494.495-.562a2 2 0 0 0 0-3.876C19.227 4.994 19 4.776 19 4.5v-1c0-.276.225-.503.499-.47a4 4 0 0 1 0 7.94c-.274.033-.499-.194-.499-.47zM4.505 8.938c.268.068.495.286.495.562v1c0 .276-.225.503-.499.47a4 4 0 0 1 0-7.94c.274-.033.499.194.499.47v1c0 .276-.227.494-.495.562a2 2 0 0 0 0 3.876"/>
   </svg>);
 export default LoyaltyIcon;

dist/js/icons/sm/award.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-const AwardIcon = (props) => (<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1rem" height="1rem" {...props}>
+const AwardIcon = (props) => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="1rem" height="1rem" {...props}>
     <path d="m15.431 9.828-.034.032a6.75 6.75 0 0 1 3.353 5.824 6.757 6.757 0 0 1-6.75 6.75 6.757 6.757 0 0 1-6.75-6.75 6.75 6.75 0 0 1 3.353-5.823 27 27 0 0 1-.793-.76C5.212 6.593 3.35 3.465 2.648 2.25l1.298-.751.014.024C4.634 2.687 6.2 5.393 8.87 8.04c.296.295.59.582.885.848q.11.1.22.192l.148.126A6.7 6.7 0 0 1 12 8.935c.3 0 .594.026.884.064a25 25 0 0 1-1.381-1.106 24 24 0 0 1-1.288-1.22c-1.283-1.233-2.687-3.078-3.549-4.3l1.227-.864c.801 1.137 2.14 2.894 3.39 4.112.238.242.472.467.705.684l.166-.151c.186-.17.372-.339.558-.529 1.228-1.188 2.592-2.983 3.393-4.12l1.227.864c-.861 1.222-2.285 3.1-3.551 4.309-.153.156-.306.296-.46.436l-.196.18c.584.477 1.116.874 1.553 1.179l.128-.122c.107-.101.214-.202.323-.311 2.682-2.665 4.12-5.156 4.823-6.374l.093-.161 1.298.752-.03.052c-.718 1.24-2.333 4.031-5.124 6.793-.254.254-.508.492-.758.726m-.625 6.134a.297.297 0 0 0 0-.556l-.859-.318a2.29 2.29 0 0 1-1.351-1.351l-.318-.86a.296.296 0 0 0-.556 0l-.318.86a2.29 2.29 0 0 1-1.351 1.351l-.86.318a.297.297 0 0 0 0 .556l.86.318c.626.232 1.12.725 1.35 1.351l.319.86c.095.258.46.258.556 0l.318-.86a2.29 2.29 0 0 1 1.351-1.35z"/>
   </svg>);
 export default AwardIcon;

dist/js/icons/sm/loyalty.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-const LoyaltyIcon = (props) => (<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="1rem" height="1rem" {...props}>
+const LoyaltyIcon = (props) => (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" width="1rem" height="1rem" {...props}>
     <path d="M17 2H7a1 1 0 0 0-1 1v7.646a3 3 0 0 0 1.658 2.683L11 15v4H9a2 2 0 0 0-2 2v1h10v-1a2 2 0 0 0-2-2h-2v-4l3.342-1.67A3 3 0 0 0 18 10.645V3a1 1 0 0 0-1-1M19 9.5c0-.276.227-.494.495-.562a2 2 0 0 0 0-3.876C19.227 4.994 19 4.776 19 4.5v-1c0-.276.225-.503.499-.47a4 4 0 0 1 0 7.94c-.274.033-.499-.194-.499-.47zM4.505 8.938c.268.068.495.286.495.562v1c0 .276-.225.503-.499.47a4 4 0 0 1 0-7.94c.274-.033.499.194.499.47v1c0 .276-.227.494-.495.562a2 2 0 0 0 0 3.876"/>
   </svg>);
 export default LoyaltyIcon;

dist/svgs/icons/lg/award.svg

@@ -24,22 +24,26 @@ import rename from 'gulp-rename';
 import ts from 'gulp-typescript';
 import ordered from 'ordered-read-streams';
 
+import createIconMapping from './tasks/metadata/iconMapping.mjs';
 import metadata from './tasks/metadata/index.mjs';
+import { iconsPlugins, spinnersPlugins } from './tasks/plugins.mjs';
 import svgr from './tasks/svgr.mjs';
-import createIconMapping from './tasks/metadata/iconMapping.mjs';
 
 gulp.task('clean', () => deleteAsync(['dist']));
 
 const iconReactComponents = (type, size) => {
   let src;
   let dest;
+  let plugins;
   if (type === 'icons') {
     src = `src/${type}/${size}/*.svg`;
     dest = `dist/js/${type}/${size}`;
+    plugins = iconsPlugins;
   }
   if (type === 'spinners') {
     src = `src/${type}/**/${size}.svg`;
     dest = `dist/js/${type}`;
+    plugins = spinnersPlugins;
   }
 
   if (src === undefined || dest === undefined) {
@@ -50,7 +54,7 @@ const iconReactComponents = (type, size) => {
 
   const tsResult = svgs
     .pipe(clone())
-    .pipe(svgr({ size }))
+    .pipe(svgr({ size, plugins }))
     .pipe(rename({ extname: '.tsx' }))
     .pipe(
       ts({