Merge pull request #20457 from backstage/rugvip/nosvgicon

cli: deprecate support for .icon.svg

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

@@ -60,10 +60,40 @@ 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;
 }

packages/cli/src/lib/svgrTemplate.ts

@@ -34,6 +34,8 @@ export function svgrTemplate(
 ${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});