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>
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>
</>
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
I'm importing an SVG component to my homepage but it changes the colors.
Any suggestions why?
I exported the SVG from Figma and then I converted it to a react component. It seems that the structure is fine but react changing the linear gradient colors
Here is how it should look
Optimal result
And here is the result
The result
Here is the SVG component code:
import React from 'react'
function Bg() {
return (
<svg
xmlns='http://www.w3.org/2000/svg'
width='315'
height='315'
fill='none'
viewBox='0 0 315 315'
>
<g filter='url(#filter0_d)'>
<rect
width='215'
height='215'
x='50'
y='30'
fill='url(#paint0_linear)'
rx='20'
></rect>
</g>
<mask
id='a'
width='215'
height='215'
x='50'
y='30'
maskUnits='userSpaceOnUse'
>
<rect width='215' height='215' x='50' y='30' fill='#fff' rx='20'></rect>
</mask>
<g mask='url(#a)'>
<path
fill='url(#paint1_linear)'
fillRule='evenodd'
d='M-260.867 73.26s141.688-69.107 366.272-46.072C329.988 50.225 376.783-94 376.783-94h67.891v205.654l-19.616 79.854s-174.342 90.387-297.706 74.404C3.987 249.929-116.682 229.21-280.674 313.855-444.666 398.499-260.867 73.26-260.867 73.26z'
clipRule='evenodd'
></path>
<mask
id='b'
width='794'
height='422'
x='-349'
y='-94'
maskUnits='userSpaceOnUse'
>
<path
fill='#fff'
fillRule='evenodd'
d='M-260.867 73.26s141.688-69.107 366.272-46.072C329.988 50.225 376.783-94 376.783-94h67.891v205.654l-19.616 79.854s-174.342 90.387-297.706 74.404C3.987 249.929-116.682 229.21-280.674 313.855-444.666 398.499-260.867 73.26-260.867 73.26z'
clipRule='evenodd'
></path>
</mask>
<g fillRule='evenodd' clipRule='evenodd' mask='url(#b)'>
<path
fill='url(#paint2_linear)'
d='M206.244 49.455s-88.496 20.87-66.688 62.769c21.807 41.898-96.135 67.071-96.135 67.071s-191.295 48.959 152.243 77.397C539.202 285.13 266.668 32 266.668 32l-60.424 17.455z'
></path>
<path
fill='url(#paint3_linear)'
d='M368.503 43.065s-88.497 20.87-66.689 62.769c21.808 41.899-96.135 67.072-96.135 67.072s-191.295 48.959 152.243 77.396C701.46 278.74 428.926 25.61 428.926 25.61l-60.423 17.455z'
></path>
<path
fill='url(#paint4_linear)'
d='M77.956 20.083s39.354 109.215 91.587 78.156c52.233-31.06 125.784 0 125.784 0s117.847 57.011-20.222-131.536c-138.07-188.547-197.15 53.38-197.15 53.38z'
></path>
<path
fill='#fff'
d='M-300.764 280.795s179.01-71.089 334.723 0C189.672 351.884 393.13 178.221 393.13 178.221S579.363 1.496 736.857 200.609C894.352 399.722 55.329 443.997 55.329 443.997l-390.215-67.972 34.122-95.23z'
opacity='0.45'
></path>
<path
fill='#fff'
d='M-278.479 225.622s181.385-64.804 334.52 11.671c153.135 76.474 362.535-89.989 362.535-89.989s192.293-170.125 342.736 34.358C911.755 386.145 71.696 401.14 71.696 401.14l-387.603-81.536 37.428-93.982z'
opacity='0.2'
></path>
</g>
<path
fill='url(#paint5_linear)'
fillRule='evenodd'
d='M97 228c11.046 0 20-4.477 20-10s-8.954-10-20-10-20 4.477-20 10 8.954 10 20 10z'
clipRule='evenodd'
></path>
<path
fill='url(#paint6_linear)'
fillRule='evenodd'
d='M99.137 149.056c5.942-3.428 8.257-10.538 5.169-15.881s-10.409-6.896-16.352-3.469c-5.942 3.428-8.257 10.538-5.169 15.882 3.088 5.343 10.409 6.896 16.352 3.468z'
clipRule='evenodd'
></path>
<path
fill='url(#paint7_linear)'
fillRule='evenodd'
d='M232.229 136.879c-2.082-2.662-5.714-3.302-8.113-1.43-2.398 1.872-2.655 5.547-.573 8.21 2.082 2.662 5.714 3.303 8.113 1.431 2.398-1.872 2.655-5.548.573-8.211z'
clipRule='evenodd'
></path>
</g>
<defs>
<filter
id='filter0_d'
width='315'
height='315'
x='0'
y='0'
colorInterpolationFilters='sRGB'
filterUnits='userSpaceOnUse'
>
<feFlood floodOpacity='0' result='BackgroundImageFix'></feFlood>
<feColorMatrix
in='SourceAlpha'
values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'
></feColorMatrix>
<feOffset dy='20'></feOffset>
<feGaussianBlur stdDeviation='25'></feGaussianBlur>
<feColorMatrix values='0 0 0 0 1 0 0 0 0 0.431373 0 0 0 0 0.815686 0 0 0 0.4 0'></feColorMatrix>
<feBlend
in2='BackgroundImageFix'
result='effect1_dropShadow'
></feBlend>
<feBlend
in='SourceGraphic'
in2='effect1_dropShadow'
result='shape'
></feBlend>
</filter>
<linearGradient
id='paint0_linear'
x1='52.551'
x2='116.063'
y1='105.43'
y2='220.489'
gradientUnits='userSpaceOnUse'
>
<stop stopColor='#AEFF98'></stop>
<stop offset='1' stopColor='#FFBC4C'></stop>
</linearGradient>
<linearGradient
id='paint1_linear'
x1='-388.819'
x2='-336.97'
y1='49.634'
y2='410.633'
gradientUnits='userSpaceOnUse'
>
<stop stopColor='#FFDFA9'></stop>
<stop offset='1' stopColor='#FF54EC'></stop>
</linearGradient>
<linearGradient
id='paint2_linear'
x1='105.815'
x2='61.156'
y1='66.613'
y2='213.114'
gradientUnits='userSpaceOnUse'
>
<stop stopColor='#FF4DB3'></stop>
<stop offset='1' stopColor='#FF78D9'></stop>
</linearGradient>
<linearGradient
id='paint3_linear'
x1='142.941'
x2='146.348'
y1='47.303'
y2='256.385'
gradientUnits='userSpaceOnUse'
>
<stop stopColor='#FF91CE'></stop>
<stop offset='1' stopColor='#9650FF'></stop>
</linearGradient>
<linearGradient
id='paint4_linear'
x1='90.806'
x2='118.772'
y1='-12.145'
y2='130.147'
gradientUnits='userSpaceOnUse'
>
<stop stopColor='#73E9FF'></stop>
<stop offset='1' stopColor='#5888FF'></stop>
</linearGradient>
<linearGradient
id='paint5_linear'
x1='101.92'
x2='86.91'
y1='214.248'
y2='214.248'
gradientUnits='userSpaceOnUse'
>
<stop stopColor='#B261F2'></stop>
<stop offset='1' stopColor='#FF77D9'></stop>
</linearGradient>
<linearGradient
id='paint6_linear'
x1='94.095'
x2='86.022'
y1='134.222'
y2='138.883'
gradientUnits='userSpaceOnUse'
>
<stop stopColor='#FCBB5F'></stop>
<stop offset='1' stopColor='#FF9EC9'></stop>
</linearGradient>
<linearGradient
id='paint7_linear'
x1='225.33'
x2='228.158'
y1='140.355'
y2='143.975'
gradientUnits='userSpaceOnUse'
>
<stop stopColor='#FCA45F'></stop>
<stop offset='1' stopColor='#C76EE8'></stop>
</linearGradient>
</defs>
</svg>
)
}
export default Bg
And here is the page where I'm importing the file to
import React from 'react'
import Bg from './../svg/Bg'
const About = () => {
return (
<div className='container video'>
<div className='inner-container'>
<div className='video__grid'>
<div className='video__col video__col--text'>
<h2 className='video__title'>Workflow that just works</h2>
<p className='video__text'>
Collaboration should be simple, straightforward, and effective.
With Pitch, it is. Discuss current activities, manage tasks, and
stay productive as a team. Create on any device, online or
offline, and get great work done faster.
</p>
</div>
<div className='video__col'>
<Bg/>
</div>
</div>
</div>
</div>
)
}
export default About
Thanks!!!!
Maybe is a class name problem... Usually when exporting svg from another software it is exported with a default name for each vector element.
Maybe you are looking for this answer:
https://stackoverflow.com/a/67039230/15142235
I have the following Codepen, where I'm trying to animate a stroke of a circle around an image.
So far, I've got a circle SVG which is clipping an image, but it doesn't show the stroke inside of clipPath.
How do I get the border to show?
class App extends React.Component {
render() {
return (
<svg width='48' height='48'>
<defs>
<clipPath id='circleView'>
<circle cx='24' cy='24' r='23' fill='none' stroke='red' strokeWidth='2' />
</clipPath>
</defs>
<image width='48' height='48' xlinkHref={'https://source.unsplash.com/random'} clipPath='url(#circleView)' />
</svg>
)
}
}
As Robert said, the child SVG figures in the clip-path line are not displayed.
Therefore, for the animation you need to add another circle outside the clip-path
<circle cx="25" cy="24" r="14" fill="none" stroke="red" strokeWidth="2" />
.container {
width:25%;
height:25%;
}
<div class="container">
<svg viewBox="0 0 48 48" >
<defs>
<clipPath id='circleView'>
<circle cx='24' cy='22' r='16' fill='none' stroke='red' stroke-width='2' />
</clipPath>
</defs>
<image width="100%" height="100%" xlink:href='https://i.stack.imgur.com/O9eO8.jpg'
clip-path='url(#circleView)' />
<circle cx='24' cy='22' r='16' fill='none' stroke='red' strokeWidth='2' />
</svg>
</div>
To animate a circle, use the change in the stroke-dashoffset attribute from maximum to zero. values="(100.48;0)"
Animation starts after click
.container {
width:25%;
height:25%;
}
<div class="container">
<svg id="svg1" viewBox="0 0 48 48">
<defs>
<clipPath id='circleView'>
<circle cx='24' cy='22' r='16' fill='none' stroke='red' stroke-width='2' />
</clipPath>
</defs>
<image width="100%" height="100%" xlink:href='https://i.stack.imgur.com/O9eO8.jpg' clip-path='url(#circleView)' />
<circle transform="rotate(-90 24 22)" cx="24" cy="22" r="16" fill='none' stroke='red' strokeWidth='2'
stroke-dasharray="100.48" stroke-dashoffset="100.48" >
<animate
attributeName="stroke-dashoffset"
dur="1s"
begin="svg1.click"
values="100.48;0"
fill="freeze"/>
</circle>
</svg>
</div>
Variant of animation with CSS
I added transparency animation to the circle animation.
The animation begins when you hover the mouse cursor.
.container {
width:25%;
height:25%;
}
#crc1 {
fill:skyblue;
stroke-width:1;
stroke:red;
stroke-dasharray:100.48;
stroke-dashoffset:100.48;
fill-opacity:0.9;
}
#crc1:hover {
animation: dash 1.5s ease-out forwards;
}
#keyframes dash {
0% { stroke-dashoffset: 100.48; fill-opacity:0.9; }
50% { fill-opacity:0.45;}
100% { stroke-dashoffset: 0; fill-opacity:0; }
}
#img1 {
clip-path: url(#circleView);
}
<div class="container">
<svg id="svg1" viewBox="0 0 48 48">
<defs>
<clipPath id='circleView'>
<circle cx='24' cy='22' r='16'/>
</clipPath>
</defs>
<image width="100%" height="100%" xlink:href='https://i.stack.imgur.com/O9eO8.jpg'
clip-path='url(#circleView)' />
<circle id="crc1" cx="24" cy="22" r="16" />
</svg>
</div>
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>