[Fleet] Only override settings for badges; not all package icons (#98143

)

## Summary

fixes #97865 [[Fleet] Bug: Netscout icon breaks the alignment of the integrations page](#97865) 

<table>
<thead><td>7.12</td><td>7.13-SNAPSHOT</td><td>PR</td>
<tr><td>
<img width="245" alt="Screen Shot 2021-04-23 at 9 48 04 AM" src="https://user-images.githubusercontent.com/57655/115881135-6fb1e800-a419-11eb-9791-58ccc5d2b58b.png">
</td>
<td><img width="300" alt="Screen Shot 2021-04-23 at 9 49 19 AM" src="https://user-images.githubusercontent.com/57655/115881137-6fb1e800-a419-11eb-8cc1-c90caf2e1f94.png">
</td>
<td>
<img width="251" alt="Screen Shot 2021-04-23 at 9 57 04 AM" src="https://user-images.githubusercontent.com/57655/115882009-53627b00-a41a-11eb-81d8-0f61cb0ae607.png">
</td>
</tr>
</table>

Reverts the overly broad changes icon changes from 77b3906 and applies them to the only place they were intended -- badges:

<img width="1123" alt="Screen Shot 2021-04-23 at 10 03 18 AM" src="https://user-images.githubusercontent.com/57655/115882898-38443b00-a41b-11eb-886c-f29e2eae2423.png">
<img width="391" alt="Screen Shot 2021-04-23 at 10 03 28 AM" src="https://user-images.githubusercontent.com/57655/115882899-38443b00-a41b-11eb-95d2-dcc18cafb3cc.png">

x-pack/plugins/fleet/public/applications/fleet/components/package_icon.tsx

@@ -14,18 +14,7 @@ import { usePackageIconType } from '../hooks';
 
 export const PackageIcon: React.FunctionComponent<
   UsePackageIconType & Omit<EuiIconProps, 'type'>
-> = ({ size = 's', packageName, version, icons, tryApi, ...euiIconProps }) => {
+> = ({ packageName, version, icons, tryApi, ...euiIconProps }) => {
   const iconType = usePackageIconType({ packageName, version, icons, tryApi });
-  return (
-    <EuiIcon
-      // when a custom SVG is used the logo is rendered with <img class="euiIcon euiIcon--small">
-      // this collides with some EuiText (+img) CSS from the EuiIcon component
-      // which  makes the button large, wide, and poorly layed out
-      // override those styles until the bug is fixed or we find a better approach
-      style={{ margin: 'unset', width: 'unset' }}
-      size={size}
-      type={iconType}
-      {...euiIconProps}
-    />
-  );
+  return <EuiIcon size="s" type={iconType} {...euiIconProps} />;
 };

x-pack/plugins/fleet/public/applications/fleet/sections/agents/components/agent_policy_package_badges.tsx

@@ -71,7 +71,18 @@ export const AgentPolicyPackageBadges: React.FunctionComponent<Props> = ({
           <EuiBadge key={idx} color="hollow">
             <EuiFlexGroup direction="row" gutterSize="xs" alignItems="center">
               <EuiFlexItem grow={false}>
-                <PackageIcon packageName={pkg.name} version={pkg.version} size="s" tryApi={true} />
+                <PackageIcon
+                  packageName={pkg.name}
+                  version={pkg.version}
+                  tryApi={true}
+                  style={
+                    // when a custom SVG is used the logo is rendered with <img class="euiIcon euiIcon--small">
+                    // this collides with some EuiText (+img) CSS from the EuiIcon component
+                    // which  makes the button large, wide, and poorly layed out
+                    // override those styles until the bug is fixed or we find a better approach
+                    { margin: 'unset', width: '16px' }
+                  }
+                />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>{pkg.title}</EuiFlexItem>
             </EuiFlexGroup>