I created an SVG using adobe illustrator But when trying to add to the project it just gives an error and the same goes with SVG I created with SVGator in short every single SVG gives me an error but using in bare HTML project its runs perfectly.
can anyone guide me on how to use SVG to react
errors I got
SVG with Adobe
<style>.cls-1{fill:url(#a);}</style>
after adding {} as it suggested gives me this
Private names are only allowed in property accesses (`obj.#a`) or in `in` expressions
<style>.cls-1{{fill:url(#a)}}</style>
Error when SVG is downloaded from the website
Compiled with problems:
ERROR
[eslint]
src\components\common\RegisterSvg.js
Line 8:32256: Parsing error: Unexpected token (8:32256)
For those who might get this error with their SVG try importing SVG and use it as an image if SVG is static
import FormSvg from "./svg/newtest.svg
<img src={FormSvg} alt="svg"/>
if SVG has animation attached to it then add the SVG JavaScript in the useEffect and then use it as a normal SVG
useEffect(() => {
// ... javascript goes here
// !function ... long code (<script>code from script</script>)
}, []);
return (
// SVG part goes here
<Svg/>
)