ADD: customizable icon sizes

README.md

@@ -12,7 +12,8 @@ You can use this as a viewer from any website by passing the correct query strin
 * `backUrl` - destination for the Exit button
 * `border` - border: one of "none", "dash", "thin" or "thick"
 * `bg` - background: a hex color (like "#abc123", but note that the "#" has to be escaped to "%23") or one of the [standard images](public/images/backgrounds/) (without the ".png" extension)
-* `url` - URL of the SVG file
+* `sizes` - comma-separated list of sizes for the icon view
+* `url` - (*required*) URL of the SVG file
 * `zoom` - zoom level: a number or "max"
 
 ## License

app/routes/view[.]html/IconList.tsx

@@ -1,7 +1,8 @@
 import { VStack, Stack, Text, useBreakpointValue, StackDirection } from "@chakra-ui/react";
+import { useSearchParams } from "@remix-run/react";
 
 
-const sizes = [ 16, 24, 32, 48, 64, 96, 128 ]
+const defaultSizes = "16,24,32,48,64,96,128";
 
 interface ICardProps {
     imageCss: Record<string, string>;
@@ -37,13 +38,26 @@ type VHSettings = {
     styles: object;
 }
 
+function getSizes(urlSizes: string): number[] {
+
+    if (!/[0-9]+(,[0-9]+)*/.test(urlSizes)) {
+        urlSizes = defaultSizes;
+    }
+    const strSizes = urlSizes.split(',');
+    return strSizes.map((size) => parseInt(size));
+}
+
 
 function IconList({
     display,
     imageCss,
     url,
 }: IProps) {
 
+    const [searchParams] = useSearchParams();
+
+    const sizes = getSizes(searchParams.get('sizes') || defaultSizes);
+
     const vhsettings:VHSettings = useBreakpointValue({
         base: { direction: 'column', spacing: 4, styles: { "position": "absolute", "top": "4px"}},
         lg: { direction: 'row', spacing: 12, styles: {}},