Mayflower v10: Replace SVG Sprite Loader with SVGR Icons

react/.eslintignore

@@ -8,4 +8,5 @@ umd/
 src/index.js
 src/**/*.stories.js
 src/**/*.knob*
-gulpfile.js
+gulpfile.js
+icon-template.js

react/.gitignore

@@ -15,3 +15,9 @@ backstop/data/*report/
 
 .DS_Store
 **/.DS_Store
+src/components/base/Icon/**
+!src/components/base/Icon/assets
+!src/components/base/Icon/Icon.stories.js
+!src/components/base/Icon/IconDisplay.js
+!src/components/base/Icon/Icon.knob.options.js
+!src/components/base/Icon/_icon-display.scss

react/.storybook/main.js

@@ -1,5 +1,7 @@
 const path = require('path');
 const assets = require('@massds/mayflower-assets');
+const iconPath = path.resolve(__dirname, '../src/components/base/Icon/assets');
+
 module.exports = {
   stories: ['../src/**/*.stories.js'],
   addons: [
@@ -26,15 +28,31 @@ module.exports = {
       }
     },
   ],
-  webpackFinal: async (config, { configType }) => {
-
+  webpackFinal: (config, { configType }) => {
+    // modify storybook's file-loader rule to avoid conflicts with svgr
+    const fileLoaderRule = config.module.rules.find(rule => rule.test.test && rule.test.test('.svg'));
+    fileLoaderRule.exclude = iconPath;
     // Configure the storysource plugin.
     config.module.rules.push({
       test: /\.stories\.js?$/,
       loader: require.resolve('@storybook/addon-storysource/loader'),
       enforce: 'pre',
     });
 
+    config.module.rules.unshift({
+      test: /\.svg$/,
+      include: iconPath,
+      use: [
+        {
+          loader: '@svgr/webpack',
+          options: {
+            icon: true,
+            outDir: './src/components/base/Icon'
+          },
+        },
+      ],
+    });
+
     config.resolve = {
       ...config.resolve,
       alias: {

react/.svgrrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  "icon": true,
+  "svgoConfig": {
+    "removeXMLNS": true
+  },
+  "plugins": ["@svgr/plugin-svgo", "@svgr/plugin-jsx"],
+  "ext": "mjs",
+  "prettier": false,
+  "template": require('./icon-template'),
+}

react/gulpfile.js

@@ -5,13 +5,13 @@ const babel = require('gulp-babel');
 const rename = require('gulp-rename');
 const del = require('del');
 const path = require('path');
-
+const run = require('gulp-run-command').default;
 function clean() {
   return del(['dist']);
 }
 
 function styles() {
-  return src(['./src/components/**/*.scss'])
+  return src(['./src/components/**/*.scss', '!src/components/**/Icon/**'])
     .pipe(rename((p) => {
       const splitPath = p.dirname.split('/');
       // eslint-disable-next-line no-param-reassign
@@ -25,6 +25,135 @@ function icons() {
     .pipe(dest('dist/Icon/assets'));
 }
 
+function transpileES5Icons() {
+  return src('./dist/Icon/*.mjs')
+    .pipe(rename((p) => {
+      const splitPath = p.dirname.split('/');
+      // eslint-disable-next-line no-param-reassign
+      p.dirname = splitPath[splitPath.length - 1];
+    }))
+    .pipe(babel({
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            loose: true,
+            modules: 'commonjs'
+          }
+        ],
+        [
+          '@babel/preset-react',
+          {
+            development: false
+          }
+        ],
+        [
+          'babel-preset-proposals',
+          {
+            loose: true,
+            decorators: true,
+            classProperties: true,
+            exportDefaultFrom: true,
+            exportNamespaceFrom: true,
+            absolutePaths: true
+          }
+        ]
+      ],
+      plugins: [
+        [
+          'module-resolver',
+          {
+            resolvePath,
+            alias: aliases,
+            isES5: true
+          }
+        ],
+        '@babel/plugin-proposal-optional-chaining',
+        '@babel/plugin-proposal-nullish-coalescing-operator',
+        [
+          'babel-plugin-transform-react-remove-prop-types',
+          {
+            mode: 'wrap'
+          }
+        ],
+        [
+          '@babel/plugin-transform-runtime',
+          {
+            absoluteRuntime: false,
+            useESModules: false,
+            helpers: false
+          }
+        ],
+        'babel-plugin-add-module-exports'
+      ]
+    }))
+    .pipe(dest('dist/Icon'));
+}
+
+function transpileES6Icons() {
+  return src('./dist/Icon/*.mjs', '!./dist/Icon/index.mjs')
+    .pipe(babel({
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            loose: true,
+            modules: false,
+            exclude: [
+              'transform-block-scoping',
+              'transform-arrow-functions',
+              'transform-function-name'
+            ]
+          }
+        ],
+        [
+          '@babel/preset-react',
+          {
+            development: false,
+          }
+        ],
+      ],
+      plugins: [
+        [
+          'module-resolver',
+          {
+            resolvePath,
+            alias: aliases,
+            isES5: false
+          }
+        ],
+        '@babel/plugin-proposal-optional-chaining',
+        '@babel/plugin-proposal-nullish-coalescing-operator',
+        [
+          'babel-plugin-transform-react-remove-prop-types',
+          {
+            mode: 'wrap'
+          }
+        ],
+        [
+          '@babel/plugin-transform-runtime',
+          {
+            absoluteRuntime: false,
+            useESModules: true,
+            helpers: false
+          }
+        ]
+      ]
+    }))
+    .pipe(rename((p) => {
+      const splitPath = p.dirname.split('/');
+      // eslint-disable-next-line no-param-reassign
+      p.dirname = splitPath[splitPath.length - 1];
+      // eslint-disable-next-line no-param-reassign
+      p.extname = '.mjs';
+    }))
+    .pipe(dest('dist/Icon'));
+}
+
+async function generateIcons() {
+  return run('svgr --out-dir ./dist/Icon ./src/components/base/Icon/assets --config-file=./.svgrrc.js')()
+}
+
 const aliases = {
   'MayflowerReactGenTeaser/(.*)$': './\\1',
   'MayflowerReactComponents/(.*)$': './\\1',
@@ -56,7 +185,8 @@ const sources = [
   '!src/**/*.knobs.options.js',
   '!src/**/*.knob.options.js',
   '!src/**/Colors/**',
-  '!src/**/storyutils.js'
+  '!src/**/storyutils.js',
+  '!src/**/Icon/**'
 ];
 
 function resolvePath(sourcePath, currentFile, opts) {
@@ -82,7 +212,8 @@ function resolvePath(sourcePath, currentFile, opts) {
           'TabContainer/context',
           'utilities/componentPropTypeCheck',
           'Breadcrumb/item',
-          'GenTeaser/utils'
+          'GenTeaser/utils',
+          'Base/Icon/',
         ];
         // If the current path is a file and not a directory...
         if (excludes.some((rule) => sourcePath.includes(rule))) {
@@ -170,7 +301,12 @@ function transpileES6() {
           '@babel/preset-env',
           {
             loose: true,
-            modules: false
+            modules: false,
+            exclude: [
+              'transform-block-scoping',
+              'transform-arrow-functions',
+              'transform-function-name'
+            ]
           }
         ],
         [
@@ -227,4 +363,20 @@ function transpileES6() {
     }))
     .pipe(dest('dist'));
 }
-exports.default = series(clean, parallel(transpileES5, transpileES6, styles, icons));
+
+function cleanIconDir() {
+  return del([
+    'src/components/base/Icon/*',
+    '!src/components/base/Icon/assets',
+    '!src/components/base/Icon/IconDisplay.js',
+    '!src/components/base/Icon/Icon.stories.js',
+    '!src/components/base/Icon/Icon.knob.options.js',
+    '!src/components/base/Icon/_icon-display.scss'
+  ]);
+}
+
+exports.cleanIconDir = cleanIconDir;
+exports.generateIcons = generateIcons;
+exports.transpileES5Icons = transpileES5Icons;
+exports.transpileES6Icons = transpileES6Icons;
+exports.default = series(clean, parallel(transpileES5, transpileES6, styles, series(generateIcons, transpileES5Icons, transpileES6Icons)));

react/icon-template.js

@@ -0,0 +1,32 @@
+// Generates Icon components using SVGR.
+// https://react-svgr.com/docs/custom-templates/
+function defaultTemplate(
+  { template },
+  opts,
+  { imports, interfaces, componentName, props, jsx, exports },
+) {
+  const plugins = ['jsx']
+  if (opts.typescript) {
+    plugins.push('typescript')
+  }
+  const typeScriptTpl = template.smart({ plugins })
+  return typeScriptTpl.ast`import React from 'react';
+import PropTypes from 'prop-types';
+${interfaces}
+
+const ${componentName} = (${props}) => {
+  return ${jsx};
+}
+
+${componentName}.propTypes = {
+  title: PropTypes.string,
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  className: PropTypes.string,
+  fill: PropTypes.string
+};
+
+${exports}
+  `
+}
+module.exports = defaultTemplate