Optimized FileImageIcon and adding padding to ImageUnavailableIcon to match FileImageIcon (#17631)

* updating Image icons

Author: notandrew

packages/fluentui/CHANGELOG.md

@@ -30,6 +30,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `PillIcon` base componet @assuncaocharles ([#17600](https://github.com/microsoft/fluentui/pull/17600))
 - Add `PillGroup` componet @assuncaocharles ([#17601](https://github.com/microsoft/fluentui/pull/17601))
 ## Fixes
+- Optimized `FileImageIcon` and adding padding to `ImageUnavailableIcon` to match FileImageIcon @notandrew ([#17631](https://github.com/microsoft/fluentui/pull/17631))
 - Add success to AlertDismissAction propTypes @jurokapsiar ([#17542](https://github.com/microsoft/fluentui/pull/17542))
 - Add `overflowSentinel` slot to fix `Toolbar` overflow when parent container does not have fixed width @ling1726 ([#17451](https://github.com/microsoft/fluentui/pull/17451))
 - For `Tree`, fix non-leaf `treeItem` so `onTitleClick` can be invoked from space/enter key @yuanboxue-amber ([#17619](https://github.com/microsoft/fluentui/pull/17619))

packages/fluentui/react-icons-northstar/src/components/FilesImageIcon.tsx

@@ -7,25 +7,10 @@ export const FilesImageIcon = createSvgIcon({
   svg: ({ classes }) => (
     <svg role="presentation" focusable="false" viewBox="0 0 20 20" className={classes.svg}>
       <g className={cx(iconClassNames.outline, classes.outlinePart)}>
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M14 7.5C14 8.32843 13.3284 9 12.5 9C11.6716 9 11 8.32843 11 7.5C11 6.67157 11.6716 6 12.5 6C13.3284 6 14 6.67157 14 7.5ZM13 7.5C13 7.77614 12.7761 8 12.5 8C12.2239 8 12 7.77614 12 7.5C12 7.22386 12.2239 7 12.5 7C12.7761 7 13 7.22386 13 7.5Z"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M3 6C3 4.34315 4.34315 3 6 3H14C15.6569 3 17 4.34315 17 6V14C17 15.6569 15.6569 17 14 17H6C4.34315 17 3 15.6569 3 14V6ZM6 4C4.89543 4 4 4.89543 4 6V14C4 14.3726 4.10191 14.7215 4.27937 15.0201L8.94868 10.432C9.53227 9.85859 10.4677 9.85859 11.0513 10.432L15.7206 15.0201C15.8981 14.7215 16 14.3726 16 14V6C16 4.89543 15.1046 4 14 4H6ZM6 16C5.63085 16 5.28505 15.9 4.98824 15.7256L9.64956 11.1453C9.84409 10.9542 10.1559 10.9542 10.3504 11.1453L15.0118 15.7256C14.7149 15.9 14.3692 16 14 16H6Z"
-        />
+        <path d="M14 7.5C14 8.32843 13.3284 9 12.5 9C11.6716 9 11 8.32843 11 7.5C11 6.67157 11.6716 6 12.5 6C13.3284 6 14 6.67157 14 7.5ZM13 7.5C13 7.22386 12.7761 7 12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8C12.7761 8 13 7.77614 13 7.5ZM3 6C3 4.34315 4.34315 3 6 3H14C15.6569 3 17 4.34315 17 6V14C17 15.6569 15.6569 17 14 17H6C4.34315 17 3 15.6569 3 14V6ZM6 4C4.89543 4 4 4.89543 4 6V14C4 14.3726 4.10191 14.7215 4.27937 15.0201L8.94868 10.432C9.53227 9.85859 10.4677 9.85859 11.0513 10.432L15.7206 15.0201C15.8981 14.7215 16 14.3726 16 14V6C16 4.89543 15.1046 4 14 4H6ZM6 16H14C14.3692 16 14.7149 15.9 15.0118 15.7256L10.3504 11.1453C10.1559 10.9542 9.84409 10.9542 9.64956 11.1453L4.98824 15.7256C5.28505 15.9 5.63085 16 6 16Z" />
       </g>
       <g className={cx(iconClassNames.filled, classes.filledPart)}>
-        <path d="M12.5 8C12.7761 8 13 7.77614 13 7.5C13 7.22386 12.7761 7 12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8Z" />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M3 6C3 4.34315 4.34315 3 6 3H14C15.6569 3 17 4.34315 17 6V14C17 14.6495 16.7936 15.2509 16.4428 15.7419L11.0524 10.4345C10.4686 9.85964 9.53144 9.85964 8.94759 10.4345L3.55724 15.7419C3.20642 15.2509 3 14.6495 3 14V6ZM12.5 9C13.3284 9 14 8.32843 14 7.5C14 6.67157 13.3284 6 12.5 6C11.6716 6 11 6.67157 11 7.5C11 8.32843 11.6716 9 12.5 9Z"
-        />
-        <path d="M4.26544 16.448C4.75517 16.7956 5.35372 17 6 17H14C14.6463 17 15.2448 16.7956 15.7346 16.448L10.3508 11.1471C10.1562 10.9555 9.84381 10.9555 9.6492 11.1471L4.26544 16.448Z" />
+        <path d="M12.5 8C12.7761 8 13 7.77614 13 7.5C13 7.22386 12.7761 7 12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8ZM3 6C3 4.34315 4.34315 3 6 3H14C15.6569 3 17 4.34315 17 6V14C17 14.6495 16.7936 15.2509 16.4428 15.7419L11.0524 10.4345C10.4686 9.85964 9.53144 9.85964 8.94759 10.4345L3.55724 15.7419C3.20642 15.2509 3 14.6495 3 14V6ZM12.5 9C13.3284 9 14 8.32843 14 7.5C14 6.67157 13.3284 6 12.5 6C11.6716 6 11 6.67157 11 7.5C11 8.32843 11.6716 9 12.5 9ZM4.26544 16.448C4.75517 16.7956 5.35372 17 6 17H14C14.6463 17 15.2448 16.7956 15.7346 16.448L10.3508 11.1471C10.1562 10.9555 9.84381 10.9555 9.6492 11.1471L4.26544 16.448Z" />
       </g>
     </svg>
   ),

packages/fluentui/react-icons-northstar/src/components/ImageUnavailableIcon.tsx

@@ -3,10 +3,8 @@ import { createSvgIcon } from '../utils/createSvgIcon';
 
 export const ImageUnavailableIcon = createSvgIcon({
   svg: ({ classes }) => (
-    <svg role="presentation" focusable="false" viewBox="2 2 16 16" className={classes.svg}>
-      <path d="M2.85355 2.14646C2.65829 1.9512 2.34171 1.9512 2.14645 2.14646C1.95118 2.34172 1.95118 2.65831 2.14645 2.85357L3.55462 4.26174C3.20539 4.75215 3 5.35209 3 6V14C3 15.6569 4.34315 17 6 17H14C14.6479 17 15.2479 16.7946 15.7383 16.4454L17.1464 17.8536C17.3417 18.0488 17.6583 18.0488 17.8536 17.8536C18.0488 17.6583 18.0488 17.3417 17.8536 17.1465L2.85355 2.14646ZM9.41374 10.1209C9.24519 10.1923 9.08705 10.2961 8.94868 10.432L4.27937 15.0201C4.10191 14.7215 4 14.3726 4 14V6C4 5.6291 4.10096 5.28178 4.2769 4.98403L9.41374 10.1209ZM6 16C5.63085 16 5.28505 15.9 4.98824 15.7256L9.64956 11.1453C9.84409 10.9542 10.1559 10.9542 10.3504 11.1453L15.0118 15.7256C14.7149 15.9 14.3692 16 14 16H6Z" />
-      <path d="M16 6V13.8787L16.8984 14.7771C16.9647 14.5292 17 14.2687 17 14V6C17 4.34315 15.6569 3 14 3H6C5.73127 3 5.47078 3.03534 5.22295 3.10161L6.12134 4H14C15.1046 4 16 4.89543 16 6Z" />
-      <path d="M14 7.5C14 6.67157 13.3284 6 12.5 6C11.6716 6 11 6.67157 11 7.5C11 8.32843 11.6716 9 12.5 9C13.3284 9 14 8.32843 14 7.5ZM13 7.5C13 7.77614 12.7761 8 12.5 8C12.2239 8 12 7.77614 12 7.5C12 7.22386 12.2239 7 12.5 7C12.7761 7 13 7.22386 13 7.5Z" />
+    <svg role="presentation" focusable="false" viewBox="0 0 20 20" className={classes.svg}>
+      <path d="M2.85355 2.14645C2.65829 1.95118 2.34171 1.95118 2.14645 2.14645C1.95118 2.34171 1.95118 2.65829 2.14645 2.85355L3.55462 4.26173C3.20539 4.75213 3 5.35207 3 5.99999V14C3 15.6568 4.34315 17 6 17H14C14.6479 17 15.2479 16.7946 15.7383 16.4454L17.1464 17.8536C17.3417 18.0488 17.6583 18.0488 17.8536 17.8536C18.0488 17.6583 18.0488 17.3417 17.8536 17.1464L2.85355 2.14645ZM9.41374 10.1208C9.24519 10.1923 9.08705 10.2961 8.94868 10.432L4.27937 15.0201C4.10191 14.7214 4 14.3726 4 14V5.99999C4 5.62909 4.10096 5.28177 4.2769 4.98401L9.41374 10.1208ZM6 16C5.63085 16 5.28505 15.9 4.98824 15.7256L9.64956 11.1453C9.84409 10.9542 10.1559 10.9542 10.3504 11.1453L15.0118 15.7256C14.7149 15.9 14.3692 16 14 16H6ZM16 5.99999V13.8786L16.8984 14.777C16.9647 14.5292 17 14.2687 17 14V5.99999C17 4.34313 15.6569 2.99999 14 2.99999H6C5.73127 2.99999 5.47078 3.03532 5.22295 3.1016L6.12134 3.99999H14C15.1046 3.99999 16 4.89542 16 5.99999ZM14 7.49999C14 6.67156 13.3284 5.99999 12.5 5.99999C11.6716 5.99999 11 6.67156 11 7.49999C11 8.32841 11.6716 8.99999 12.5 8.99999C13.3284 8.99999 14 8.32841 14 7.49999ZM13 7.49999C13 7.77613 12.7761 7.99999 12.5 7.99999C12.2239 7.99999 12 7.77613 12 7.49999C12 7.22384 12.2239 6.99999 12.5 6.99999C12.7761 6.99999 13 7.22384 13 7.49999Z" />
     </svg>
   ),
   displayName: 'ImageUnavailableIcon',