diff --git a/.changeset/serious-pants-lie.md b/.changeset/serious-pants-lie.md new file mode 100644 index 0000000000..e67f01dd53 --- /dev/null +++ b/.changeset/serious-pants-lie.md @@ -0,0 +1,21 @@ +--- +'@backstage/cli': patch +--- + +Support for the `.icon.svg` extension has been deprecated and will be removed in the future. The implementation of this extension is too tied to a particular version of MUI and the SVGO, and it makes it harder to evolve the build system. We may introduce the ability to reintroduce this kind of functionality in the future through configuration for use in internal plugins, but for now we're forced to remove it. + +To migrate existing code, rename the `.icon.svg` file to `.tsx` and replace the `` element with `` from MUI and add necessary imports. For example: + +```tsx +import React from 'react'; +import SvgIcon from '@material-ui/core/SvgIcon'; +import { IconComponent } from '@backstage/core-plugin-api'; + +export const CodeSceneIcon = (props: SvgIconProps) => ( + + + + + +); +``` diff --git a/docs/local-dev/cli-build-system.md b/docs/local-dev/cli-build-system.md index 06aec945b9..61e24863fe 100644 --- a/docs/local-dev/cli-build-system.md +++ b/docs/local-dev/cli-build-system.md @@ -484,30 +484,29 @@ of the build system, including the bundling, tests, builds, and type checking. Loaders are always selected based on the file extension. The following is a list of all supported file extensions: -| Extension | Exports | Purpose | -| ----------- | --------------- | -------------------------------------------------------------------------------------- | -| `.ts` | Script Module | TypeScript | -| `.tsx` | Script Module | TypeScript and XML | -| `.js` | Script Module | JavaScript | -| `.jsx` | Script Module | JavaScript and XML | -| `.mjs` | Script Module | ECMAScript Module | -| `.cjs` | Script Module | CommonJS Module | -| `.json` | JSON Data | JSON Data | -| `.yml` | JSON Data | YAML Data | -| `.yaml` | JSON Data | YAML Data | -| `.css` | classes | Style sheet | -| `.eot` | URL Path | Font | -| `.ttf` | URL Path | Font | -| `.woff2` | URL Path | Font | -| `.woff` | URL Path | Font | -| `.bmp` | URL Path | Image | -| `.gif` | URL Path | Image | -| `.jpeg` | URL Path | Image | -| `.jpg` | URL Path | Image | -| `.png` | URL Path | Image | -| `.svg` | URL Path | Image | -| `.md` | URL Path | Markdown File | -| `.icon.svg` | React Component | SVG converted into a [Material UI SvgIcon](https://mui.com/material-ui/icons/#svgicon) | +| Extension | Exports | Purpose | +| --------- | ------------- | ------------------ | +| `.ts` | Script Module | TypeScript | +| `.tsx` | Script Module | TypeScript and XML | +| `.js` | Script Module | JavaScript | +| `.jsx` | Script Module | JavaScript and XML | +| `.mjs` | Script Module | ECMAScript Module | +| `.cjs` | Script Module | CommonJS Module | +| `.json` | JSON Data | JSON Data | +| `.yml` | JSON Data | YAML Data | +| `.yaml` | JSON Data | YAML Data | +| `.css` | classes | Style sheet | +| `.eot` | URL Path | Font | +| `.ttf` | URL Path | Font | +| `.woff2` | URL Path | Font | +| `.woff` | URL Path | Font | +| `.bmp` | URL Path | Image | +| `.gif` | URL Path | Image | +| `.jpeg` | URL Path | Image | +| `.jpg` | URL Path | Image | +| `.png` | URL Path | Image | +| `.svg` | URL Path | Image | +| `.md` | URL Path | Markdown File | ## Jest Configuration diff --git a/packages/cli/asset-types/asset-types.d.ts b/packages/cli/asset-types/asset-types.d.ts index a1c053dc54..2d288fd0e3 100644 --- a/packages/cli/asset-types/asset-types.d.ts +++ b/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 = () => ( + * + * + * + * + * + * ) + * ``` + */ 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 = () => ( + * + * + * + * + * + * ) + * ``` + */ const Icon: ComponentType; export default Icon; } diff --git a/packages/cli/src/lib/svgrTemplate.ts b/packages/cli/src/lib/svgrTemplate.ts index b583004f81..5407dc4c62 100644 --- a/packages/cli/src/lib/svgrTemplate.ts +++ b/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});