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

Merge pull request #1410 from spotify/rugvip/svg

Browse Source 
Fix types for static assets and handle svg imports
This commit is contained in:
Patrik Oldsberg
2020-06-23 14:04:05 +02:00
committed by GitHub
parent 4fa3214f52 d4cc7c107f
commit 3ebad8911e
17 changed files with 373 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/index.tsx
+2
View File
@@ -14,6 +14,8 @@
* limitations under the License.
*/
// eslint-disable-next-line monorepo/no-internal-import
import '@backstage/cli/asset-types';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
packages/cli/src/commands/plugin/assets.d.ts → packages/cli/asset-types/asset-types.d.ts
Vendored
+10 -16
View File
@@ -14,16 +14,12 @@
* limitations under the License.
*/
/* eslint-disable import/no-extraneous-dependencies */
/// <reference types="node" />
/// <reference types="react" />
/// <reference types="react-dom" />
declare namespace NodeJS {
interface ProcessEnv {
readonly NODE_ENV: 'development' | 'production' | 'test';
}
}
declare module '*.bmp' {
const src: string;
export default src;
@@ -54,13 +50,15 @@ 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' {
import * as React from 'react';
export const ReactComponent: React.FunctionComponent<React.SVGProps<
SVGSVGElement
> & { title?: string }>;
const src: string;
export default src;
}
@@ -94,7 +92,3 @@ declare module '*.module.sass' {
const classes: { readonly [key: string]: string };
export default classes;
}
declare module 'rollup-plugin-image-files' {
export default function image(): any;
}
packages/cli/asset-types/asset-types.js
+2
View File
@@ -0,0 +1,2 @@
// NOOP, this is just here to unbreak module resolution
// eslint-disable-next-line notice/notice
packages/cli/asset-types/package.json
+5
View File
@@ -0,0 +1,5 @@
{
"main": "asset-types.js",
"types": "asset-types.d.ts",
"description": "Provides types for asset files that are handled by the Backstage CLI"
}
packages/cli/config/jest.js
+6 -1
View File
@@ -38,11 +38,16 @@ async function getConfig() {
transform: {
'\\.esm\\.js$': require.resolve('jest-esm-transformer'),
'\\.(js|jsx|ts|tsx)': require.resolve('ts-jest'),
'\\.(bmp|gif|jpe|png|frag|xml|svg)': require.resolve(
'./jestFileTransform.js',
),
},
// Default behaviour is to not apply transforms for node_modules, but we still want
// to apply the esm-transformer to .esm.js files, since that's what we use in backstage packages.
transformIgnorePatterns: ['/node_modules/(?!.*\\.esm\\.js$)'],
transformIgnorePatterns: [
'/node_modules/(?!.*\\.(?:esm\\.js|bmp|gif|jpe|png|frag|xml|svg)$)',
],
};
// Use src/setupTests.ts as the default location for configuring test env
packages/cli/config/jestFileTransform.js
+42
View File
@@ -0,0 +1,42 @@
/*
* 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.
*/
const path = require('path');
module.exports = {
process(src, filename) {
const assetFilename = JSON.stringify(path.basename(filename));
if (filename.match(/\.icon\.svg$/)) {
return `const React = require('react');
const SvgIcon = require('@material-ui/core/SvgIcon').default;
module.exports = {
__esModule: true,
default: props => React.createElement(SvgIcon, props, {
$$typeof: Symbol.for('react.element'),
type: 'svg',
ref: ref,
key: null,
props: Object.assign({}, props, {
children: ${assetFilename}
})
})
};`;
}
return `module.exports = ${assetFilename};`;
},
};
packages/cli/package.json
+4
View File
@@ -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
+23 -1
View File
@@ -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
+7 -1
View File
@@ -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
+47
View File
@@ -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}`;
}
packages/cli/@types/rollup-plugin-image-files.d.ts → packages/cli/src/types.d.ts
Vendored
+13 -1
View File
@@ -14,4 +14,16 @@
* limitations under the License.
*/
declare module 'rollup-plugin-image-files';
declare namespace NodeJS {
interface ProcessEnv {
readonly NODE_ENV: 'development' | 'production' | 'test';
}
}
declare module 'rollup-plugin-image-files' {
export default function image(options?: any): any;
}
declare module '@svgr/rollup' {
export default function svgr(options?: any): any;
}
packages/cli/templates/default-app/packages/app/src/index.tsx
+1
View File
@@ -1,3 +1,4 @@
import '@backstage/cli/asset-types';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
packages/core/src/layout/ErrorPage/MicDrop.jsx
+2 -129
View File
@@ -16,6 +16,7 @@
import React from 'react';
import { makeStyles } from '@material-ui/core';
import MicDropSvgUrl from './mic-drop.svg';
const useStyles = makeStyles({
micDrop: {
@@ -28,133 +29,5 @@ const useStyles = makeStyles({
export const MicDrop = () => {
const classes = useStyles();
return (
<svg
className={classes.micDrop}
width="765"
height="549"
viewBox="0 0 765 549"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M233.254 18.1123C287.613 12.9406 348.953 -19.7941 390.737 17.9035C433.262 56.2682 419.83 127.396 420.495 187.038C421.173 247.834 429.724 312.626 394.555 360.272C356.272 412.137 294.782 444.433 233.254 440.709C174.088 437.128 130.793 387.084 89.1619 341.79C47.9247 296.924 -2.50454 250.018 0.0966297 187.038C2.64988 125.217 53.6362 80.0377 101.402 45.4309C139.977 17.4827 186.903 22.5221 233.254 18.1123Z"
fill="#9BF0E1"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M513.385 20.4439C566.693 14.8938 613.809 62.3867 650.746 106.814C683.285 145.952 687.847 201.929 705.832 251.918C725.902 307.696 777.756 358.692 762.097 416.298C746.456 473.841 682.485 490.291 634.414 514.658C595.842 534.21 555.492 539.703 513.385 542.369C468.505 545.211 418.55 561.006 382.241 530.624C345.943 500.251 351.456 437.745 332.509 391.022C309.653 334.66 245.906 289.233 260.017 229.218C273.979 169.835 349.469 169.535 393.023 133.647C436.218 98.0537 460.413 25.959 513.385 20.4439Z"
fill="#69DDC7"
/>
<path
d="M584.384 331.262L618.437 362.37C620.096 363.886 622.677 363.738 624.152 362.042L625.747 360.209C627.216 358.521 627.014 355.956 625.299 354.519L590.183 325.076C589.459 324.469 588.534 324.093 587.606 324.266C584.444 324.854 583.314 327.325 583.371 329.355C583.392 330.105 583.83 330.756 584.384 331.262Z"
fill="black"
stroke="black"
/>
<circle
cx="630.54"
cy="366.006"
r="11.6617"
transform="rotate(131.021 630.54 366.006)"
fill="#616161"
/>
<rect
x="639.69"
y="357.103"
width="25.4436"
height="3.18045"
rx="1.59023"
transform="rotate(131.021 639.69 357.103)"
fill="#282828"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M331.081 60.2902C334.528 72.9923 339.02 101.544 334.436 106.022H305.436C305.433 105.971 305.43 105.92 305.427 105.868C294.679 104.679 286.319 95.5658 286.319 84.5V63.5C286.319 51.6259 295.945 42 307.819 42H309.819C320.602 42 329.531 49.9385 331.081 60.2902Z"
fill="#181818"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M297.581 80.4901C292.973 75.0814 289.854 68.4529 290.376 61.0255C291.877 39.625 321.667 44.3328 327.462 55.1339C333.257 65.9351 332.568 93.333 325.079 95.2635C322.092 96.0333 315.73 94.1475 309.254 90.2443L313.319 119H289.319L297.581 80.4901Z"
fill="#EDB795"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M304.069 76.8748C305.175 88.7528 304.732 102.317 301.436 105.537H272.436C270.82 77.4635 286.436 88.3349 286.436 61.9028C287.41 60.9515 288.33 60.01 289.24 59.1981L289.208 58.4207C294.229 48.1402 300.6 43 308.32 43C319.9 43 323.555 48.3883 326.668 52.9631C324.34 60.9482 315.309 62.1322 307.285 67.1095C306.339 66.341 305.133 65.8804 303.819 65.8804C300.781 65.8804 298.319 68.3428 298.319 71.3804C298.319 74.418 300.781 76.8804 303.819 76.8804C303.903 76.8804 303.986 76.8785 304.069 76.8748Z"
fill="#181818"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M250.727 300.088C274.716 306.798 295.413 310.153 312.818 310.153C330.224 310.153 346.39 304.986 361.319 294.653C337.843 287.766 318.51 284.323 303.319 284.323C288.128 284.323 270.597 289.578 250.727 300.088Z"
fill="#C52B86"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M333.586 319.824C333.354 319.477 333.159 319.098 333.004 318.689C329.797 310.208 278.436 218.726 273.319 202H331.145C335.035 214.717 352.546 294.52 355.01 310.442C362.785 335.557 378.794 416.895 380.838 422.53C382.988 428.458 370.891 434.633 367.668 427.346C362.539 415.75 350.317 383.665 344.876 364.074C339.775 345.708 335.621 329.184 333.586 319.824Z"
fill="#E7B291"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M286.276 330.994C262.794 336.928 176.903 347.658 171.009 349.341C164.945 351.072 159.629 338.574 167.124 335.867C179.049 331.559 211.908 321.606 231.831 317.544C247.855 314.277 262.478 311.611 272.295 310.05C271.464 282.473 267.662 216.294 270.154 202H321.319C318.929 215.707 298.729 315.718 294.975 325.729C293.783 329.302 290.228 330.882 286.276 330.994Z"
fill="#EDB795"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M167.668 332.539C164.532 331.956 162.235 331.793 160.774 332.05C158.998 332.363 156.459 333.116 153.156 334.309C153.52 336.369 156.784 354.884 162.951 389.854C167.977 390.456 170.406 389.168 170.238 385.991C170.07 382.814 169.959 380.17 169.902 378.059L176.859 350.213C176.993 349.677 176.667 349.134 176.132 349C176.123 348.998 176.113 348.996 176.104 348.994L171.786 348.044C169.935 345.402 168.851 343.181 168.534 341.381C168.276 339.919 168.51 337.795 169.237 335.01L169.237 335.01C169.516 333.941 168.876 332.849 167.807 332.57C167.761 332.558 167.714 332.548 167.668 332.539Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M363.997 426.402C362.878 429.388 362.319 431.623 362.319 433.106C362.319 434.909 362.619 437.54 363.22 441C365.312 441 384.113 441 419.622 441C421.088 436.155 420.242 433.539 417.084 433.152C413.926 432.766 411.303 432.417 409.214 432.106L382.999 420.419C382.494 420.194 381.903 420.421 381.678 420.925C381.674 420.934 381.671 420.942 381.667 420.951L379.982 425.039C377.059 426.403 374.683 427.085 372.856 427.085C371.371 427.085 369.32 426.485 366.703 425.286L366.703 425.285C365.699 424.825 364.512 425.266 364.052 426.27C364.032 426.313 364.014 426.357 363.997 426.402Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M270.319 202C292.866 195.549 314.199 195.549 334.319 202C341.319 233.937 358.328 246.613 361.319 295.579C327.319 312.473 285.319 283.53 250.319 300.005C240.319 276.961 254.319 221.464 270.319 202Z"
fill="#F038A5"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M367.319 162.311L406.802 156.925C414.7 152.532 421.966 149.558 428.599 148.003C430.466 147.948 433.436 148.627 429.012 152.315C424.588 156.003 420.099 160.083 420.887 162.051C421.675 164.02 425.79 163.287 426.471 166.315C426.926 168.333 420.248 168.661 406.44 167.299L374.403 180L367.319 162.311ZM243.288 171.45L265.186 171.532C241.175 225.566 228.655 253.857 227.627 256.406C225.313 262.14 230.209 270.874 232.303 275.567C225.483 278.619 226.21 267.317 217.607 271.319C209.754 274.973 203.78 281.592 194.708 275.994C193.592 275.306 192.37 272.715 195.323 270.69C202.681 265.645 213.284 256.815 214.717 253.908C216.67 249.945 226.194 222.459 243.288 171.45Z"
fill="#EDB795"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M303.268 102L320.413 103.142C324.635 141.343 347.635 165.473 399.13 157.304L405.971 206.499C357.841 212.719 315.632 193.45 306.981 141.278C304.742 127.773 302.973 113.718 303.268 102Z"
fill="#EEEEEE"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M294.809 97.0159L320.786 102.965C320.786 147.644 335.019 176.15 342.319 209H272.162C271.174 220.351 270.567 232.018 270.251 244H217.72C229.624 180.664 254.749 131.664 293.094 97H294.796L294.809 97.0159Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M283.231 145.259C281.423 173.101 282.486 194.347 286.421 209H272.162C274.12 186.514 277.575 165.267 283.231 145.259V145.259Z"
fill="#EEEEEE"
/>
<path
d="M420 184C438.174 208.939 473.047 287.772 467.144 403.592C469.74 373.957 481.656 315.366 508.548 318.087C535.441 320.808 531.505 401.163 526.176 441C532.052 385.292 552.334 355.087 573.5 351"
stroke="#F9F9F9"
strokeWidth="4"
strokeLinecap="round"
strokeDasharray="10 15"
/>
</svg>
);
return <img src={MicDropSvgUrl} className={classes.micDrop} alt="" />;
};
packages/core/src/layout/ErrorPage/mic-drop.svg
+126
View File
@@ -0,0 +1,126 @@
<svg
width="765"
height="549"
viewBox="0 0 765 549"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M233.254 18.1123C287.613 12.9406 348.953 -19.7941 390.737 17.9035C433.262 56.2682 419.83 127.396 420.495 187.038C421.173 247.834 429.724 312.626 394.555 360.272C356.272 412.137 294.782 444.433 233.254 440.709C174.088 437.128 130.793 387.084 89.1619 341.79C47.9247 296.924 -2.50454 250.018 0.0966297 187.038C2.64988 125.217 53.6362 80.0377 101.402 45.4309C139.977 17.4827 186.903 22.5221 233.254 18.1123Z"
fill="#9BF0E1"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M513.385 20.4439C566.693 14.8938 613.809 62.3867 650.746 106.814C683.285 145.952 687.847 201.929 705.832 251.918C725.902 307.696 777.756 358.692 762.097 416.298C746.456 473.841 682.485 490.291 634.414 514.658C595.842 534.21 555.492 539.703 513.385 542.369C468.505 545.211 418.55 561.006 382.241 530.624C345.943 500.251 351.456 437.745 332.509 391.022C309.653 334.66 245.906 289.233 260.017 229.218C273.979 169.835 349.469 169.535 393.023 133.647C436.218 98.0537 460.413 25.959 513.385 20.4439Z"
fill="#69DDC7"
/>
<path
d="M584.384 331.262L618.437 362.37C620.096 363.886 622.677 363.738 624.152 362.042L625.747 360.209C627.216 358.521 627.014 355.956 625.299 354.519L590.183 325.076C589.459 324.469 588.534 324.093 587.606 324.266C584.444 324.854 583.314 327.325 583.371 329.355C583.392 330.105 583.83 330.756 584.384 331.262Z"
fill="black"
stroke="black"
/>
<circle
cx="630.54"
cy="366.006"
r="11.6617"
transform="rotate(131.021 630.54 366.006)"
fill="#616161"
/>
<rect
x="639.69"
y="357.103"
width="25.4436"
height="3.18045"
rx="1.59023"
transform="rotate(131.021 639.69 357.103)"
fill="#282828"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M331.081 60.2902C334.528 72.9923 339.02 101.544 334.436 106.022H305.436C305.433 105.971 305.43 105.92 305.427 105.868C294.679 104.679 286.319 95.5658 286.319 84.5V63.5C286.319 51.6259 295.945 42 307.819 42H309.819C320.602 42 329.531 49.9385 331.081 60.2902Z"
fill="#181818"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M297.581 80.4901C292.973 75.0814 289.854 68.4529 290.376 61.0255C291.877 39.625 321.667 44.3328 327.462 55.1339C333.257 65.9351 332.568 93.333 325.079 95.2635C322.092 96.0333 315.73 94.1475 309.254 90.2443L313.319 119H289.319L297.581 80.4901Z"
fill="#EDB795"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M304.069 76.8748C305.175 88.7528 304.732 102.317 301.436 105.537H272.436C270.82 77.4635 286.436 88.3349 286.436 61.9028C287.41 60.9515 288.33 60.01 289.24 59.1981L289.208 58.4207C294.229 48.1402 300.6 43 308.32 43C319.9 43 323.555 48.3883 326.668 52.9631C324.34 60.9482 315.309 62.1322 307.285 67.1095C306.339 66.341 305.133 65.8804 303.819 65.8804C300.781 65.8804 298.319 68.3428 298.319 71.3804C298.319 74.418 300.781 76.8804 303.819 76.8804C303.903 76.8804 303.986 76.8785 304.069 76.8748Z"
fill="#181818"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M250.727 300.088C274.716 306.798 295.413 310.153 312.818 310.153C330.224 310.153 346.39 304.986 361.319 294.653C337.843 287.766 318.51 284.323 303.319 284.323C288.128 284.323 270.597 289.578 250.727 300.088Z"
fill="#C52B86"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M333.586 319.824C333.354 319.477 333.159 319.098 333.004 318.689C329.797 310.208 278.436 218.726 273.319 202H331.145C335.035 214.717 352.546 294.52 355.01 310.442C362.785 335.557 378.794 416.895 380.838 422.53C382.988 428.458 370.891 434.633 367.668 427.346C362.539 415.75 350.317 383.665 344.876 364.074C339.775 345.708 335.621 329.184 333.586 319.824Z"
fill="#E7B291"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M286.276 330.994C262.794 336.928 176.903 347.658 171.009 349.341C164.945 351.072 159.629 338.574 167.124 335.867C179.049 331.559 211.908 321.606 231.831 317.544C247.855 314.277 262.478 311.611 272.295 310.05C271.464 282.473 267.662 216.294 270.154 202H321.319C318.929 215.707 298.729 315.718 294.975 325.729C293.783 329.302 290.228 330.882 286.276 330.994Z"
fill="#EDB795"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M167.668 332.539C164.532 331.956 162.235 331.793 160.774 332.05C158.998 332.363 156.459 333.116 153.156 334.309C153.52 336.369 156.784 354.884 162.951 389.854C167.977 390.456 170.406 389.168 170.238 385.991C170.07 382.814 169.959 380.17 169.902 378.059L176.859 350.213C176.993 349.677 176.667 349.134 176.132 349C176.123 348.998 176.113 348.996 176.104 348.994L171.786 348.044C169.935 345.402 168.851 343.181 168.534 341.381C168.276 339.919 168.51 337.795 169.237 335.01L169.237 335.01C169.516 333.941 168.876 332.849 167.807 332.57C167.761 332.558 167.714 332.548 167.668 332.539Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M363.997 426.402C362.878 429.388 362.319 431.623 362.319 433.106C362.319 434.909 362.619 437.54 363.22 441C365.312 441 384.113 441 419.622 441C421.088 436.155 420.242 433.539 417.084 433.152C413.926 432.766 411.303 432.417 409.214 432.106L382.999 420.419C382.494 420.194 381.903 420.421 381.678 420.925C381.674 420.934 381.671 420.942 381.667 420.951L379.982 425.039C377.059 426.403 374.683 427.085 372.856 427.085C371.371 427.085 369.32 426.485 366.703 425.286L366.703 425.285C365.699 424.825 364.512 425.266 364.052 426.27C364.032 426.313 364.014 426.357 363.997 426.402Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M270.319 202C292.866 195.549 314.199 195.549 334.319 202C341.319 233.937 358.328 246.613 361.319 295.579C327.319 312.473 285.319 283.53 250.319 300.005C240.319 276.961 254.319 221.464 270.319 202Z"
fill="#F038A5"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M367.319 162.311L406.802 156.925C414.7 152.532 421.966 149.558 428.599 148.003C430.466 147.948 433.436 148.627 429.012 152.315C424.588 156.003 420.099 160.083 420.887 162.051C421.675 164.02 425.79 163.287 426.471 166.315C426.926 168.333 420.248 168.661 406.44 167.299L374.403 180L367.319 162.311ZM243.288 171.45L265.186 171.532C241.175 225.566 228.655 253.857 227.627 256.406C225.313 262.14 230.209 270.874 232.303 275.567C225.483 278.619 226.21 267.317 217.607 271.319C209.754 274.973 203.78 281.592 194.708 275.994C193.592 275.306 192.37 272.715 195.323 270.69C202.681 265.645 213.284 256.815 214.717 253.908C216.67 249.945 226.194 222.459 243.288 171.45Z"
fill="#EDB795"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M303.268 102L320.413 103.142C324.635 141.343 347.635 165.473 399.13 157.304L405.971 206.499C357.841 212.719 315.632 193.45 306.981 141.278C304.742 127.773 302.973 113.718 303.268 102Z"
fill="#EEEEEE"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M294.809 97.0159L320.786 102.965C320.786 147.644 335.019 176.15 342.319 209H272.162C271.174 220.351 270.567 232.018 270.251 244H217.72C229.624 180.664 254.749 131.664 293.094 97H294.796L294.809 97.0159Z"
fill="white"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M283.231 145.259C281.423 173.101 282.486 194.347 286.421 209H272.162C274.12 186.514 277.575 165.267 283.231 145.259V145.259Z"
fill="#EEEEEE"
/>
<path
d="M420 184C438.174 208.939 473.047 287.772 467.144 403.592C469.74 373.957 481.656 315.366 508.548 318.087C535.441 320.808 531.505 401.163 526.176 441C532.052 385.292 552.334 355.087 573.5 351"
stroke="#F9F9F9"
strokeWidth="4"
strokeLinecap="round"
strokeDasharray="10 15"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

plugins/graphiql/src/assets/graphiql.icon.svg
+64
View File
@@ -0,0 +1,64 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<g id="surface1">
<path
fill="#E535AB"
d="M 3.449219 18.160156 L 2.585938 17.660156 L 12.195312 1.019531 L 13.058594 1.515625 Z M 3.449219 18.160156 "
/>
<path
fill="#E535AB"
d="M 2.386719 16.332031 L 21.605469 16.332031 L 21.605469 17.328125 L 2.386719 17.328125 Z M 2.386719 16.332031 "
/>
<path
fill="#E535AB"
d="M 12.382812 22.441406 L 2.769531 16.890625 L 3.265625 16.027344 L 12.878906 21.578125 Z M 12.382812 22.441406 "
/>
<path
fill="#E535AB"
d="M 20.730469 7.976562 L 11.117188 2.425781 L 11.617188 1.5625 L 21.230469 7.113281 Z M 20.730469 7.976562 "
/>
<path
fill="#E535AB"
d="M 3.269531 7.972656 L 2.769531 7.109375 L 12.382812 1.558594 L 12.882812 2.421875 Z M 3.269531 7.972656 "
/>
<path
fill="#E535AB"
d="M 20.554688 18.160156 L 10.945312 1.515625 L 11.808594 1.019531 L 21.417969 17.660156 Z M 20.554688 18.160156 "
/>
<path
fill="#E535AB"
d="M 3.148438 6.449219 L 4.144531 6.449219 L 4.144531 17.550781 L 3.148438 17.550781 Z M 3.148438 6.449219 "
/>
<path
fill="#E535AB"
d="M 19.855469 6.449219 L 20.851562 6.449219 L 20.851562 17.550781 L 19.855469 17.550781 Z M 19.855469 6.449219 "
/>
<path
fill="#E535AB"
d="M 12.210938 22.019531 L 11.777344 21.265625 L 20.136719 16.441406 L 20.570312 17.191406 Z M 12.210938 22.019531 "
/>
<path
fill="#E535AB"
d="M 22.171875 17.875 C 21.59375 18.875 20.308594 19.21875 19.308594 18.640625 C 18.304688 18.066406 17.964844 16.78125 18.539062 15.78125 C 19.117188 14.777344 20.398438 14.4375 21.402344 15.011719 C 22.410156 15.59375 22.753906 16.871094 22.171875 17.875 "
/>
<path
fill="#E535AB"
d="M 5.453125 8.21875 C 4.878906 9.222656 3.59375 9.5625 2.59375 8.988281 C 1.589844 8.410156 1.246094 7.128906 1.824219 6.125 C 2.398438 5.125 3.683594 4.78125 4.6875 5.359375 C 5.6875 5.941406 6.03125 7.21875 5.453125 8.21875 "
/>
<path
fill="#E535AB"
d="M 1.828125 17.875 C 1.253906 16.871094 1.597656 15.59375 2.597656 15.011719 C 3.601562 14.4375 4.878906 14.777344 5.460938 15.78125 C 6.035156 16.78125 5.695312 18.058594 4.691406 18.640625 C 3.683594 19.21875 2.40625 18.875 1.828125 17.875 "
/>
<path
fill="#E535AB"
d="M 18.546875 8.21875 C 17.96875 7.21875 18.3125 5.941406 19.3125 5.359375 C 20.316406 4.78125 21.59375 5.125 22.175781 6.125 C 22.753906 7.128906 22.410156 8.40625 21.40625 8.988281 C 20.40625 9.5625 19.121094 9.222656 18.546875 8.21875 "
/>
<path
fill="#E535AB"
d="M 12 23.746094 C 10.84375 23.746094 9.90625 22.8125 9.90625 21.652344 C 9.90625 20.496094 10.84375 19.558594 12 19.558594 C 13.15625 19.558594 14.09375 20.496094 14.09375 21.652344 C 14.09375 22.804688 13.15625 23.746094 12 23.746094 "
/>
<path
fill="#E535AB"
d="M 12 4.441406 C 10.84375 4.441406 9.90625 3.503906 9.90625 2.347656 C 9.90625 1.1875 10.84375 0.253906 12 0.253906 C 13.15625 0.253906 14.09375 1.1875 14.09375 2.347656 C 14.09375 3.503906 13.15625 4.441406 12 4.441406 "
/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

plugins/graphiql/src/route-refs.tsx
+1 -69
View File
@@ -14,76 +14,8 @@
* limitations under the License.
*/
import React, { FC } from 'react';
import { createRouteRef } from '@backstage/core';
import { SvgIcon, SvgIconProps } from '@material-ui/core';
const GraphiQLIcon: FC<SvgIconProps> = props => (
<SvgIcon {...props}>
<g id="surface1">
<path
fill="#E535AB"
d="M 3.449219 18.160156 L 2.585938 17.660156 L 12.195312 1.019531 L 13.058594 1.515625 Z M 3.449219 18.160156 "
/>
<path
fill="#E535AB"
d="M 2.386719 16.332031 L 21.605469 16.332031 L 21.605469 17.328125 L 2.386719 17.328125 Z M 2.386719 16.332031 "
/>
<path
fill="#E535AB"
d="M 12.382812 22.441406 L 2.769531 16.890625 L 3.265625 16.027344 L 12.878906 21.578125 Z M 12.382812 22.441406 "
/>
<path
fill="#E535AB"
d="M 20.730469 7.976562 L 11.117188 2.425781 L 11.617188 1.5625 L 21.230469 7.113281 Z M 20.730469 7.976562 "
/>
<path
fill="#E535AB"
d="M 3.269531 7.972656 L 2.769531 7.109375 L 12.382812 1.558594 L 12.882812 2.421875 Z M 3.269531 7.972656 "
/>
<path
fill="#E535AB"
d="M 20.554688 18.160156 L 10.945312 1.515625 L 11.808594 1.019531 L 21.417969 17.660156 Z M 20.554688 18.160156 "
/>
<path
fill="#E535AB"
d="M 3.148438 6.449219 L 4.144531 6.449219 L 4.144531 17.550781 L 3.148438 17.550781 Z M 3.148438 6.449219 "
/>
<path
fill="#E535AB"
d="M 19.855469 6.449219 L 20.851562 6.449219 L 20.851562 17.550781 L 19.855469 17.550781 Z M 19.855469 6.449219 "
/>
<path
fill="#E535AB"
d="M 12.210938 22.019531 L 11.777344 21.265625 L 20.136719 16.441406 L 20.570312 17.191406 Z M 12.210938 22.019531 "
/>
<path
fill="#E535AB"
d="M 22.171875 17.875 C 21.59375 18.875 20.308594 19.21875 19.308594 18.640625 C 18.304688 18.066406 17.964844 16.78125 18.539062 15.78125 C 19.117188 14.777344 20.398438 14.4375 21.402344 15.011719 C 22.410156 15.59375 22.753906 16.871094 22.171875 17.875 "
/>
<path
fill="#E535AB"
d="M 5.453125 8.21875 C 4.878906 9.222656 3.59375 9.5625 2.59375 8.988281 C 1.589844 8.410156 1.246094 7.128906 1.824219 6.125 C 2.398438 5.125 3.683594 4.78125 4.6875 5.359375 C 5.6875 5.941406 6.03125 7.21875 5.453125 8.21875 "
/>
<path
fill="#E535AB"
d="M 1.828125 17.875 C 1.253906 16.871094 1.597656 15.59375 2.597656 15.011719 C 3.601562 14.4375 4.878906 14.777344 5.460938 15.78125 C 6.035156 16.78125 5.695312 18.058594 4.691406 18.640625 C 3.683594 19.21875 2.40625 18.875 1.828125 17.875 "
/>
<path
fill="#E535AB"
d="M 18.546875 8.21875 C 17.96875 7.21875 18.3125 5.941406 19.3125 5.359375 C 20.316406 4.78125 21.59375 5.125 22.175781 6.125 C 22.753906 7.128906 22.410156 8.40625 21.40625 8.988281 C 20.40625 9.5625 19.121094 9.222656 18.546875 8.21875 "
/>
<path
fill="#E535AB"
d="M 12 23.746094 C 10.84375 23.746094 9.90625 22.8125 9.90625 21.652344 C 9.90625 20.496094 10.84375 19.558594 12 19.558594 C 13.15625 19.558594 14.09375 20.496094 14.09375 21.652344 C 14.09375 22.804688 13.15625 23.746094 12 23.746094 "
/>
<path
fill="#E535AB"
d="M 12 4.441406 C 10.84375 4.441406 9.90625 3.503906 9.90625 2.347656 C 9.90625 1.1875 10.84375 0.253906 12 0.253906 C 13.15625 0.253906 14.09375 1.1875 14.09375 2.347656 C 14.09375 3.503906 13.15625 4.441406 12 4.441406 "
/>
</g>
</SvgIcon>
);
import GraphiQLIcon from './assets/graphiql.icon.svg';
export const graphiQLRouteRef = createRouteRef({
icon: GraphiQLIcon,
yarn.lock
+18 -4
View File
@@ -3208,7 +3208,7 @@
dependencies:
"@babel/types" "^7.4.4"
"@svgr/plugin-jsx@^4.3.3":
"@svgr/plugin-jsx@4.3.x", "@svgr/plugin-jsx@^4.3.3":
version "4.3.3"
resolved "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-4.3.3.tgz#e2ba913dbdfbe85252a34db101abc7ebd50992fa"
integrity sha512-cLOCSpNWQnDB1/v+SUENHH7a0XY09bfuMKdq9+gYvtuwzC2rU4I0wKGFEp1i24holdQdwodCtDQdFtJiTCWc+w==
@@ -3218,7 +3218,7 @@
"@svgr/hast-util-to-babel-ast" "^4.3.2"
svg-parser "^2.0.0"
"@svgr/plugin-svgo@^4.3.1":
"@svgr/plugin-svgo@4.3.x", "@svgr/plugin-svgo@^4.3.1":
version "4.3.1"
resolved "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-4.3.1.tgz#daac0a3d872e3f55935c6588dd370336865e9e32"
integrity sha512-PrMtEDUWjX3Ea65JsVCwTIXuSqa3CG9px+DluF1/eo9mlDrgrtFE7NE/DjdhjJgSM9wenlVBzkzneSIUgfUI/w==
@@ -3227,7 +3227,21 @@
merge-deep "^3.0.2"
svgo "^1.2.2"
"@svgr/webpack@^4.0.3":
"@svgr/rollup@4.3.x":
version "4.3.3"
resolved "https://registry.npmjs.org/@svgr/rollup/-/rollup-4.3.3.tgz#db8bc2746ae0930c14cba2409f417a6ac6aadb38"
integrity sha512-YwgnXN8xPRYFhkfoTUiZktjkjolthaK/lz0okzU09VcBvjx08R7yK1IEwXH3c98sMn8ORdNdiy4Qox78CMjljg==
dependencies:
"@babel/core" "^7.4.5"
"@babel/plugin-transform-react-constant-elements" "^7.0.0"
"@babel/preset-env" "^7.4.5"
"@babel/preset-react" "^7.0.0"
"@svgr/core" "^4.3.3"
"@svgr/plugin-jsx" "^4.3.3"
"@svgr/plugin-svgo" "^4.3.1"
rollup-pluginutils "^2.8.1"
"@svgr/webpack@4.3.x", "@svgr/webpack@^4.0.3":
version "4.3.3"
resolved "https://registry.npmjs.org/@svgr/webpack/-/webpack-4.3.3.tgz#13cc2423bf3dff2d494f16b17eb7eacb86895017"
integrity sha512-bjnWolZ6KVsHhgyCoYRFmbd26p8XVbulCzSG53BDQqAr+JOAderYK7CuYrB3bDjHJuF6LJ7Wrr42+goLRV9qIg==
@@ -16612,7 +16626,7 @@ rollup-pluginutils@2.4.1:
estree-walker "^0.6.0"
micromatch "^3.1.10"
rollup-pluginutils@2.8.2, rollup-pluginutils@^2.8.2:
rollup-pluginutils@2.8.2, rollup-pluginutils@^2.8.1, rollup-pluginutils@^2.8.2:
version "2.8.2"
resolved "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==