diff --git a/desktop/app/src/utils/__tests__/icons.node.tsx b/desktop/app/src/utils/__tests__/icons.node.tsx
index 0e86020b7..10c5ce27f 100644
--- a/desktop/app/src/utils/__tests__/icons.node.tsx
+++ b/desktop/app/src/utils/__tests__/icons.node.tsx
@@ -19,7 +19,6 @@ test('filled icons get correct local path', () => {
name: 'star',
variant: 'filled',
size: 12,
- density: 2,
});
expect(iconPath).toBe(path.join('icons', 'star-filled_d.png'));
});
@@ -29,7 +28,6 @@ test('outline icons get correct local path', () => {
name: 'star',
variant: 'outline',
size: 12,
- density: 2,
});
expect(iconPath).toBe(path.join('icons', 'star-outline_d.png'));
});
@@ -39,11 +37,10 @@ test('filled icons get correct URL', async () => {
name: 'star',
variant: 'filled',
size: 12,
- density: 2,
} as const;
const iconUrl = getPublicIconUrl(icon);
expect(iconUrl).toBe(
- 'https://facebook.com/images/assets_DO_NOT_HARDCODE/facebook_icons/star_filled_12.png', // TODO: support density?
+ 'https://facebook.com/images/assets_DO_NOT_HARDCODE/facebook_icons/star_filled_12.png',
);
const staticPath = getRenderHostInstance().serverConfig.paths.staticPath;
const localUrl = getLocalIconUrl(icon, iconUrl, staticPath, false);
diff --git a/desktop/app/src/utils/icons.tsx b/desktop/app/src/utils/icons.tsx
index 01fe1389f..6e83daa17 100644
--- a/desktop/app/src/utils/icons.tsx
+++ b/desktop/app/src/utils/icons.tsx
@@ -65,7 +65,7 @@ function tryRegisterIcon(icon: Icon, url: string, staticPath: string) {
if (res.status !== 200) {
throw new Error(
// eslint-disable-next-line prettier/prettier
- `Trying to use icon '${entryName}' with size ${size} and density ${icon.density}, however the icon doesn't seem to exists at ${url}: ${res.status}`,
+ `Trying to use icon '${entryName}' with size ${size}, however the icon doesn't seem to exists at ${url}: ${res.status}`,
);
}
if (!existing.includes(size)) {
diff --git a/desktop/flipper-frontend-core/src/RenderHost.tsx b/desktop/flipper-frontend-core/src/RenderHost.tsx
index 1662b40dd..3f99acc2c 100644
--- a/desktop/flipper-frontend-core/src/RenderHost.tsx
+++ b/desktop/flipper-frontend-core/src/RenderHost.tsx
@@ -20,7 +20,6 @@ type Icon = {
name: string;
variant: 'outline' | 'filled';
size: number;
- density: number;
};
interface NotificationAction {
diff --git a/desktop/flipper-ui-core/src/ui/components/Glyph.tsx b/desktop/flipper-ui-core/src/ui/components/Glyph.tsx
index 17eadd84f..5a32a3d84 100644
--- a/desktop/flipper-ui-core/src/ui/components/Glyph.tsx
+++ b/desktop/flipper-ui-core/src/ui/components/Glyph.tsx
@@ -94,7 +94,7 @@ function ColoredIcon(
}
ColoredIcon.displayName = 'Glyph:ColoredIcon';
-export default class Glyph extends React.PureComponent<{
+export default function Glyph(props: {
name: string;
size?: IconSize;
variant?: 'filled' | 'outline';
@@ -102,33 +102,22 @@ export default class Glyph extends React.PureComponent<{
color?: string;
style?: React.CSSProperties;
title?: string;
-}> {
- render() {
- const {
- name,
- size = 16,
- variant,
- color,
- className,
- style,
- title,
- } = this.props;
+}) {
+ const {name, size = 16, variant, color, className, style, title} = props;
- return (
-
- );
- }
+ return (
+
+ );
}
diff --git a/desktop/flipper-ui-core/src/utils/icons.tsx b/desktop/flipper-ui-core/src/utils/icons.tsx
index 8b387f9eb..f0b77ca4e 100644
--- a/desktop/flipper-ui-core/src/utils/icons.tsx
+++ b/desktop/flipper-ui-core/src/utils/icons.tsx
@@ -11,19 +11,16 @@ import {getRenderHostInstance} from 'flipper-frontend-core';
import {IconSize} from '../ui/components/Glyph';
const AVAILABLE_SIZES: IconSize[] = [8, 10, 12, 16, 18, 20, 24, 28, 32, 48];
-const DENSITIES = [1, 1.5, 2, 3, 4];
export type Icon = {
name: string;
variant: 'outline' | 'filled';
size: IconSize;
- density: number;
};
function normalizeIcon(icon: Icon): Icon {
- let {size, density} = icon;
- let requestedSize = size as number;
- if (!AVAILABLE_SIZES.includes(size as any)) {
+ let requestedSize = icon.size as number;
+ if (!AVAILABLE_SIZES.includes(icon.size as any)) {
// find the next largest size
const possibleSize = AVAILABLE_SIZES.find((size) => {
return size > requestedSize;
@@ -37,24 +34,9 @@ function normalizeIcon(icon: Icon): Icon {
}
}
- if (!DENSITIES.includes(density)) {
- // find the next largest size
- const possibleDensity = DENSITIES.find((scale) => {
- return scale > density;
- });
-
- // set to largest size if the real size is larger than what we have
- if (possibleDensity == null) {
- density = Math.max(...DENSITIES);
- } else {
- density = possibleDensity;
- }
- }
-
return {
...icon,
size: requestedSize as IconSize,
- density,
};
}