-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
ADD: zoom option for multiple icon sizes
- Loading branch information
1 parent
a8b3faa
commit a6cfc48
Showing
5 changed files
with
153 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,40 +1,39 @@ | ||
| # Welcome to Remix! | ||
| # SVG View [<img alt="Logo for SVG View" src="https://view.svg.zone/favicon.svg" height="96" align="right"/>](https://view.svg.zone/view.html?url=https%3A%2F%2Fview.svg.zone%2Fimages%2Fbanner.svg&zoom=max) | ||
|
|
||
| - 📖 [Remix docs](https://remix.run/docs) | ||
| [](https://github.com/VectorLogoZone/svgview/actions/workflows/gcr-deploy.yaml) | ||
|
|
||
| ## Development | ||
| [demo](https://view.svg.zone/view.html?url=https%3A%2F%2Fgithub.com%2FVectorLogoZone%2Fsvgview%2Factions%2Fworkflows%2Fgcr-deploy.yaml%2Fbadge.svg&zoom=max&backUrl=https%3A%2F%2Fgithub.com%2FVectorLogoZone%2Fsvgview&backText=Return+to+Github) | ||
|
|
||
| Run the dev server: | ||
| ## Integration | ||
|
|
||
| ```shellscript | ||
| npm run dev | ||
| ``` | ||
| You can use this as a viewer from any website by passing the correct query string values. Be sure the [encode](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) them! | ||
|
|
||
| ## Deployment | ||
| * `backText` - tooltip text for the Exit button | ||
| * `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 | ||
| * `zoom` - zoom level: a number or "max" | ||
|
|
||
| First, build your app for production: | ||
| ## License | ||
|
|
||
| ```sh | ||
| npm run build | ||
| ``` | ||
| [MIT](LICENSE.txt) | ||
|
|
||
| Then run the app in production mode: | ||
| ## Credits | ||
|
|
||
| ```sh | ||
| npm start | ||
| ``` | ||
| [](https://v2.chakra-ui.com/ "UI Framework") | ||
| [](https://cloud.google.com/run/ "Hosting") | ||
| [](https://git-scm.com/ "Version control") | ||
| [](https://github.com/ "Code hosting") | ||
| [](https://golang.org/ "Programming language") | ||
| [](https://github.com/googlefonts/noto-emoji/blob/master/svg/emoji_u1f441.svg "Logo/Favicon") | ||
| [](https://nodeping.com?rid=201109281250J5K3P "Uptime monitoring") | ||
| [](https://www.npmjs.com/ "JS Package Management") | ||
| [](https://phosphoricons.com/ "Toolbar icons") | ||
| [](https://reactjs.org/ "UI Framework") | ||
| [](https://remix.run/ "React Framework") | ||
| [](https://www.toptal.com/designers/subtlepatterns/ "Background pattern") | ||
| [](https://www.typescriptlang.org/ "Programming Language") | ||
| [](https://www.vectorlogo.zone/ "Logos") | ||
| [](https://vitejs.dev/ "Bundler") | ||
|
|
||
| Now you'll need to pick a host to deploy it to. | ||
|
|
||
| ### DIY | ||
|
|
||
| If you're familiar with deploying Node applications, the built-in Remix app server is production-ready. | ||
|
|
||
| Make sure to deploy the output of `npm run build` | ||
|
|
||
| - `build/server` | ||
| - `build/client` | ||
|
|
||
| ## Styling | ||
|
|
||
| This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever css framework you prefer. See the [Vite docs on css](https://vitejs.dev/guide/features.html#css) for more information. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| # To Do | ||
|
|
||
| - [ ] show `error` search param | ||
| - [ ] keyboard support | ||
| - [ ] multi-image icon view | ||
|
|
||
| ## General | ||
|
|
||
| - [ ] clean mobile layout for non-view pages | ||
| - [ ] 404 handler | ||
| - [ ] /info.html - info about the current SVG | ||
| - url | ||
| - dimensions | ||
| - colors | ||
| - contains [ text | transforms | rasters | foreignObjects | namespaces | ... ] | ||
| - size (KB) | ||
| - metadata | ||
| - [ ] privacy policy, terms of service, etc | ||
| - [ ] convert to PNG | ||
| - [ ] convert to PDF | ||
| - [ ] support for multiple images with next/prev buttons, thumbnail view (see [qimgv](https://github.com/easymodo/qimgv)) | ||
| - [ ] upload page and post endpoint (loads SVG into temporary server url then redirects) | ||
| - [ ] shell script for post endpoint | ||
|
|
||
| ## Preview | ||
| - [ ] `icon` zoom mode (PiChartBarFill) that shows multiple fixes sizes (16, 32...) | ||
| - [ ] `%` zoom mode (no toolbar button: only for incoming links) | ||
| - [ ] support a second exit parameter (`src`?) that goes to the hosting webpage (PiCircuitryBold, PiCubeFocus, PiLinkBold, PiOrangeBold, PiSignPostBold) | ||
| - [ ] `info` parameter (and toolbar button) with markdown (instead of `src` param?) | ||
| - [ ] rotate | ||
| - [ ] flip | ||
| - [ ] background color picker | ||
| - [ ] image info (PiInfoBold, PiRuler) | ||
| - [ ] edit (but which editor? configurable?) (PiPencil) | ||
| - [ ] share (PiShareNetworkFill) | ||
| - [ ] download (PiDownloadBold, PiBoxArrowDownBold) | ||
| - [ ] source (PiCodeBold or PiFileCode) | ||
| - [ ] double-click: zoom in, shift: zoom out | ||
| - [ ] drag rectangle: zoom | ||
| - [ ] keyboard control (see [qimgv](https://github.com/easymodo/qimgv)) | ||
| - [ ] mouse control | ||
| - [ ] mobile pinch to zoom in/out [library](https://www.npmjs.com/package/react-map-interaction) | ||
| - [ ] copy to clipboard | ||
| - [ ] PiSignOutBold for exit icon? | ||
| - [ ] `diff` mode: select a second image and use the WebAwesome [ImageComparer](https://backers.webawesome.com/docs/components/image-comparer) widget | ||
|
|
||
|
|
||
| [Phosphor icons](https://react-icons.github.io/react-icons/icons/pi/) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| import { VStack, Stack, Text, useBreakpointValue, StackDirection } from "@chakra-ui/react"; | ||
|
|
||
|
|
||
| const sizes = [ 16, 24, 32, 48, 64, 96, 128 ] | ||
|
|
||
| interface ICardProps { | ||
| imageCss: Record<string, string>; | ||
| size: number; | ||
| url: string; | ||
| } | ||
|
|
||
| function IconCard({ imageCss, size, url }: ICardProps) { | ||
| const alignSelf = useBreakpointValue({ | ||
| base: 'center', | ||
| lg: 'end', | ||
| }, { | ||
| fallback: 'lg', | ||
| }) || 'start'; | ||
|
|
||
| return ( | ||
| <VStack alignSelf={alignSelf}> | ||
| <img alt={`${size} for ${url}`} src={url} style={{...imageCss, "width": `${size}pt`, "height": `${size}pt`}}/> | ||
| <Text>{`${size}`}</Text> | ||
| </VStack> | ||
| ) | ||
| } | ||
|
|
||
| interface IProps { | ||
| display: string, | ||
| imageCss: Record<string, string>; | ||
| url: string; | ||
| } | ||
|
|
||
|
|
||
| function IconList({ | ||
| display, | ||
| imageCss, | ||
| url, | ||
| }: IProps) { | ||
|
|
||
| const direction:StackDirection = useBreakpointValue({ | ||
| base: 'column', | ||
| lg: 'row', | ||
| }, { | ||
| fallback: 'lg', | ||
| }) || 'row'; | ||
|
|
||
| return( | ||
| <Stack direction={direction} justifyItems="center" spacing={10} style={{"display": display}}> | ||
| {sizes.map((size) => ( <IconCard imageCss={imageCss} key={size} size={size} url={url} /> ))} | ||
| </Stack> | ||
| ); | ||
| } | ||
|
|
||
| export { IconList }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters