paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

cli: deprecate support for .icon.svg extensions

Browse Source 
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
This commit is contained in:
Patrik Oldsberg
2023-10-08 12:19:34 +02:00
parent 11cd745fc1
commit 2ef6522552
4 changed files with 76 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/serious-pants-lie.md
+21
View File
@@ -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 `<svg>` element with `<SvgIcon>` 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) => (
<SvgIcon {...props}>
<g>
<path d="..." />
</g>
</SvgIcon>
);
```
docs/local-dev/cli-build-system.md
+23 -24
View File
@@ -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
packages/cli/asset-types/asset-types.d.ts
Vendored
+30
View File
@@ -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
+2
View File
@@ -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});