feat(EbaySvg): Support list of icons to render

eBay · Oct 15, 2024 · 27c6e43 · 27c6e43
1 parent 2ae4adc
commit 27c6e43
Show file tree

Hide file tree

Showing 8 changed files with 872 additions and 832 deletions.
diff --git a/scripts/__tests__/__snapshots__/update-icons.spec.ts.snap b/scripts/__tests__/__snapshots__/update-icons.spec.ts.snap
@@ -5,16 +5,11 @@ exports[`update-icons generateEbaySVG() should generate EbaySvg component from S
 // @ts-nocheck
 /* This file is autogenerated, do not edit - it will be overwritten anyway */
 
-import React, { FC } from 'react'
-
-const EbaySvg: FC = () => (
-    <svg style={{ position: 'absolute', height: '0px', width: '0px' }}>
-        <symbol id="icon-add-20" viewBox="0 0 20 20"><path className="some-class-name" d="M19 9h-8V1a1 1 0 00-2 0v8H1a1 1 0 000 2h8v8a1 1 0 002 0v-8h8a1 1 0 000-2z" style={{transform: 'rotateX(10deg)', backgroundColor: 'white'}}/></symbol>
-        <symbol id="icon-social-messenger-24" viewBox="0 0 24 24"><g clipPath="url(#clip0_41192_49714)"><path d="M12 0C5.24 0 0 4.952 0 11.64c0 3.499 1.434 6.521 3.769 8.61a.957.957 0 01.322.684l.066 2.136a.96.96 0 001.346.849l2.383-1.05a.958.958 0 01.64-.047c1.132.308 2.3.462 3.474.458 6.76 0 12-4.95 12-11.64S18.76 0 12 0zm7.206 8.956l-3.525 5.594a1.799 1.799 0 01-2.603.48l-2.803-2.103a.72.72 0 00-.868.003l-3.786 2.872c-.505.384-1.165-.221-.827-.758l3.525-5.593a1.8 1.8 0 012.603-.48l2.803 2.103a.72.72 0 00.868-.002l3.786-2.874c.505-.384 1.165.221.827.758z"/></g><defs><clipPath id="clip0_41192_49714"><path d="M0 0h24v24H0z" fill="var(--color-social-icons-foreground, #fff)"/></clipPath></defs></symbol>
-        <symbol id="icon-social-whatsapp-24" viewBox="0 0 24 24"><path clipRule="evenodd" d="M20.5 3.5A11.9 11.9 0 0 0 16.6.9 12 12 0 0 0 12 0 12 12 0 0 0 .2 11.9a11.8 11.8 0 0 0 1.6 6L0 24l6.3-1.7a12 12 0 0 0 5.7 1.5 12 12 0 0 0 12-11.9 11.8 11.8 0 0 0-.9-4.6 11.8 11.8 0 0 0-2.6-3.8zm-8.4 18.3A10 10 0 0 1 7 20.4l-.4-.2-3.7 1 1-3.7-.3-.3a9.8 9.8 0 0 1-1.5-5.3A10 10 0 0 1 16 2.8a10 10 0 0 1 3 2.1 9.8 9.8 0 0 1 2.9 7 10 10 0 0 1-10 9.9zm5.4-7.4-2-1c-.3 0-.5-.1-.7.2l-1 1.1c-.1.2-.3.2-.6.1-.3-.2-1.3-.5-2.4-1.5a8.9 8.9 0 0 1-1.7-2c-.1-.3 0-.5.2-.6l.4-.6c.2-.1.2-.3.3-.5v-.5L9 7c-.2-.6-.4-.5-.6-.5a12 12 0 0 0-.6 0 1.1 1.1 0 0 0-.8.4c-.3.3-1 1-1 2.4 0 1.5 1 3 1.2 3.1.1.2 2.1 3.2 5.1 4.5.6.2 1.1.5 1.7.6a4 4 0 0 0 1.9.1c.6 0 1.7-.7 2-1.4l.2-1.4-.6-.3z" fillRule="evenodd"/></symbol>
-        <symbol id="icon-program-badge-authenticity-guaranteed-48" viewBox="0 0 48 48"><path d="M45.552 17.36A10.247 10.247 0 0148 24.055c-.01 2.52-.93 4.823-2.444 6.608-.884 1.044-1.502 2.318-1.586 3.683a10.18 10.18 0 01-2.982 6.626 10.242 10.242 0 01-6.614 2.968c-1.372.088-2.656.7-3.702 1.59A10.31 10.31 0 0123.96 48c-2.564 0-4.906-.93-6.712-2.47-1.046-.89-2.33-1.502-3.702-1.59a10.242 10.242 0 01-6.614-2.968 10.194 10.194 0 01-2.994-6.75c-.07-1.373-.688-2.657-1.568-3.715A10.241 10.241 0 010 23.904c.01-2.487.904-4.761 2.382-6.535.87-1.046 1.486-2.314 1.564-3.67A10.181 10.181 0 016.932 7.03a10.242 10.242 0 016.614-2.968c1.372-.088 2.656-.702 3.702-1.592A10.32 10.32 0 0123.96 0c2.564 0 4.906.932 6.712 2.47 1.046.89 2.33 1.504 3.704 1.592a10.241 10.241 0 016.612 2.968 10.178 10.178 0 012.984 6.645c.082 1.364.694 2.642 1.58 3.684zm-9.088-3.147v-.002h-.002a1.6 1.6 0 00-2.262.012v.002L19.594 28.971l-4.528-4.487-.02-.02a1.6 1.6 0 00-2.262.01l-.002.001a1.6 1.6 0 00.012 2.262l.003.003 5.681 5.63h.002c.63.62 1.642.615 2.264-.013l-.008-.008 1.124-1.134.006.006 14.606-14.746h.002a1.6 1.6 0 00-.01-2.262z"/></symbol>
-    </svg>)
-
-export default EbaySvg
+export const symbols = [
+    <symbol id="icon-add-20" viewBox="0 0 20 20"><path className="some-class-name" d="M19 9h-8V1a1 1 0 00-2 0v8H1a1 1 0 000 2h8v8a1 1 0 002 0v-8h8a1 1 0 000-2z" style={{transform: 'rotateX(10deg)', backgroundColor: 'white'}}/></symbol>,
+    <symbol id="icon-social-messenger-24" viewBox="0 0 24 24"><g clipPath="url(#clip0_41192_49714)"><path d="M12 0C5.24 0 0 4.952 0 11.64c0 3.499 1.434 6.521 3.769 8.61a.957.957 0 01.322.684l.066 2.136a.96.96 0 001.346.849l2.383-1.05a.958.958 0 01.64-.047c1.132.308 2.3.462 3.474.458 6.76 0 12-4.95 12-11.64S18.76 0 12 0zm7.206 8.956l-3.525 5.594a1.799 1.799 0 01-2.603.48l-2.803-2.103a.72.72 0 00-.868.003l-3.786 2.872c-.505.384-1.165-.221-.827-.758l3.525-5.593a1.8 1.8 0 012.603-.48l2.803 2.103a.72.72 0 00.868-.002l3.786-2.874c.505-.384 1.165.221.827.758z"/></g><defs><clipPath id="clip0_41192_49714"><path d="M0 0h24v24H0z" fill="var(--color-social-icons-foreground, #fff)"/></clipPath></defs></symbol>,
+    <symbol id="icon-social-whatsapp-24" viewBox="0 0 24 24"><path clipRule="evenodd" d="M20.5 3.5A11.9 11.9 0 0 0 16.6.9 12 12 0 0 0 12 0 12 12 0 0 0 .2 11.9a11.8 11.8 0 0 0 1.6 6L0 24l6.3-1.7a12 12 0 0 0 5.7 1.5 12 12 0 0 0 12-11.9 11.8 11.8 0 0 0-.9-4.6 11.8 11.8 0 0 0-2.6-3.8zm-8.4 18.3A10 10 0 0 1 7 20.4l-.4-.2-3.7 1 1-3.7-.3-.3a9.8 9.8 0 0 1-1.5-5.3A10 10 0 0 1 16 2.8a10 10 0 0 1 3 2.1 9.8 9.8 0 0 1 2.9 7 10 10 0 0 1-10 9.9zm5.4-7.4-2-1c-.3 0-.5-.1-.7.2l-1 1.1c-.1.2-.3.2-.6.1-.3-.2-1.3-.5-2.4-1.5a8.9 8.9 0 0 1-1.7-2c-.1-.3 0-.5.2-.6l.4-.6c.2-.1.2-.3.3-.5v-.5L9 7c-.2-.6-.4-.5-.6-.5a12 12 0 0 0-.6 0 1.1 1.1 0 0 0-.8.4c-.3.3-1 1-1 2.4 0 1.5 1 3 1.2 3.1.1.2 2.1 3.2 5.1 4.5.6.2 1.1.5 1.7.6a4 4 0 0 0 1.9.1c.6 0 1.7-.7 2-1.4l.2-1.4-.6-.3z" fillRule="evenodd"/></symbol>,
+    <symbol id="icon-program-badge-authenticity-guaranteed-48" viewBox="0 0 48 48"><path d="M45.552 17.36A10.247 10.247 0 0148 24.055c-.01 2.52-.93 4.823-2.444 6.608-.884 1.044-1.502 2.318-1.586 3.683a10.18 10.18 0 01-2.982 6.626 10.242 10.242 0 01-6.614 2.968c-1.372.088-2.656.7-3.702 1.59A10.31 10.31 0 0123.96 48c-2.564 0-4.906-.93-6.712-2.47-1.046-.89-2.33-1.502-3.702-1.59a10.242 10.242 0 01-6.614-2.968 10.194 10.194 0 01-2.994-6.75c-.07-1.373-.688-2.657-1.568-3.715A10.241 10.241 0 010 23.904c.01-2.487.904-4.761 2.382-6.535.87-1.046 1.486-2.314 1.564-3.67A10.181 10.181 0 016.932 7.03a10.242 10.242 0 016.614-2.968c1.372-.088 2.656-.702 3.702-1.592A10.32 10.32 0 0123.96 0c2.564 0 4.906.932 6.712 2.47 1.046.89 2.33 1.504 3.704 1.592a10.241 10.241 0 016.612 2.968 10.178 10.178 0 012.984 6.645c.082 1.364.694 2.642 1.58 3.684zm-9.088-3.147v-.002h-.002a1.6 1.6 0 00-2.262.012v.002L19.594 28.971l-4.528-4.487-.02-.02a1.6 1.6 0 00-2.262.01l-.002.001a1.6 1.6 0 00.012 2.262l.003.003 5.681 5.63h.002c.63.62 1.642.615 2.264-.013l-.008-.008 1.124-1.134.006.006 14.606-14.746h.002a1.6 1.6 0 00-.01-2.262z"/></symbol>
+]
 "
 `;
diff --git a/scripts/update-icons-helpers.js b/scripts/update-icons-helpers.js
@@ -72,19 +72,12 @@ function generateEbaySVG(svgSymbols) {
         transformAttr: transformSVGtoReact
     }));
 
