Skip to content

Instantly share code, notes, and snippets.

@thekingofbandit
Created August 24, 2021 00:34
Show Gist options
  • Save thekingofbandit/fc04e135366adcbd1f9b6b2195c96e90 to your computer and use it in GitHub Desktop.
Save thekingofbandit/fc04e135366adcbd1f9b6b2195c96e90 to your computer and use it in GitHub Desktop.
inline svg jsx
import React from "react";
import { ReactSVGPanZoom } from "react-svg-pan-zoom";
import { makeStyles } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import Diagram from "../components/Diagram";
const svgPanZoom = require("svg-pan-zoom");
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1
},
paper: {
height: 140,
width: 100
},
control: {
padding: theme.spacing(2)
}
}));
export default function InlineSvg() {
const [spacing, setSpacing] = React.useState(2);
const classes = useStyles();
const activateZoom = () => {
svgPanZoom("#svg2008", {
viewportSelector: ".svg-pan-zoom_viewport"
});
};
return (
<Grid container className={classes.root} spacing={2}>
<Grid item xs={12}>
<button onClick={activateZoom}>onClick</button>
</Grid>
<Grid item xs={8}>
<Grid container justify="center" spacing={spacing}>
<Diagram
url={`https://res.cloudinary.com/tkob/image/upload/v1612628097/UNIT.svg`}
// uniqueHash={i.title}
uniquifyIDs={"demo-tiger"}
// data={diagrams.data}
alt="img-icon"
className={"w-full"}
action={() => console.log("data")}
onError={(error) => console.log(error)}
onLoad={(src, hasCache) => console.log(src, hasCache)}
/>
</Grid>
</Grid>
</Grid>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment