Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[EuiIcon] Upgrade svgr/svgo dependencies to latest #6843

Merged
merged 5 commits into from
Jun 20, 2023
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -135,8 +135,9 @@
"@storybook/react": "^7.0.17",
"@storybook/react-webpack5": "^7.0.17",
"@storybook/testing-library": "^0.0.14-next.2",
"@svgr/core": "5.5.0",
"@svgr/plugin-svgo": "^4.0.3",
"@svgr/core": "8.0.0",
"@svgr/plugin-jsx": "^8.0.1",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The @svgr/plugin-jsx dependency needs to be manually listed now as it's no longer bundled in @svgr/core as of https://github.com/gregberge/svgr/releases/tag/v7.0.0

"@svgr/plugin-svgo": "^8.0.1",
"@testing-library/dom": "^8.12.0",
"@testing-library/jest-dom": "^5.16.3",
"@testing-library/react": "^12.1.5",
Expand Down
29 changes: 16 additions & 13 deletions scripts/compile-icons.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
const glob = require('glob');
const svgr = require('@svgr/core').default;
const svgr = require('@svgr/core').transform;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

const path = require('path');
const fs = require('fs');
const license = require('../.eslintrc.js').rules[
'local/require-license-header'
][1].license;
const license =
require('../.eslintrc.js').rules['local/require-license-header'][1].license;
Comment on lines +5 to +6
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was Prettier autolinting this file on save


