cli: allow svg imports and special .icon.svg import

packages/cli/asset-types/asset-types.d.ts

@@ -50,6 +50,14 @@ declare module '*.webp' {
   export default src;
 }
 
+declare module '*.icon.svg' {
+  import { ComponentType } from 'react';
+  import { SvgIconProps } from '@material-ui/core';
+
+  const Icon: ComponentType<SvgIconProps>;
+  export default Icon;
+}
+
 declare module '*.svg' {
   const src: string;
   export default src;

packages/cli/package.json

@@ -39,6 +39,10 @@
     "@rollup/plugin-node-resolve": "^7.1.1",
     "@spotify/eslint-config": "^7.0.1",
     "@sucrase/webpack-loader": "^2.0.0",
+    "@svgr/plugin-jsx": "4.3.x",
+    "@svgr/plugin-svgo": "4.3.x",
+    "@svgr/rollup": "4.3.x",
+    "@svgr/webpack": "4.3.x",
     "@types/start-server-webpack-plugin": "^2.2.0",
     "@types/webpack-env": "^1.15.2",
     "@types/webpack-node-externals": "^1.7.1",

packages/cli/src/lib/bundler/transforms.ts

@@ -17,6 +17,7 @@
 import webpack, { Module, Plugin } from 'webpack';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import { BundlingOptions, BackendBundlingOptions } from './types';
+import { svgrTemplate } from '../svgrTemplate';
 
 type Transforms = {
   loaders: Module['rules'];
@@ -46,7 +47,28 @@ export const transforms = (
       },
     },
     {
-      test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.frag/, /\.xml/],
+      test: [/\.icon\.svg$/],
+      use: [
+        {
+          loader: require.resolve('@sucrase/webpack-loader'),
+          options: { transforms: ['jsx'] },
+        },
+        {
+          loader: require.resolve('@svgr/webpack'),
+          options: { babel: false, template: svgrTemplate },
+        },
+      ],
+    },
+    {
+      test: [
+        /\.bmp$/,
+        /\.gif$/,
+        /\.jpe?g$/,
+        /\.png$/,
+        /\.frag/,
+        { test: /\.svg/, not: [/\.icon\.svg/] },
+        /\.xml/,
+      ],
       loader: require.resolve('url-loader'),
       options: {
         limit: 10000,

packages/cli/src/lib/packager/config.ts

@@ -23,12 +23,14 @@ import resolve from '@rollup/plugin-node-resolve';
 import postcss from 'rollup-plugin-postcss';
 import esbuild from 'rollup-plugin-esbuild';
 import imageFiles from 'rollup-plugin-image-files';
+import svgr from '@svgr/rollup';
 import dts from 'rollup-plugin-dts';
 import json from '@rollup/plugin-json';
 import { RollupOptions, OutputOptions } from 'rollup';
 
 import { BuildOptions, Output } from './types';
 import { paths } from '../paths';
+import { svgrTemplate } from '../svgrTemplate';
 
 export const makeConfigs = async (
   options: BuildOptions,
@@ -89,8 +91,12 @@ export const makeConfigs = async (
           exclude: ['**/*.stories.*', '**/*.test.*'],
         }),
         postcss(),
-        imageFiles(),
+        imageFiles({ exclude: '**/*.icon.svg' }),
         json(),
+        svgr({
+          include: '**/*.icon.svg',
+          template: svgrTemplate,
+        }),
         esbuild({
           target: 'es2019',
         }),

packages/cli/src/lib/svgrTemplate.ts

@@ -0,0 +1,47 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * This template, together with loaders in the bundler and packages, allows
+ * for SVG to be imported directly as MUI SvgIcon components by suffixing
+ * them with .icon.svg
+ */
+export function svgrTemplate(
+  { template }: any,
+  _opts: any,
+  { imports, interfaces, componentName, jsx }: any,
+) {
+  const iconName = {
+    ...componentName,
+    name: `${componentName.name.replace(/icon$/, '')}Icon`,
+  };
+
+  const defaultExport = {
+    type: 'ExportDefaultDeclaration',
+    declaration: iconName,
+  };
+
+  const typeScriptTemplate = template.smart({ plugins: ['typescript'] });
+  return typeScriptTemplate.ast`
+${imports}
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+${interfaces}
+
+const ${iconName} = props => React.createElement(SvgIcon, props, ${jsx.children});
+
+${defaultExport}`;
+}