diff --git a/README.md b/README.md index b458951..277c421 100644 --- a/README.md +++ b/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 diff --git a/app/routes/view[.]html/IconList.tsx b/app/routes/view[.]html/IconList.tsx index 290e663..c982a30 100644 --- a/app/routes/view[.]html/IconList.tsx +++ b/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; @@ -37,6 +38,15 @@ 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, @@ -44,6 +54,10 @@ function IconList({ 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: {}},