-    // Use position absolute and height/width 0px instead of display none
-    // so <defs> element for spectrum icons are shown
     return `/* eslint-disable */
 // @ts-nocheck
 ${fileHeader}\n
-import React, { FC } from 'react'
-
-const EbaySvg: FC = () => (
-    <svg style={{ position: 'absolute', height: '0px', width: '0px' }}>
-        ${symbolStrings.join('\n        ')}
-    </svg>)
-
-export default EbaySvg
+export const symbols = [
+    ${symbolStrings.join(',\n    ')}
+]
 `
 }
 

diff --git a/scripts/update-icons.js b/scripts/update-icons.js
@@ -8,11 +8,11 @@ const { saveIconType, saveIconConstants, saveSvgIcons, parseSVG, parseSVGSymbols
 const skinIconsFile = resolve(process.cwd(), 'node_modules/@ebay/skin/dist/svg/icons.svg')
 const typesFile = resolve(__dirname, `../src/ebay-icon/types.ts`)
 const constFile = resolve(__dirname, `../src/ebay-icon/__tests__/constants.ts`)
-const ebaySvgFile = resolve(__dirname, `../src/ebay-svg/svg.tsx`)
+const ebaySymbolsFile = resolve(__dirname, `../src/ebay-svg/symbols.tsx`)
 
 const skinSVG = parseSVG(skinIconsFile)
 
-saveSvgIcons(skinSVG, ebaySvgFile)
+saveSvgIcons(skinSVG, ebaySymbolsFile)
 
 const skinSVGSymbols = parseSVGSymbols(skinIconsFile)
 console.log(`Found ${skinSVGSymbols.length} icons in Skin.`)

diff --git a/src/ebay-icon/icon.tsx b/src/ebay-icon/icon.tsx
@@ -95,7 +95,7 @@ function getFilledIconName(iconName: string) {
     return `icon--${iconNameArray.slice(0, filledIndex + 1).join('-')}`
 }
 
-function kebabCased(str: string) {
+export function kebabCased(str: string): string {
     return str
         .replace(/([0-9]+)/g, (s, n) => `-${n}`)
         .replace(/([A-Z])/g, (s, c) => `-${c.toLowerCase()}`)

diff --git a/src/ebay-svg/README.md b/src/ebay-svg/README.md
@@ -7,7 +7,8 @@ yarn add @ebay/ui-core-react
 ```
 
 ## Usage
-Import it and place at the end of your HTML:
+Import it and place at the end of your HTML and make sure that this component is only rendered on the server and never import it on the client side.
+
 ```jsx harmony
 import { EbaySvg } from '@ebay/ui-core-react/ebay-svg';
 
@@ -17,3 +18,20 @@ import { EbaySvg } from '@ebay/ui-core-react/ebay-svg';
     <EbaySvg />
 </Html>
 ```
+
+### Use only necessary icons
+In order to reduce the size of the HTML and the processing time of React, make sure to use only the necessary icons to your application by using the
+`icons` attribute.
+
+```jsx harmony
+import { EbaySvg } from '@ebay/ui-core-react/ebay-svg';
+
+<EbaySvg icons={['attention16', 'information16']} />
+```
+
+
+## Attributes
+
+Name | Type | Stateful | Description
+--- | --- | --- | ---
+| `icons`       | Icon[]  | No       | Yes      | Use it to filter only the symbols that is needed in your application                  |
diff --git a/src/ebay-svg/__tests__/index.stories.tsx b/src/ebay-svg/__tests__/index.stories.tsx
@@ -0,0 +1,16 @@
+import React from 'react'
+import EbaySvg from '../svg'
+import { EbayIcon } from '../../ebay-icon'
+
+export default {
+    component: EbaySvg,
+    title: 'graphics & icons/ebay-svg',
+}
+
+export const FilteredIcons = () => (
+    <>
+        <EbaySvg icons={['notification16', 'attention16']} />
+        <EbayIcon name="notification16" />
+        <EbayIcon name="attention16" />
+    </>
+)