cli: remove support for .icon.svg imports

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

.changeset/olive-baths-punch.md

@@ -0,0 +1,5 @@
+---
+'@backstage/cli': minor
+---
+
+**BREAKING**: Removed support for `.icon.svg` imports, which have been deprecated since the 1.19 release.

.github/renovate.json5

@@ -30,11 +30,6 @@
       rangeStrategy: 'replace',
       matchSourceUrls: ['https://github.com/microsoft/rushstack{/,}**'],
     },
-    {
-      groupName: 'SVGR monorepo packages',
-      rangeStrategy: 'replace',
-      matchSourceUrls: ['https://github.com/gregberge/svgr{/,}**'],
-    },
     {
       groupName: 'Module-federation monorepo packages',
       rangeStrategy: 'replace',

docs/getting-started/configure-app-with-plugins.md

@@ -82,11 +82,20 @@ import ExtensionIcon from '@material-ui/icons/Extension';
 
 You can also use your own SVGs directly as icon components. Just make sure they
 are sized according to the Material UI's
-[SvgIcon](https://material-ui.com/api/svg-icon/) default of 24x24px, and set the
-extension to `.icon.svg`. For example:
+[SvgIcon](https://material-ui.com/api/svg-icon/) default of 24x24px, and wrap
+the SVG elements in a `SvgIcon` component like this:
 
 ```tsx
-import InternalToolIcon from './internal-tool.icon.svg';
+import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';
+
+export const ExampleIcon = (props: SvgIconProps) => (
+  <SvgIcon {...props}>
+    <g>
+      <path ... />
+      <path ... />
+    </g>
+  </SvgIcon>
+);
 ```
 
 On mobile devices the `Sidebar` is displayed at the bottom of the screen. For

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

@@ -65,44 +65,6 @@ declare module '*.yaml' {
   export default src;
 }
 
-/**
- * @deprecated support for .icon.svg extensions are being removed, inline the SVG elements in a MUI SvgIcon instead.
- * @example
- * ```tsx
- * import SvgIcon from '@material-ui/core/SvgIcon';
- *
- * const MyIcon = () => (
- *   <SvgIcon>
- *     <g>
- *        <path d="..." />
- *      </g>
- *   </SvgIcon>
- * )
- * ```
- */
-declare module '*.icon.svg' {
-  import { ComponentType } from 'react';
-  import { SvgIconProps } from '@material-ui/core';
-
-  /**
-   * @deprecated support for .icon.svg extensions are being removed, inline the SVG elements in a MUI SvgIcon instead.
-   * @example
-   * ```tsx
-   * import SvgIcon from '@material-ui/core/SvgIcon';
-   *
-   * const MyIcon = () => (
-   *   <SvgIcon>
-   *     <g>
-   *        <path d="..." />
-   *      </g>
-   *   </SvgIcon>
-   * )
-   * ```
-   */
-  const Icon: ComponentType<SvgIconProps>;
-  export default Icon;
-}
-
 declare module '*.svg' {
   const src: string;
   export default src;

packages/cli/knip-report.md

@@ -1,6 +1,6 @@
 # Knip report
 
-## Unused dependencies (27)
+## Unused dependencies (24)
 
 | Name                         | Location     | Severity |
 | :--------------------------- | :----------- | :------- |
@@ -17,14 +17,11 @@
 | eslint-plugin-react          | package.json | error    |
 | @octokit/oauth-app           | package.json | error    |
 | @types/webpack-env           | package.json | error    |
-| @svgr/plugin-svgo            | package.json | error    |
 | @octokit/graphql             | package.json | error    |
-| @svgr/plugin-jsx             | package.json | error    |
 | jest-css-modules             | package.json | error    |
 | git-url-parse                | package.json | error    |
 | jest-runtime                 | package.json | error    |
 | cross-fetch                  | package.json | error    |
-| @svgr/core                   | package.json | error    |
 | @swc/jest                    | package.json | error    |
 | process                      | package.json | error    |
 | sucrase                      | package.json | error    |

packages/cli/package.json

@@ -72,11 +72,6 @@
     "@spotify/eslint-config-react": "^15.0.0",
     "@spotify/eslint-config-typescript": "^15.0.0",
     "@sucrase/webpack-loader": "^2.0.0",
-    "@svgr/core": "6.5.x",
-    "@svgr/plugin-jsx": "6.5.x",
-    "@svgr/plugin-svgo": "6.5.x",
-    "@svgr/rollup": "6.5.x",
-    "@svgr/webpack": "6.5.x",
     "@swc/core": "^1.3.46",
     "@swc/helpers": "^0.5.0",
     "@swc/jest": "^0.2.22",

packages/cli/src/lib/svgrTemplate.ts

@@ -1,44 +0,0 @@
-/*
- * Copyright 2020 The Backstage Authors
- *
- * 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 Material UI SvgIcon components by suffixing
- * them with .icon.svg
- */
-export function svgrTemplate(
-  { imports, interfaces, componentName, props, jsx }: any,
-  { tpl }: any,
-) {
-  const name = `${componentName.replace(/icon$/, '')}Icon`;
-
-  const defaultExport = {
-    type: 'ExportDefaultDeclaration',
-    declaration: { type: 'Identifier', name },
-  };
-
-  return tpl`
-${imports}
-import SvgIcon from '@material-ui/core/SvgIcon';
-
-console.log('DEPRECATION WARNING: The .icon.svg extension is deprecated, inline the SVG elements in a MUI SvgIcon instead.', Object.assign(new Error(), {name: 'Warning'}).stack);
-
-${interfaces}
-
-const ${name} = (${props}) => React.createElement(SvgIcon, ${props}, ${jsx.children});
-
-${defaultExport}`;
-}

packages/cli/src/modules/build/lib/builder/config.ts

@@ -25,7 +25,6 @@ import commonjs from '@rollup/plugin-commonjs';
 import resolve from '@rollup/plugin-node-resolve';
 import postcss from 'rollup-plugin-postcss';
 import esbuild from 'rollup-plugin-esbuild';
-import svgr from '@svgr/rollup';
 import dts from 'rollup-plugin-dts';
 import json from '@rollup/plugin-json';
 import yaml from '@rollup/plugin-yaml';
@@ -40,7 +39,6 @@ import { forwardFileImports } from './plugins';
 import { BuildOptions, Output } from './types';
 import { paths } from '../../../../lib/paths';
 import { BackstagePackageJson } from '@backstage/cli-node';
-import { svgrTemplate } from '../../../../lib/svgrTemplate';
 import { readEntryPoints } from '../../../../lib/entryPoints';
 
 const SCRIPT_EXTS = ['.js', '.jsx', '.ts', '.tsx'];
@@ -260,10 +258,6 @@ export async function makeRollupConfigs(
         }),
         json(),
         yaml(),
-        svgr({
-          include: /\.icon\.svg$/,
-          template: svgrTemplate,
-        }),
         esbuild({
           target: 'ES2022',
           minify: options.minify,

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

@@ -16,7 +16,6 @@
 
 import { RuleSetRule, WebpackPluginInstance } from 'webpack';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
-import { svgrTemplate } from '../../../../lib/svgrTemplate';
 
 type Transforms = {
   loaders: RuleSetRule[];
@@ -116,29 +115,6 @@ export const transforms = (options: TransformOptions): Transforms => {
         fullySpecified: false,
       },
     },
-    {
-      test: [/\.icon\.svg$/],
-      use: [
-        {
-          loader: rspack ? 'builtin:swc-loader' : require.resolve('swc-loader'),
-          options: {
-            jsc: {
-              target: 'es2022',
-              externalHelpers: !isBackend,
-              parser: {
-                syntax: 'ecmascript',
-                jsx: !isBackend,
-                dynamicImport: true,
-              },
-            },
-          },
-        },
-        {
-          loader: require.resolve('@svgr/webpack'),
-          options: { babel: false, template: svgrTemplate },
-        },
-      ],
-    },
     {
       test: [
         /\.bmp$/,

packages/cli/src/types.d.ts

@@ -26,10 +26,6 @@ declare module 'rollup-plugin-image-files' {
   export default function image(options?: any): any;
 }
 
-declare module '@svgr/rollup' {
-  export default function svgr(options?: any): any;
-}
-
 declare module 'rollup/parseAst' {
   export function parseAst(code: string): any;
   export function parseAstAsync(code: string): any;