I have the below svg component. I want to stack multiple same svg components horizontally and vertically, to generate a bigger svg image in a grid.
I can stack them together but how do I convert it to an svg?
Please suggest, and if there is any package I can use. Thanks.
SVG Component
import React from "react";
import "./styles.css";
export default function MySVG() {
return (
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 40 40">
<defs/>
<g/>
<g transform="scale(1,1)">
<g transform="scale(1,1)">
<rect id="cell" fill="rgb(16,28,138)" stroke="none" x="0" y="0" width="40" height="40" fill-opacity="0.40784313725490196"/>
</g>
<path fill="none" stroke="rgb(163,127,18)" paint-order="fill stroke markers" d=" M 0 0 L 0 40" stroke-opacity="0.7294117647058823" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
<path fill="none" stroke="rgb(163,127,18)" paint-order="fill stroke markers" d=" M 40 0 L 40 40" stroke-opacity="0.7294117647058823" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
<path fill="none" stroke="rgb(163,127,18)" paint-order="fill stroke markers" d=" M 0 0 L 40 0" stroke-opacity="0.7294117647058823" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
<path fill="none" stroke="rgb(163,127,18)" paint-order="fill stroke markers" d=" M 0 40 L 40 40" stroke-opacity="0.7294117647058823" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
</g>
</svg>
);
}
App Component
import React from "react";
import MySVG from "./MySVG";
import "./styles.css";
export default function App() {
return [...Array(5).keys()].map((i) => <MySVG key={i} />);
}
CodeSandBox Link
Related
I'm trying to add a SVG file but I'm getting an error tat says:
Compiled with problems:X
ERROR
[eslint]
src/svg/banner.jsx
Line 15:2: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (15:2)
this is the svg:
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle
cx="50"
cy="50"
r="40"
stroke="blue"
fill="lightblue"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1921.641"
height="170.5"
viewBox="0 0 1921.641 170.5"
>
<defs>
<linearGradient
id="linear-gradient"
x1="-0.038"
y1="-1.902"
x2="1.1"
y2="2.41"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#4040be" />
<stop offset="0.36" stop-color="#4e67eb" />
<stop offset="1" stop-color="#31c3ac" />
</linearGradient>
</defs>
<path
id="Path_30"
data-name="Path 30"
d="M0,0H1921.641V170.5H0Z"
opacity="0.8"
fill="url(#linear-gradient)"
/>
</svg>
I'm trying to import it like this:
import { ReactComponent as Logo } from "../svg/banner.svg";
I've also tried to import it like this:
import banner from "../svg/banner.svg";
but it isn't working... any ideas?
using react and chakra UI
create js file export individual SVG data import file inside {} brace and inside importing an SVG file return SVG looks like
//This is my allsvg.js file
export const calender = <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z" />
</svg>
//This is where i will import svg file
import { calender } = require("./Media/AllSvg");
return (<div>{calender}</div>)
If you want set the SVG as a react component, you should return one element. ( You can use react Fragment for that <> /* ...HTML code */ </>)
export default function Svg() {
return (
<>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle
cx="50"
cy="50"
r="40"
stroke="blue"
fill="lightblue"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1921.641"
height="170.5"
viewBox="0 0 1921.641 170.5"
>
<defs>
<linearGradient
id="linear-gradient"
x1="-0.038"
y1="-1.902"
x2="1.1"
y2="2.41"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#4040be" />
<stop offset="0.36" stop-color="#4e67eb" />
<stop offset="1" stop-color="#31c3ac" />
</linearGradient>
</defs>
<path
id="Path_30"
data-name="Path 30"
d="M0,0H1921.641V170.5H0Z"
opacity="0.8"
fill="url(#linear-gradient)"
/>
</svg>
</>
)
}
JSX elements must be wrapped in an enclosing tag But Your component it's not wrapped . You can use Fragments to group all your svg tags without adding nodes to the DOM try it like this :
<> // shorter syntax you can use for declaring fragments
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle
cx="50"
cy="50"
r="40"
stroke="blue"
fill="lightblue"
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1921.641"
height="170.5"
viewBox="0 0 1921.641 170.5"
>
<defs>
<linearGradient
id="linear-gradient"
x1="-0.038"
y1="-1.902"
x2="1.1"
y2="2.41"
gradientUnits="objectBoundingBox"
>
<stop offset="0" stop-color="#4040be" />
<stop offset="0.36" stop-color="#4e67eb" />
<stop offset="1" stop-color="#31c3ac" />
</linearGradient>
</defs>
<path
id="Path_30"
data-name="Path 30"
d="M0,0H1921.641V170.5H0Z"
opacity="0.8"
fill="url(#linear-gradient)"
/>
</svg>
</>
Some svg icons in my project are displayed and some dont. Heres an example of one that has issue
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" id="windows">
<defs>
<linearGradient id="windows_svg__b" x1="0%" x2="100%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#FFF" stop-opacity="0.1"></stop>
<stop offset="100%" stop-color="#0087C7"></stop>
</linearGradient>
<path id="windows_svg__a"
d="M6.5 14.62l-5.656-.892A1 1 0 010 12.74V8.288h6.5v6.333zm1 .159V8.288H16v6.662a1 1 0 01-1.156.988L7.5 14.778zm-1-13.367v5.876H0V3.241a1 1 0 01.853-.989l5.647-.84zm1-.148L14.853.17A1 1 0 0116 1.16v6.128H7.5V1.264z">
</path>
</defs>
<g fill="none" fill-rule="evenodd">
<use fill="#0087C7" xlink:href="#windows_svg__a"></use>
<use fill="url(#windows_svg__b)" fill-opacity="0.8" xlink:href="#windows_svg__a"></use>
</g>
</svg>
https://codesandbox.io/s/practical-satoshi-o68rnt
I guess that`s something with tags but not sure and have no idea how to fix it
There are 2 issues with your code first issue is with your SVG have some issues please use the below one.
`<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" id="windows">
<defs>
<linearGradient id="windows_svg__b" x1="0%" x2="100%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#FFF" stop-opacity="0.1"></stop>
<stop offset="100%" stop-color="#0087C7"></stop>
</linearGradient>
<path id="windows_svg__a"
d="M6.5 14.62l-5.656-.892A1 1 0 010 12.74V8.288h6.5v6.333zm1 .159V8.288H16v6.662a1 1 0 01-1.156.988L7.5 14.778zm-1-13.367v5.876H0V3.241a1 1 0 01.853-.989l5.647-.84zm1-.148L14.853.17A1 1 0 0116 1.16v6.128H7.5V1.264z">
</path>
</defs>
<g fill="none" fill-rule="evenodd">
<use fill="#0087C7" href="#windows_svg__a"></use>
<use fill="url(#windows_svg__b)" fill-opacity="0.8" href="#windows_svg__a"></use>
</g>
</svg>`
Second, you have to import that image first, and then you can use it in your code.
import "./styles.css";
import icon from"../public/icons/icon.svg";
export default function App() {
return (
<div className="App">
<img src={icon} alt="sorry" />
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
);
}
Try to use
import { ReactComponent as Icon } from "path/icon.svg";
And then you can use it as component in React
<div>
<Icon />
</div>
I wanna know, is there any way to prevent scaling my SVG when zooming page in a browser?
Let's just say my SVG image is a measuring image and I want to keep the same size of my SVG independently from zoom in or zoom out page.
I'm using React
Style
svg: {
height: 150,
width: 150,
},
Example Code
<svg className={classes.svg} viewBox="0 0 150 150">
<g>
<circle cx={70} cy={70} r={32} fill="white" stroke="black"/>
<circle cx={70} cy={70} r={8} fill="black"/>
</g>
</svg>
You might use a viewport related unit like vw, vh.
<svg viewBox="0 0 150 150" style="width:5vw">
<g>
<circle cx="70" cy="70" r="32" fill="white" stroke="black"/>
<circle cx="70" cy="70" r="8" fill="black"/>
</g>
</svg>
Your svg element will keep it's initial size of 5vw.
I have this SVG, imported from figma:
import React from 'react';
function CloseIcon() {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_5301_20199)">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M19.8539 4.85394C20.0491 4.65868 20.0491 4.3421 19.8539 4.14683C19.6586 3.95157 19.342 3.95157 19.1468 4.14683L12.0007 11.2929L4.85372 4.14634C4.65845 3.95108 4.34187 3.95109 4.14661 4.14636C3.95136 4.34162 3.95136 4.65821 4.14663 4.85346L11.2936 12L4.14688 19.1467C3.95162 19.342 3.95162 19.6586 4.14688 19.8538C4.34214 20.0491 4.65873 20.0491 4.85399 19.8538L12.0007 12.7071L19.1467 19.8529C19.342 20.0481 19.6586 20.0481 19.8539 19.8528C20.0491 19.6576 20.0491 19.341 19.8538 19.1457L12.7078 12L19.8539 4.85394Z"
fill="#00A989"
/>
</g>
<defs>
<clipPath id="clip0_5301_20199">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
);
}
export default CloseIcon;
The SVG is then imported in my component, rendered correctly on the screen as the original style coming from Figma. But when I do style it with styled components, any style is not applied. What is the problem?
import CloseIcon from '../../../Icons/CloseIcon';
import styled from 'styled-components';
<ClosingIcon
aria-label="Close Modal"
onClick={() => setShowModal((prev) => !prev)}
/>
const ClosingIcon = styled(CloseIcon)`
cursor: pointer;
position: absolute;
top: 14px;
right: 32px;
/* width: 32px;
height: 32px; */
padding: 0;
z-index: 10;
`;
you need to pass classname prop to the child component,
function CloseIcon({ className }) {
return (
<svg
className={className} --> like this
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_5301_20199)">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M19.8539 4.85394C20.0491 4.65868 20.0491 4.3421 19.8539 4.14683C19.6586 3.95157 19.342 3.95157 19.1468 4.14683L12.0007 11.2929L4.85372 4.14634C4.65845 3.95108 4.34187 3.95109 4.14661 4.14636C3.95136 4.34162 3.95136 4.65821 4.14663 4.85346L11.2936 12L4.14688 19.1467C3.95162 19.342 3.95162 19.6586 4.14688 19.8538C4.34214 20.0491 4.65873 20.0491 4.85399 19.8538L12.0007 12.7071L19.1467 19.8529C19.342 20.0481 19.6586 20.0481 19.8539 19.8528C20.0491 19.6576 20.0491 19.341 19.8538 19.1457L12.7078 12L19.8539 4.85394Z"
fill="#00A989"
/>
</g>
<defs>
<clipPath id="clip0_5301_20199">
<rect width="24" height="24" fill="white" />
</clipPath>
</defs>
</svg>
);
}
reference : https://styled-components.com/docs/advanced#existing-css
How I can select the SVG element's "g" attribute "id" : as mentioned below "SvgElement" in react
like :
<svg id="L_1" data-name="L 1" xmlns="http://www.w3.org/2000/svg" width="1920" height="720" viewBox="0 0 920 420">
<rect id="Background" width="1920" height="720" fill="none"/>
<g id="SvgElement">
<circle cx="200" cy="100" r="50"/>
</g>
</svg>