Shopping: Improve product icon. (#11656)

* Improve product icon.

* Update packages/element-library/src/product/icon.js

Co-authored-by: Pascal Birchler <pascalb@google.com>

* Update packages/element-library/src/product/icon.js

Co-authored-by: Pascal Birchler <pascalb@google.com>

Co-authored-by: Pascal Birchler <pascalb@google.com>

packages/design-system/src/icons/index.js

@@ -122,6 +122,7 @@ export { default as QuestionMarkOutline } from './question_mark_outline.svg';
 export { default as Rotate } from './rotate.svg';
 export { default as Scissors } from './scissors.svg';
 export { default as Shapes } from './shapes.svg';
+export { default as Shopping } from './shopping.svg';
 export { default as Sparkles } from './sparkles.svg';
 export { default as StopFilled } from './stop_filled.svg';
 export { default as StopOutline } from './stop_outline.svg';

packages/element-library/src/gif/icon.js

@@ -21,7 +21,7 @@ import { StoryPropTypes } from '@googleforcreators/elements';
 /**
  * Internal dependencies
  */
-import VisibleImage from '../media/visibleImage';
+import VisibleImage from '../shared/visibleImage';
 
 function GifLayerIcon({
   element: {

packages/element-library/src/image/icon.js

@@ -24,7 +24,7 @@ import { StoryPropTypes } from '@googleforcreators/elements';
 /**
  * Internal dependencies
  */
-import VisibleImage from '../media/visibleImage';
+import VisibleImage from '../shared/visibleImage';
 
 function ImageLayerIcon({ element: { resource }, getProxiedUrl }) {
   const url = getSmallestUrlForWidth(0, resource);

packages/element-library/src/product/icon.js

@@ -17,68 +17,21 @@
 /**
  * External dependencies
  */
-import styled from 'styled-components';
-import { generatePatternStyles } from '@googleforcreators/patterns';
 import { StoryPropTypes } from '@googleforcreators/elements';
-import { getMaskByType, MaskTypes } from '@googleforcreators/masks';
+import { Icons } from '@googleforcreators/design-system';
 
-const Container = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  height: 21px;
-  width: 21px;
-  padding: 1px;
-  border-radius: ${({ theme }) => theme.borders.radius.small};
-  background-color: ${({ theme }) => theme.colors.opacity.black10};
-`;
-
-const ProductPreview = styled.div.attrs(({ backgroundColor }) => ({
-  // Prevents `ProductPreview` class from being generated with each new layer.
-  // https://styled-components.com/docs/faqs#when-to-use-attrs
-  style: generatePatternStyles(backgroundColor),
-}))`
-  width: 100%;
-  height: 100%;
-  margin: 1px;
-  clip-path: ${({ maskId }) => `url(#${maskId})`};
-`;
-
-/*
-clip-path isn't stable in Safari yet, so these
-Product Layer Icons are going to show up as various quadrilateral
-until that stabilizes for inline SVGs as clip paths.
-More info here:
-https://stackoverflow.com/questions/41860477/why-doesnt-css-clip-path-with-svg-work-in-safari
-https://caniuse.com/css-clip-path
-*/
-
-function ProductLayerIcon({ element: { id } }) {
-  const maskDef = getMaskByType(MaskTypes.CIRCLE);
-
-  const maskId = `mask-${maskDef.type}-${id}-layer-preview`;
-
-  return (
-    <Container>
-      <ProductPreview maskId={maskId}>
-        <svg width={0} height={0}>
-          <defs>
-            <clipPath
-              id={maskId}
-              // Bring the path scale down a bit from 1
-              // so that we can make sure the entire SVG path is visible when the mask ratio is > 1
-              // this is important for Firefox's interpretation of clip paths
-              transform="scale(1 0.9)"
-              clipPathUnits="objectBoundingBox"
-            >
-              <path d={maskDef.path} />
-            </clipPath>
-          </defs>
-        </svg>
-      </ProductPreview>
-    </Container>
-  );
+/**
+ * Internal dependencies
+ */
+import VisibleImage from '../shared/visibleImage';
+
+function ProductLayerIcon({ element: { product } }) {
+  const productImage = product?.productImages?.[0] || {};
+  const { url, alt } = productImage;
+  if (!url) {
+    return <Icons.Shopping width={21} height={21} aria-hidden />;
+  }
+  return <VisibleImage src={url} alt={alt} height={21} width={21} />;
 }
 
 ProductLayerIcon.propTypes = {

packages/element-library/src/video/icon.js

@@ -25,7 +25,7 @@ import { StoryPropTypes } from '@googleforcreators/elements';
  * Internal dependencies
  */
 import VideoImage from '../media/videoImage';
-import VisibleImage from '../media/visibleImage';
+import VisibleImage from '../shared/visibleImage';
 
 function VideoLayerIcon({
   element: {

packages/story-editor/src/components/library/panes/shopping/shoppingIcon.js

@@ -18,20 +18,10 @@
  * External dependencies
  */
 import { __ } from '@googleforcreators/i18n';
-import styled from 'styled-components';
-
-/**
- * Internal dependencies
- */
-import Icon from './icons/shopping.svg';
-
-const StyledIcon = styled(Icon)`
-  width: 32px !important;
-  height: 32px !important;
-`;
+import { Icons } from '@googleforcreators/design-system';
 
 function ShoppingIcon() {
-  return <StyledIcon title={__('Shopping library', 'web-stories')} />;
+  return <Icons.Shopping title={__('Shopping library', 'web-stories')} />;
 }
 
 export default ShoppingIcon;