Question 280629 in Html Question posted in
Some basic documentation can be found here.

I can't SVG file open in react.js . Svg File Include CSS And Html file separate

i downloaded SVG Files from Stroyset, this website svg files like below link
Here is the SVG Link when you click Export button you get three option like this Image if i click download button i download svg format, this file can open in local browser i can’t in react app why?

when going like with image tag it showing error.
who can i open this file in react.js

Tags:

2

Answers


  1. 0

    import svg file as you would import a .jpg file and then use it directly as a img tag’s src for example:

    import IconSvg from './path-to-svg-file.svg';
...
<img src={IconSvg} alt='icon' />
    Login or Signup to reply.
  2. 0

    If you are using vite (which most of the people do), you need a plugin to import the .svg and use it as a React Component.

    just run

    npm install --save-dev vite-plugin-svgr

    If you are using TypeScript, there is also a declaration helper for better type inference:

    /// <reference types="vite-plugin-svgr/client" />

    // vite.config.js

    import svgr from "vite-plugin-svgr";

export default {
  // ...
  plugins: [...otherplugins, svgr({ include: '**/*.svg'})],
};

    Then your beautiful svg files can be imported as

    import Logo from "./logo.svg";

function SvgPreview(){
   return <Logo/>;
 }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search