From fa862ff25d29ff76baa3eea602eeab9dc504f88a Mon Sep 17 00:00:00 2001 From: sashuk Date: Mon, 13 Jan 2025 17:12:20 +0000 Subject: [PATCH 1/3] Add pictograms --- .changeset/shiny-pillows-check.md | 5 ++ .../BoxArchiveEmptyStateBacklogBlue64.tsx | 61 +++++++++++++++ .../BoxArchiveEmptyStateBacklogWhite64.tsx | 61 +++++++++++++++ .../PeopleReferralInviteEmptyStateBlue64.tsx | 71 +++++++++++++++++ .../PeopleReferralInviteEmptyStateWhite64.tsx | 71 +++++++++++++++++ .../ScanHeatmapSiteResearchTestBlue64.tsx | 77 +++++++++++++++++++ .../ScanHeatmapSiteResearchTestWhite64.tsx | 77 +++++++++++++++++++ .../picasso-pictograms/src/Pictogram/index.ts | 6 ++ .../svg/BoxArchiveEmptyStateBacklogBlue64.svg | 21 +++++ .../BoxArchiveEmptyStateBacklogWhite64.svg | 21 +++++ .../PeopleReferralInviteEmptyStateBlue64.svg | 18 +++++ .../PeopleReferralInviteEmptyStateWhite64.svg | 18 +++++ .../svg/ScanHeatmapSiteResearchTestBlue64.svg | 24 ++++++ .../ScanHeatmapSiteResearchTestWhite64.svg | 24 ++++++ 14 files changed, 555 insertions(+) create mode 100644 .changeset/shiny-pillows-check.md create mode 100644 packages/picasso-pictograms/src/Pictogram/BoxArchiveEmptyStateBacklogBlue64.tsx create mode 100644 packages/picasso-pictograms/src/Pictogram/BoxArchiveEmptyStateBacklogWhite64.tsx create mode 100644 packages/picasso-pictograms/src/Pictogram/PeopleReferralInviteEmptyStateBlue64.tsx create mode 100644 packages/picasso-pictograms/src/Pictogram/PeopleReferralInviteEmptyStateWhite64.tsx create mode 100644 packages/picasso-pictograms/src/Pictogram/ScanHeatmapSiteResearchTestBlue64.tsx create mode 100644 packages/picasso-pictograms/src/Pictogram/ScanHeatmapSiteResearchTestWhite64.tsx create mode 100644 packages/picasso-pictograms/src/Pictogram/svg/BoxArchiveEmptyStateBacklogBlue64.svg create mode 100644 packages/picasso-pictograms/src/Pictogram/svg/BoxArchiveEmptyStateBacklogWhite64.svg create mode 100644 packages/picasso-pictograms/src/Pictogram/svg/PeopleReferralInviteEmptyStateBlue64.svg create mode 100644 packages/picasso-pictograms/src/Pictogram/svg/PeopleReferralInviteEmptyStateWhite64.svg create mode 100644 packages/picasso-pictograms/src/Pictogram/svg/ScanHeatmapSiteResearchTestBlue64.svg create mode 100644 packages/picasso-pictograms/src/Pictogram/svg/ScanHeatmapSiteResearchTestWhite64.svg diff --git a/.changeset/shiny-pillows-check.md b/.changeset/shiny-pillows-check.md new file mode 100644 index 0000000000..7654970eb6 --- /dev/null +++ b/.changeset/shiny-pillows-check.md @@ -0,0 +1,5 @@ +--- +'@toptal/picasso-pictograms': minor +--- + +- add pictograms (`BoxArchiveEmptyStateBacklog`, `PeopleReferralInviteEmptyState`, `ScanHeatmapSiteResearchTest`) diff --git a/packages/picasso-pictograms/src/Pictogram/BoxArchiveEmptyStateBacklogBlue64.tsx b/packages/picasso-pictograms/src/Pictogram/BoxArchiveEmptyStateBacklogBlue64.tsx new file mode 100644 index 0000000000..5214fdc1de --- /dev/null +++ b/packages/picasso-pictograms/src/Pictogram/BoxArchiveEmptyStateBacklogBlue64.tsx @@ -0,0 +1,61 @@ +import type { Ref } from 'react' +import React, { forwardRef } from 'react' +import type { StandardProps } from '@toptal/picasso-shared' + +const SIZE = 64 + +type ScaleType = 1 | 2 +export interface Props extends StandardProps { + scale?: ScaleType + base?: number +} +const SvgBoxArchiveEmptyStateBacklogBlue64 = forwardRef( + function SvgBoxArchiveEmptyStateBacklogBlue64( + props: Props, + ref: Ref + ) { + const { className, style = {}, scale, base, 'data-testid': testId } = props + const scaledSize = base || SIZE * Math.ceil(scale || 1) + + const svgStyle = { + minWidth: `${scaledSize}px`, + minHeight: `${scaledSize}px`, + ...style, + } + + return ( + + + + + + + + + + + + + + ) + } +) + +SvgBoxArchiveEmptyStateBacklogBlue64.displayName = + 'SvgBoxArchiveEmptyStateBacklogBlue64' +export default SvgBoxArchiveEmptyStateBacklogBlue64 diff --git a/packages/picasso-pictograms/src/Pictogram/BoxArchiveEmptyStateBacklogWhite64.tsx b/packages/picasso-pictograms/src/Pictogram/BoxArchiveEmptyStateBacklogWhite64.tsx new file mode 100644 index 0000000000..2c794be8f5 --- /dev/null +++ b/packages/picasso-pictograms/src/Pictogram/BoxArchiveEmptyStateBacklogWhite64.tsx @@ -0,0 +1,61 @@ +import type { Ref } from 'react' +import React, { forwardRef } from 'react' +import type { StandardProps } from '@toptal/picasso-shared' + +const SIZE = 64 + +type ScaleType = 1 | 2 +export interface Props extends StandardProps { + scale?: ScaleType + base?: number +} +const SvgBoxArchiveEmptyStateBacklogWhite64 = forwardRef( + function SvgBoxArchiveEmptyStateBacklogWhite64( + props: Props, + ref: Ref + ) { + const { className, style = {}, scale, base, 'data-testid': testId } = props + const scaledSize = base || SIZE * Math.ceil(scale || 1) + + const svgStyle = { + minWidth: `${scaledSize}px`, + minHeight: `${scaledSize}px`, + ...style, + } + + return ( + + + + + + + + + + + + + + ) + } +) + +SvgBoxArchiveEmptyStateBacklogWhite64.displayName = + 'SvgBoxArchiveEmptyStateBacklogWhite64' +export default SvgBoxArchiveEmptyStateBacklogWhite64 diff --git a/packages/picasso-pictograms/src/Pictogram/PeopleReferralInviteEmptyStateBlue64.tsx b/packages/picasso-pictograms/src/Pictogram/PeopleReferralInviteEmptyStateBlue64.tsx new file mode 100644 index 0000000000..cfa220f641 --- /dev/null +++ b/packages/picasso-pictograms/src/Pictogram/PeopleReferralInviteEmptyStateBlue64.tsx @@ -0,0 +1,71 @@ +import type { Ref } from 'react' +import React, { forwardRef } from 'react' +import type { StandardProps } from '@toptal/picasso-shared' + +const SIZE = 64 + +type ScaleType = 1 | 2 +export interface Props extends StandardProps { + scale?: ScaleType + base?: number +} +const SvgPeopleReferralInviteEmptyStateBlue64 = forwardRef( + function SvgPeopleReferralInviteEmptyStateBlue64( + props: Props, + ref: Ref + ) { + const { className, style = {}, scale, base, 'data-testid': testId } = props + const scaledSize = base || SIZE * Math.ceil(scale || 1) + + const svgStyle = { + minWidth: `${scaledSize}px`, + minHeight: `${scaledSize}px`, + ...style, + } + + return ( + + + + + + + + + + + + + + + ) + } +) + +SvgPeopleReferralInviteEmptyStateBlue64.displayName = + 'SvgPeopleReferralInviteEmptyStateBlue64' +export default SvgPeopleReferralInviteEmptyStateBlue64 diff --git a/packages/picasso-pictograms/src/Pictogram/PeopleReferralInviteEmptyStateWhite64.tsx b/packages/picasso-pictograms/src/Pictogram/PeopleReferralInviteEmptyStateWhite64.tsx new file mode 100644 index 0000000000..43ea0d9007 --- /dev/null +++ b/packages/picasso-pictograms/src/Pictogram/PeopleReferralInviteEmptyStateWhite64.tsx @@ -0,0 +1,71 @@ +import type { Ref } from 'react' +import React, { forwardRef } from 'react' +import type { StandardProps } from '@toptal/picasso-shared' + +const SIZE = 64 + +type ScaleType = 1 | 2 +export interface Props extends StandardProps { + scale?: ScaleType + base?: number +} +const SvgPeopleReferralInviteEmptyStateWhite64 = forwardRef( + function SvgPeopleReferralInviteEmptyStateWhite64( + props: Props, + ref: Ref + ) { + const { className, style = {}, scale, base, 'data-testid': testId } = props + const scaledSize = base || SIZE * Math.ceil(scale || 1) + + const svgStyle = { + minWidth: `${scaledSize}px`, + minHeight: `${scaledSize}px`, + ...style, + } + + return ( + + + + + + + + + + + + + + + ) + } +) + +SvgPeopleReferralInviteEmptyStateWhite64.displayName = + 'SvgPeopleReferralInviteEmptyStateWhite64' +export default SvgPeopleReferralInviteEmptyStateWhite64 diff --git a/packages/picasso-pictograms/src/Pictogram/ScanHeatmapSiteResearchTestBlue64.tsx b/packages/picasso-pictograms/src/Pictogram/ScanHeatmapSiteResearchTestBlue64.tsx new file mode 100644 index 0000000000..dce1288534 --- /dev/null +++ b/packages/picasso-pictograms/src/Pictogram/ScanHeatmapSiteResearchTestBlue64.tsx @@ -0,0 +1,77 @@ +import type { Ref } from 'react' +import React, { forwardRef } from 'react' +import type { StandardProps } from '@toptal/picasso-shared' + +const SIZE = 64 + +type ScaleType = 1 | 2 +export interface Props extends StandardProps { + scale?: ScaleType + base?: number +} +const SvgScanHeatmapSiteResearchTestBlue64 = forwardRef( + function SvgScanHeatmapSiteResearchTestBlue64( + props: Props, + ref: Ref + ) { + const { className, style = {}, scale, base, 'data-testid': testId } = props + const scaledSize = base || SIZE * Math.ceil(scale || 1) + + const svgStyle = { + minWidth: `${scaledSize}px`, + minHeight: `${scaledSize}px`, + ...style, + } + + return ( + + + + + + + + + + + + + + + + + ) + } +) + +SvgScanHeatmapSiteResearchTestBlue64.displayName = + 'SvgScanHeatmapSiteResearchTestBlue64' +export default SvgScanHeatmapSiteResearchTestBlue64 diff --git a/packages/picasso-pictograms/src/Pictogram/ScanHeatmapSiteResearchTestWhite64.tsx b/packages/picasso-pictograms/src/Pictogram/ScanHeatmapSiteResearchTestWhite64.tsx new file mode 100644 index 0000000000..3ed9a5c6de --- /dev/null +++ b/packages/picasso-pictograms/src/Pictogram/ScanHeatmapSiteResearchTestWhite64.tsx @@ -0,0 +1,77 @@ +import type { Ref } from 'react' +import React, { forwardRef } from 'react' +import type { StandardProps } from '@toptal/picasso-shared' + +const SIZE = 64 + +type ScaleType = 1 | 2 +export interface Props extends StandardProps { + scale?: ScaleType + base?: number +} +const SvgScanHeatmapSiteResearchTestWhite64 = forwardRef( + function SvgScanHeatmapSiteResearchTestWhite64( + props: Props, + ref: Ref + ) { + const { className, style = {}, scale, base, 'data-testid': testId } = props + const scaledSize = base || SIZE * Math.ceil(scale || 1) + + const svgStyle = { + minWidth: `${scaledSize}px`, + minHeight: `${scaledSize}px`, + ...style, + } + + return ( + + + + + + + + + + + + + + + + + ) + } +) + +SvgScanHeatmapSiteResearchTestWhite64.displayName = + 'SvgScanHeatmapSiteResearchTestWhite64' +export default SvgScanHeatmapSiteResearchTestWhite64 diff --git a/packages/picasso-pictograms/src/Pictogram/index.ts b/packages/picasso-pictograms/src/Pictogram/index.ts index 3f3fad9c1c..e56135e387 100644 --- a/packages/picasso-pictograms/src/Pictogram/index.ts +++ b/packages/picasso-pictograms/src/Pictogram/index.ts @@ -43,6 +43,8 @@ export { default as BlockchainBlue64 } from './BlockchainBlue64' export { default as BlockchainWhite64 } from './BlockchainWhite64' export { default as BookOpenBlue64 } from './BookOpenBlue64' export { default as BookOpenWhite64 } from './BookOpenWhite64' +export { default as BoxArchiveEmptyStateBacklogBlue64 } from './BoxArchiveEmptyStateBacklogBlue64' +export { default as BoxArchiveEmptyStateBacklogWhite64 } from './BoxArchiveEmptyStateBacklogWhite64' export { default as BrainCircuitsBlue64 } from './BrainCircuitsBlue64' export { default as BrainCircuitsWhite64 } from './BrainCircuitsWhite64' export { default as BrainIntelligenceBlue64 } from './BrainIntelligenceBlue64' @@ -100,8 +102,12 @@ export { default as CyberLockWhite64 } from './CyberLockWhite64' export { default as DeveloperExpertBlue64 } from './DeveloperExpertBlue64' export { default as HandDeliveryBlue64 } from './HandDeliveryBlue64' export { default as HandDeliveryWhite64 } from './HandDeliveryWhite64' +export { default as PeopleReferralInviteEmptyStateBlue64 } from './PeopleReferralInviteEmptyStateBlue64' +export { default as PeopleReferralInviteEmptyStateWhite64 } from './PeopleReferralInviteEmptyStateWhite64' export { default as ReportBlue64 } from './ReportBlue64' export { default as ReportWhite64 } from './ReportWhite64' +export { default as ScanHeatmapSiteResearchTestBlue64 } from './ScanHeatmapSiteResearchTestBlue64' +export { default as ScanHeatmapSiteResearchTestWhite64 } from './ScanHeatmapSiteResearchTestWhite64' export { default as ShareLinkBlue64 } from './ShareLinkBlue64' export { default as TeamBusinessBlue64 } from './TeamBusinessBlue64' export { default as TeamBusinessWhite64 } from './TeamBusinessWhite64' diff --git a/packages/picasso-pictograms/src/Pictogram/svg/BoxArchiveEmptyStateBacklogBlue64.svg b/packages/picasso-pictograms/src/Pictogram/svg/BoxArchiveEmptyStateBacklogBlue64.svg new file mode 100644 index 0000000000..0cb404fa68 --- /dev/null +++ b/packages/picasso-pictograms/src/Pictogram/svg/BoxArchiveEmptyStateBacklogBlue64.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/picasso-pictograms/src/Pictogram/svg/BoxArchiveEmptyStateBacklogWhite64.svg b/packages/picasso-pictograms/src/Pictogram/svg/BoxArchiveEmptyStateBacklogWhite64.svg new file mode 100644 index 0000000000..a4865d457d --- /dev/null +++ b/packages/picasso-pictograms/src/Pictogram/svg/BoxArchiveEmptyStateBacklogWhite64.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/picasso-pictograms/src/Pictogram/svg/PeopleReferralInviteEmptyStateBlue64.svg b/packages/picasso-pictograms/src/Pictogram/svg/PeopleReferralInviteEmptyStateBlue64.svg new file mode 100644 index 0000000000..cc87f3e337 --- /dev/null +++ b/packages/picasso-pictograms/src/Pictogram/svg/PeopleReferralInviteEmptyStateBlue64.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/packages/picasso-pictograms/src/Pictogram/svg/PeopleReferralInviteEmptyStateWhite64.svg b/packages/picasso-pictograms/src/Pictogram/svg/PeopleReferralInviteEmptyStateWhite64.svg new file mode 100644 index 0000000000..c2be6073fd --- /dev/null +++ b/packages/picasso-pictograms/src/Pictogram/svg/PeopleReferralInviteEmptyStateWhite64.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/packages/picasso-pictograms/src/Pictogram/svg/ScanHeatmapSiteResearchTestBlue64.svg b/packages/picasso-pictograms/src/Pictogram/svg/ScanHeatmapSiteResearchTestBlue64.svg new file mode 100644 index 0000000000..24f493a0df --- /dev/null +++ b/packages/picasso-pictograms/src/Pictogram/svg/ScanHeatmapSiteResearchTestBlue64.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/picasso-pictograms/src/Pictogram/svg/ScanHeatmapSiteResearchTestWhite64.svg b/packages/picasso-pictograms/src/Pictogram/svg/ScanHeatmapSiteResearchTestWhite64.svg new file mode 100644 index 0000000000..33e091a5f9 --- /dev/null +++ b/packages/picasso-pictograms/src/Pictogram/svg/ScanHeatmapSiteResearchTestWhite64.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + From dc74c7a1c1f142080833bc348c8dc80bf62646e6 Mon Sep 17 00:00:00 2001 From: sashuk Date: Wed, 15 Jan 2025 13:11:50 +0000 Subject: [PATCH 2/3] Fix --- README.md | 2 +- .../BoxArchiveEmptyStateBacklogBlue64.tsx | 10 ++++- .../BoxArchiveEmptyStateBacklogWhite64.tsx | 10 ++++- .../PeopleReferralInviteEmptyStateBlue64.tsx | 3 ++ .../PeopleReferralInviteEmptyStateWhite64.tsx | 3 ++ .../ScanHeatmapSiteResearchTestBlue64.tsx | 15 ++++++-- .../ScanHeatmapSiteResearchTestWhite64.tsx | 9 ++++- .../svg/ScanHeatmapSiteResearchTestBlue64.svg | 38 ++++++++----------- svgr.config.js | 29 +++++++++++++- 9 files changed, 84 insertions(+), 35 deletions(-) diff --git a/README.md b/README.md index e6fb58bbe0..f163bf1db4 100644 --- a/README.md +++ b/README.md @@ -101,7 +101,7 @@ To add a new icon to `@toptal/picasso` or pictogram to `@toptal/picasso-pictogra 1. Prepare your SVG: - Make sure that it has `viewBox` attribute specified - Make sure that `viewBox` sizes are `0 0 16 16` and `0 0 24 24` for icon (there should always be two icon variants) and `0 0 64 64` for pictogram (be careful this isn't just a simple value set!) - - Make sure all paths are expanded and strokes are not used + - Make sure all paths are expanded and strokes are not used (use [this](https://iconly.io/tools/svg-convert-stroke-to-fill) or [this](https://svgomg.net/) online tools) 2. Add your SVG file(s) to the Picasso project: ```bash diff --git a/packages/picasso-pictograms/src/Pictogram/BoxArchiveEmptyStateBacklogBlue64.tsx b/packages/picasso-pictograms/src/Pictogram/BoxArchiveEmptyStateBacklogBlue64.tsx index 5214fdc1de..a172221a22 100644 --- a/packages/picasso-pictograms/src/Pictogram/BoxArchiveEmptyStateBacklogBlue64.tsx +++ b/packages/picasso-pictograms/src/Pictogram/BoxArchiveEmptyStateBacklogBlue64.tsx @@ -38,13 +38,19 @@ const SvgBoxArchiveEmptyStateBacklogBlue64 = forwardRef( d='M62.4 61.6H1.6c-.664 0-1.2-.536-1.2-1.2v2c0 .664.536 1.2 1.2 1.2h60.8c.664 0 1.2-.536 1.2-1.2v-2c0 .664-.536 1.2-1.2 1.2ZM63.8 22.6l-8-8H8.2l-8 8' opacity={0.15} /> - + - + diff --git a/packages/picasso-pictograms/src/Pictogram/BoxArchiveEmptyStateBacklogWhite64.tsx b/packages/picasso-pictograms/src/Pictogram/BoxArchiveEmptyStateBacklogWhite64.tsx index 2c794be8f5..6d5351512a 100644 --- a/packages/picasso-pictograms/src/Pictogram/BoxArchiveEmptyStateBacklogWhite64.tsx +++ b/packages/picasso-pictograms/src/Pictogram/BoxArchiveEmptyStateBacklogWhite64.tsx @@ -38,13 +38,19 @@ const SvgBoxArchiveEmptyStateBacklogWhite64 = forwardRef( d='M62.4 61.6H1.6c-.664 0-1.2-.536-1.2-1.2v2c0 .664.536 1.2 1.2 1.2h60.8c.664 0 1.2-.536 1.2-1.2v-2c0 .664-.536 1.2-1.2 1.2ZM63.8 22.6l-8-8H8.2l-8 8' opacity={0.3} /> - + - + diff --git a/packages/picasso-pictograms/src/Pictogram/PeopleReferralInviteEmptyStateBlue64.tsx b/packages/picasso-pictograms/src/Pictogram/PeopleReferralInviteEmptyStateBlue64.tsx index cfa220f641..90f2255464 100644 --- a/packages/picasso-pictograms/src/Pictogram/PeopleReferralInviteEmptyStateBlue64.tsx +++ b/packages/picasso-pictograms/src/Pictogram/PeopleReferralInviteEmptyStateBlue64.tsx @@ -39,6 +39,7 @@ const SvgPeopleReferralInviteEmptyStateBlue64 = forwardRef( opacity={0.15} /> @@ -48,10 +49,12 @@ const SvgPeopleReferralInviteEmptyStateBlue64 = forwardRef( opacity={0.15} /> diff --git a/packages/picasso-pictograms/src/Pictogram/PeopleReferralInviteEmptyStateWhite64.tsx b/packages/picasso-pictograms/src/Pictogram/PeopleReferralInviteEmptyStateWhite64.tsx index 43ea0d9007..8919619af9 100644 --- a/packages/picasso-pictograms/src/Pictogram/PeopleReferralInviteEmptyStateWhite64.tsx +++ b/packages/picasso-pictograms/src/Pictogram/PeopleReferralInviteEmptyStateWhite64.tsx @@ -39,6 +39,7 @@ const SvgPeopleReferralInviteEmptyStateWhite64 = forwardRef( opacity={0.3} /> @@ -48,10 +49,12 @@ const SvgPeopleReferralInviteEmptyStateWhite64 = forwardRef( opacity={0.3} /> diff --git a/packages/picasso-pictograms/src/Pictogram/ScanHeatmapSiteResearchTestBlue64.tsx b/packages/picasso-pictograms/src/Pictogram/ScanHeatmapSiteResearchTestBlue64.tsx index dce1288534..229665394a 100644 --- a/packages/picasso-pictograms/src/Pictogram/ScanHeatmapSiteResearchTestBlue64.tsx +++ b/packages/picasso-pictograms/src/Pictogram/ScanHeatmapSiteResearchTestBlue64.tsx @@ -35,7 +35,7 @@ const SvgScanHeatmapSiteResearchTestBlue64 = forwardRef( - + diff --git a/packages/picasso-pictograms/src/Pictogram/ScanHeatmapSiteResearchTestWhite64.tsx b/packages/picasso-pictograms/src/Pictogram/ScanHeatmapSiteResearchTestWhite64.tsx index 3ed9a5c6de..833327857e 100644 --- a/packages/picasso-pictograms/src/Pictogram/ScanHeatmapSiteResearchTestWhite64.tsx +++ b/packages/picasso-pictograms/src/Pictogram/ScanHeatmapSiteResearchTestWhite64.tsx @@ -49,18 +49,25 @@ const SvgScanHeatmapSiteResearchTestWhite64 = forwardRef( opacity={0.3} /> - + diff --git a/packages/picasso-pictograms/src/Pictogram/svg/ScanHeatmapSiteResearchTestBlue64.svg b/packages/picasso-pictograms/src/Pictogram/svg/ScanHeatmapSiteResearchTestBlue64.svg index 24f493a0df..b8875d7bee 100644 --- a/packages/picasso-pictograms/src/Pictogram/svg/ScanHeatmapSiteResearchTestBlue64.svg +++ b/packages/picasso-pictograms/src/Pictogram/svg/ScanHeatmapSiteResearchTestBlue64.svg @@ -1,24 +1,16 @@ - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + diff --git a/svgr.config.js b/svgr.config.js index 58b8ccf7eb..4b1de3f905 100644 --- a/svgr.config.js +++ b/svgr.config.js @@ -16,6 +16,9 @@ const ICON_CLEANUP_CONFIG = { }, } +const ATTRIBUTES_TO_REMOVE_IN_ICONS = '(stroke|width|height|xmlns.*)' +const ATTRIBUTES_TO_REMOVE_IN_PICTOGRAMS = '(width|height|xmlns.*)' + const getCleanupConfig = svgPath => { for (const [key, value] of Object.entries(ICON_CLEANUP_CONFIG)) { if (svgPath.indexOf(key) > -1) { @@ -153,8 +156,30 @@ module.exports = { }, { name: 'removeAttrs', - params: { - attrs: '(stroke|width|height|xmlns.*)', + fn: (node, _, info) => { + const isPictogram = info.path.indexOf('picasso-pictograms') > -1 + + const attrsToRemove = isPictogram + ? ATTRIBUTES_TO_REMOVE_IN_PICTOGRAMS + : ATTRIBUTES_TO_REMOVE_IN_ICONS + + const traverse = (node) => { + if (node.attributes) { + Object.keys(node.attributes).forEach((attr) => { + if (new RegExp(attrsToRemove).test(attr)) { + delete node.attributes[attr] + } + }) + } + + if (node.children) { + node.children.forEach(traverse) + } + } + + traverse(node) + + return node }, }, { From 511b88d56bbda9ef1831b1bd73dbd0707f80e5fa Mon Sep 17 00:00:00 2001 From: sashuk Date: Wed, 15 Jan 2025 16:27:02 +0000 Subject: [PATCH 3/3] Clean up SVGs --- .../BoxArchiveEmptyStateBacklogBlue64.tsx | 4 +- .../BoxArchiveEmptyStateBacklogWhite64.tsx | 4 +- .../PeopleReferralInviteEmptyStateBlue64.tsx | 4 +- .../PeopleReferralInviteEmptyStateWhite64.tsx | 4 +- .../ScanHeatmapSiteResearchTestWhite64.tsx | 6 +-- .../svg/BoxArchiveEmptyStateBacklogBlue64.svg | 34 ++++++---------- .../BoxArchiveEmptyStateBacklogWhite64.svg | 34 ++++++---------- .../PeopleReferralInviteEmptyStateBlue64.svg | 32 +++++++-------- .../PeopleReferralInviteEmptyStateWhite64.svg | 32 +++++++-------- .../svg/ScanHeatmapSiteResearchTestBlue64.svg | 8 ++-- .../ScanHeatmapSiteResearchTestWhite64.svg | 40 ++++++++----------- 11 files changed, 85 insertions(+), 117 deletions(-) diff --git a/packages/picasso-pictograms/src/Pictogram/BoxArchiveEmptyStateBacklogBlue64.tsx b/packages/picasso-pictograms/src/Pictogram/BoxArchiveEmptyStateBacklogBlue64.tsx index a172221a22..f539562bc5 100644 --- a/packages/picasso-pictograms/src/Pictogram/BoxArchiveEmptyStateBacklogBlue64.tsx +++ b/packages/picasso-pictograms/src/Pictogram/BoxArchiveEmptyStateBacklogBlue64.tsx @@ -35,12 +35,12 @@ const SvgBoxArchiveEmptyStateBacklogBlue64 = forwardRef( - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/picasso-pictograms/src/Pictogram/svg/BoxArchiveEmptyStateBacklogWhite64.svg b/packages/picasso-pictograms/src/Pictogram/svg/BoxArchiveEmptyStateBacklogWhite64.svg index a4865d457d..0b3e3de249 100644 --- a/packages/picasso-pictograms/src/Pictogram/svg/BoxArchiveEmptyStateBacklogWhite64.svg +++ b/packages/picasso-pictograms/src/Pictogram/svg/BoxArchiveEmptyStateBacklogWhite64.svg @@ -1,21 +1,13 @@ - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/picasso-pictograms/src/Pictogram/svg/PeopleReferralInviteEmptyStateBlue64.svg b/packages/picasso-pictograms/src/Pictogram/svg/PeopleReferralInviteEmptyStateBlue64.svg index cc87f3e337..58f65a5018 100644 --- a/packages/picasso-pictograms/src/Pictogram/svg/PeopleReferralInviteEmptyStateBlue64.svg +++ b/packages/picasso-pictograms/src/Pictogram/svg/PeopleReferralInviteEmptyStateBlue64.svg @@ -1,18 +1,14 @@ - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/picasso-pictograms/src/Pictogram/svg/PeopleReferralInviteEmptyStateWhite64.svg b/packages/picasso-pictograms/src/Pictogram/svg/PeopleReferralInviteEmptyStateWhite64.svg index c2be6073fd..25a9f7c9a8 100644 --- a/packages/picasso-pictograms/src/Pictogram/svg/PeopleReferralInviteEmptyStateWhite64.svg +++ b/packages/picasso-pictograms/src/Pictogram/svg/PeopleReferralInviteEmptyStateWhite64.svg @@ -1,18 +1,14 @@ - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/picasso-pictograms/src/Pictogram/svg/ScanHeatmapSiteResearchTestBlue64.svg b/packages/picasso-pictograms/src/Pictogram/svg/ScanHeatmapSiteResearchTestBlue64.svg index b8875d7bee..6a81cc4d65 100644 --- a/packages/picasso-pictograms/src/Pictogram/svg/ScanHeatmapSiteResearchTestBlue64.svg +++ b/packages/picasso-pictograms/src/Pictogram/svg/ScanHeatmapSiteResearchTestBlue64.svg @@ -1,9 +1,9 @@ - + - - + + @@ -13,4 +13,4 @@ - + \ No newline at end of file diff --git a/packages/picasso-pictograms/src/Pictogram/svg/ScanHeatmapSiteResearchTestWhite64.svg b/packages/picasso-pictograms/src/Pictogram/svg/ScanHeatmapSiteResearchTestWhite64.svg index 33e091a5f9..c03ff4cd49 100644 --- a/packages/picasso-pictograms/src/Pictogram/svg/ScanHeatmapSiteResearchTestWhite64.svg +++ b/packages/picasso-pictograms/src/Pictogram/svg/ScanHeatmapSiteResearchTestWhite64.svg @@ -1,24 +1,16 @@ - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + \ No newline at end of file