const rootDir = path.resolve(__dirname, '..');
const srcDir = path.resolve(rootDir, 'src');
Expand Down Expand Up @@ -37,10 +36,15 @@ iconFiles.forEach((filePath) => {
plugins: ['@svgr/plugin-svgo', '@svgr/plugin-jsx'],
svgoConfig: {
plugins: [
{ cleanupIDs: true },
{ prefixIds: false },
{ removeViewBox: false },
{ removeUselessStrokeAndFill: false },
{
name: 'preset-default',
params: {
overrides: {
removeViewBox: false,
removeUselessStrokeAndFill: false,
},
},
},
Comment on lines 37 to +47
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

see https://github.com/svg/svgo/releases/tag/v2.0.0 config changes. Also see SVGO's default preset docs and their plugins table - cleanupIDs is now listed as automatically present, so no need to override it, and prefixIds is listed as not being automatically present, so no need to disable it

],
},
svgProps: {
Expand All @@ -49,12 +53,11 @@ iconFiles.forEach((filePath) => {
titleProp: true,
typescript: true,
template: (
{ template },
opts,
{ imports, interfaces, componentName, props, jsx }
{ imports, interfaces, componentName, props, jsx },
{ tpl }
) =>
hasIds
? template.ast`
? tpl`
Comment on lines 55 to +60
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

${imports}
import { htmlIdGenerator } from '../../../services';
${interfaces}
Expand All @@ -66,7 +69,7 @@ const ${componentName} = (${props}) => {
};
export const icon = ${componentName};
`
: template.ast`
: tpl`
${imports}
${interfaces}
const ${componentName} = (${props}) => ${jsx}
Expand Down
7 changes: 3 additions & 4 deletions src/components/icon/assets/accessibility.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,16 @@
// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js

import * as React from 'react';
import type { SVGProps } from 'react';
interface SVGRProps {
title?: string;
titleId?: string;
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding this note for my own edification - the newline removal actually doesn't have anything to do with this upgrade/PR or with the recent Node v18 upgrade. It occurred due to our recent babel upgrades, and is a known issue: gregberge/svgr#809

Since this doesn't affect any actual consumer or user experience due to it being generated code, I think we can safely ignore it for now.

const EuiIconAccessibility = ({
title,
titleId,
...props
}: React.SVGProps<SVGSVGElement> & SVGRProps) => (
}: SVGProps<SVGSVGElement> & SVGRProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={16}
Expand All @@ -28,8 +28,7 @@ const EuiIconAccessibility = ({
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path d="M8 0a8 8 0 110 16A8 8 0 018 0zm0 1a7 7 0 100 14A7 7 0 008 1zm3.974 4.342a.5.5 0 01-.233.596l-.083.036L9 6.86v2.559l.974 2.923a.5.5 0 01-.233.596l-.083.036a.5.5 0 01-.596-.233l-.036-.083-1-3L8 9.5l-.026.158-1 3a.5.5 0 01-.97-.228l.022-.088L7 9.416V6.86l-2.658-.886a.5.5 0 01.228-.97l.088.022L7.583 6h.833l2.926-.974a.5.5 0 01.632.316zM8 3a1 1 0 110 2 1 1 0 010-2z" />
<path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm0 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm3.974 4.342a.5.5 0 0 1-.233.596l-.083.036L9 6.86v2.559l.974 2.923a.5.5 0 0 1-.233.596l-.083.036a.5.5 0 0 1-.596-.233l-.036-.083-1-3L8 9.5l-.026.158-1 3a.5.5 0 0 1-.97-.228l.022-.088L7 9.416V6.86l-2.658-.886a.5.5 0 0 1 .228-.97l.088.022L7.583 6h.833l2.926-.974a.5.5 0 0 1 .632.316ZM8 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z" />
</svg>
);

export const icon = EuiIconAccessibility;
9 changes: 4 additions & 5 deletions src/components/icon/assets/aggregate.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,30 +9,29 @@
// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js

import * as React from 'react';
import type { SVGProps } from 'react';
interface SVGRProps {
title?: string;
titleId?: string;
}

const EuiIconAggregate = ({
title,
titleId,
...props
}: React.SVGProps<SVGSVGElement> & SVGRProps) => (
}: SVGProps<SVGSVGElement> & SVGRProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={16}
height={16}
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
fillRule="evenodd"
d="M2.5 2a.5.5 0 100 1 .5.5 0 000-1zm0-1a1.5 1.5 0 011.415 1h1.908a1.5 1.5 0 011.393.943L8.839 7H12.5a.5.5 0 010 1H8.839l-1.623 4.057A1.5 1.5 0 015.823 13H3.915a1.5 1.5 0 110-1h1.908a.5.5 0 00.464-.314L7.761 8H3.915a1.5 1.5 0 110-1H7.76L6.287 3.314A.5.5 0 005.823 3H3.915A1.5 1.5 0 112.5 1zm0 11a.5.5 0 110 1 .5.5 0 010-1zM3 7.5a.5.5 0 10-1 0 .5.5 0 001 0zm9.354-3.354a.5.5 0 00-.708.708L13.793 7a.707.707 0 010 1l-2.147 2.146a.5.5 0 00.708.708L14.5 8.707a1.707 1.707 0 000-2.414l-2.146-2.147z"
d="M2.5 2a.5.5 0 1 0 0 1 .5.5 0 0 0 0-1zm0-1a1.5 1.5 0 0 1 1.415 1h1.908a1.5 1.5 0 0 1 1.393.943L8.839 7H12.5a.5.5 0 0 1 0 1H8.839l-1.623 4.057A1.5 1.5 0 0 1 5.823 13H3.915a1.5 1.5 0 1 1 0-1h1.908a.5.5 0 0 0 .464-.314L7.761 8H3.915a1.5 1.5 0 1 1 0-1H7.76L6.287 3.314A.5.5 0 0 0 5.823 3H3.915A1.5 1.5 0 1 1 2.5 1zm0 11a.5.5 0 1 1 0 1 .5.5 0 0 1 0-1zM3 7.5a.5.5 0 1 0-1 0 .5.5 0 0 0 1 0zm9.354-3.354a.5.5 0 0 0-.708.708L13.793 7a.707.707 0 0 1 0 1l-2.147 2.146a.5.5 0 0 0 .708.708L14.5 8.707a1.707 1.707 0 0 0 0-2.414l-2.146-2.147z"
/>
</svg>
);

export const icon = EuiIconAggregate;
11 changes: 5 additions & 6 deletions src/components/icon/assets/analyzeEvent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,32 +9,31 @@
// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js

import * as React from 'react';
import type { SVGProps } from 'react';
interface SVGRProps {
title?: string;
titleId?: string;
}

const EuiIconAnalyzeEvent = ({
title,
titleId,
...props
}: React.SVGProps<SVGSVGElement> & SVGRProps) => (
}: SVGProps<SVGSVGElement> & SVGRProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={16}
height={16}
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path
fillRule="evenodd"
d="M8 9.169 2 5.25v6.17l6 3.428 6-3.428V5.25L8 9.17ZM15 4v8l-7 4-7-4V4l7-4 7 4Zm-1.428.336L8 1.152 2.428 4.336 8 7.974l5.572-3.638Z"
clipRule="evenodd"
d="M8 9.169L2 5.25v6.17l6 3.428 6-3.428V5.25L8 9.17zM15 4v8l-7 4-7-4V4l7-4 7 4zm-1.428.336L8 1.152 2.428 4.336 8 7.974l5.572-3.638z"
/>
</svg>
);

export const icon = EuiIconAnalyzeEvent;
7 changes: 3 additions & 4 deletions src/components/icon/assets/annotation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,16 @@
// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js

import * as React from 'react';
import type { SVGProps } from 'react';
interface SVGRProps {
title?: string;
titleId?: string;
}

const EuiIconAnnotation = ({
title,
titleId,
...props
}: React.SVGProps<SVGSVGElement> & SVGRProps) => (
}: SVGProps<SVGSVGElement> & SVGRProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={16}
Expand All @@ -28,8 +28,7 @@ const EuiIconAnnotation = ({
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path d="M3 6.5a4.5 4.5 0 115 4.473V16H7v-5.027A4.5 4.5 0 013 6.5z" />
<path d="M3 6.5a4.5 4.5 0 1 1 5 4.473V16H7v-5.027A4.5 4.5 0 0 1 3 6.5Z" />
</svg>
);

export const icon = EuiIconAnnotation;
7 changes: 3 additions & 4 deletions src/components/icon/assets/apm_trace.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,16 @@
// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js

import * as React from 'react';
import type { SVGProps } from 'react';
interface SVGRProps {
title?: string;
titleId?: string;
}

const EuiIconApmTrace = ({
title,
titleId,
...props
}: React.SVGProps<SVGSVGElement> & SVGRProps) => (
}: SVGProps<SVGSVGElement> & SVGRProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={16}
Expand All @@ -28,8 +28,7 @@ const EuiIconApmTrace = ({
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path d="M2 0h12a2 2 0 012 2v12a2 2 0 01-2 2H2a2 2 0 01-2-2V2a2 2 0 012-2zm0 1a1 1 0 00-1 1v12a1 1 0 001 1h12a1 1 0 001-1V2a1 1 0 00-1-1H2zm.5 2h10a.5.5 0 110 1h-10a.5.5 0 010-1zm1 3h6a.5.5 0 010 1h-6a.5.5 0 010-1zm2 3h4a.5.5 0 010 1h-4a.5.5 0 010-1zm3 3h5a.5.5 0 110 1h-5a.5.5 0 110-1z" />
<path d="M2 0h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2Zm0 1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H2Zm.5 2h10a.5.5 0 1 1 0 1h-10a.5.5 0 0 1 0-1Zm1 3h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1 0-1Zm2 3h4a.5.5 0 0 1 0 1h-4a.5.5 0 0 1 0-1Zm3 3h5a.5.5 0 1 1 0 1h-5a.5.5 0 1 1 0-1Z" />
</svg>
);

export const icon = EuiIconApmTrace;
9 changes: 4 additions & 5 deletions src/components/icon/assets/app_add_data.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,16 @@
// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js

import * as React from 'react';
import type { SVGProps } from 'react';
interface SVGRProps {
title?: string;
titleId?: string;
}

const EuiIconAppAddData = ({
title,
titleId,
...props
}: React.SVGProps<SVGSVGElement> & SVGRProps) => (
}: SVGProps<SVGSVGElement> & SVGRProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={32}
Expand All @@ -28,12 +28,11 @@ const EuiIconAppAddData = ({
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path d="M32 30H0V3h12.57l3 5H32v22zM2 28h28V10H14.43l-3-5H2v23z" />
<path d="M32 30H0V3h12.57l3 5H32v22ZM2 28h28V10H14.43l-3-5H2v23Z" />
<path
className="euiIcon__fillSecondary"
d="M21 18h-4v-4h-2v4h-4v2h4v4h2v-4h4z"
className="euiIcon__fillSecondary"
/>
</svg>
);

export const icon = EuiIconAppAddData;
17 changes: 8 additions & 9 deletions src/components/icon/assets/app_advanced_settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,16 @@
// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js

import * as React from 'react';
import type { SVGProps } from 'react';
interface SVGRProps {
title?: string;
titleId?: string;
}

const EuiIconAppAdvancedSettings = ({
title,
titleId,
...props
}: React.SVGProps<SVGSVGElement> & SVGRProps) => (
}: SVGProps<SVGSVGElement> & SVGRProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={32}
Expand All @@ -29,21 +29,20 @@ const EuiIconAppAdvancedSettings = ({
>
{title ? <title id={titleId}>{title}</title> : null}
<path
className="euiIcon__fillSecondary"
d="M2.909 26.182h1.939v4.848H2.909z"
className="euiIcon__fillSecondary"
/>
<path d="M4.848 16.62V0H2.91v16.62a3.879 3.879 0 101.94 0zm-.97 5.683a1.94 1.94 0 110-3.879 1.94 1.94 0 010 3.879z" />
<path d="M4.848 16.62V0H2.91v16.62a3.879 3.879 0 1 0 1.94 0Zm-.97 5.683a1.94 1.94 0 1 1 0-3.879 1.94 1.94 0 0 1 0 3.879Z" />
<path
className="euiIcon__fillSecondary"
d="M14.545 16.485h1.939V31.03h-1.939z"
className="euiIcon__fillSecondary"
/>
<path d="M16.485 6.924V0h-1.94v6.924a3.879 3.879 0 101.94 0zm-.97 5.682a1.94 1.94 0 110-3.879 1.94 1.94 0 010 3.88z" />
<path d="M16.485 6.924V0h-1.94v6.924a3.879 3.879 0 1 0 1.94 0Zm-.97 5.682a1.94 1.94 0 1 1 0-3.879 1.94 1.94 0 0 1 0 3.88Z" />
<path
className="euiIcon__fillSecondary"
d="M26.182 26.182h1.939v4.848h-1.939z"
className="euiIcon__fillSecondary"
/>
<path d="M28.121 16.62V0h-1.94v16.62a3.879 3.879 0 101.94 0zm-.97 5.683a1.94 1.94 0 110-3.879 1.94 1.94 0 010 3.879z" />
<path d="M28.121 16.62V0h-1.94v16.62a3.879 3.879 0 1 0 1.94 0Zm-.97 5.683a1.94 1.94 0 1 1 0-3.879 1.94 1.94 0 0 1 0 3.879Z" />
</svg>
);

export const icon = EuiIconAppAdvancedSettings;
11 changes: 5 additions & 6 deletions src/components/icon/assets/app_agent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,31 +9,30 @@
// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js

import * as React from 'react';
import type { SVGProps } from 'react';
interface SVGRProps {
title?: string;
titleId?: string;
}

const EuiIconAppAgent = ({
title,
titleId,
...props
}: React.SVGProps<SVGSVGElement> & SVGRProps) => (
}: SVGProps<SVGSVGElement> & SVGRProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={32}
height={32}
viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby={titleId}
{...props}
>
{title ? <title id={titleId}>{title}</title> : null}
<path d="M2.996 18.636L0 20.434v6.132l6 3.6 5-3 5 3 5-3 5 3 6-3.6v-6.132l-5-3v-5l-5-3v-5l-6-3.6-6 3.6v2.832l2 .033V5.566l4-2.4 4 2.4v3.868l-1.996 1.197 1 1.733L21 11.166l4 2.4v3.868l-4 2.4-2.257-1.354-.971 1.75L20 21.565v3.868l-4 2.4-4-2.4v-1.7l-2-.033v1.733l-4 2.4-4-2.4v-3.868l1.996-1.197-1-1.733zM22 25.434v-3.868l4-2.4 4 2.4v3.868l-4 2.4-4-2.4z" />
<path d="M2.996 18.636 0 20.434v6.132l6 3.6 5-3 5 3 5-3 5 3 6-3.6v-6.132l-5-3v-5l-5-3v-5l-6-3.6-6 3.6v2.832l2 .033V5.566l4-2.4 4 2.4v3.868l-1.996 1.197 1 1.733L21 11.166l4 2.4v3.868l-4 2.4-2.257-1.354-.971 1.75L20 21.565v3.868l-4 2.4-4-2.4v-1.7l-2-.033v1.733l-4 2.4-4-2.4v-3.868l1.996-1.197-1-1.733ZM22 25.434v-3.868l4-2.4 4 2.4v3.868l-4 2.4-4-2.4Z" />
<path
d="m11 22.166-6-3.6v-6.132l6-3.6 6 3.6v6.132l-6 3.6Zm4-4.732v-3.868l-4-2.4-4 2.4v3.868l4 2.4 4-2.4Z"
className="euiIcon__fillSecondary"
d="M11 22.166l-6-3.6v-6.132l6-3.6 6 3.6v6.132l-6 3.6zm4-4.732v-3.868l-4-2.4-4 2.4v3.868l4 2.4 4-2.4z"
/>
</svg>
);

export const icon = EuiIconAppAgent;
7 changes: 3 additions & 4 deletions src/components/icon/assets/app_apm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,16 @@
// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js

import * as React from 'react';
import type { SVGProps } from 'react';
interface SVGRProps {
title?: string;
titleId?: string;
}

const EuiIconAppApm = ({
title,
titleId,
...props
}: React.SVGProps<SVGSVGElement> & SVGRProps) => (
}: SVGProps<SVGSVGElement> & SVGRProps) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width={32}
Expand All @@ -30,10 +30,9 @@ const EuiIconAppApm = ({
{title ? <title id={titleId}>{title}</title> : null}
<path d="M3 10h4v2H1V1h30v6h-2V3H3v7zm26 19v-6h2v8H18v-8h2v6h9z" />
<path
d="M31 10H9v11h12c5.523 0 10-4.477 10-10v-1zm-10 9H11v-7h17.938A8.001 8.001 0 0 1 21 19z"
className="euiIcon__fillSecondary"
d="M31 10H9v11h12c5.523 0 10-4.477 10-10v-1zm-10 9H11v-7h17.938A8.001 8.001 0 0121 19z"
/>
</svg>
);

export const icon = EuiIconAppApm;
Loading