SVGR
Supported frameworks
As of v0.1.8
, this feature is only supported in React.
Contributions are welcome!
SVGR is a useful feature that allows you to import a .svg
file as a component directly into your React code.
By default, you can import ReactComponent
for any SVG file:
import { ReactComponent as Logo } from "./logo.svg";
function App() { return ( <div className="App"> <Logo className="App-logo" alt="logo" /> ... </div> );}
You can customise the exported component name. For example, if you'd like to use a default import, use the following configuration:
/viteshot.config.js
module.exports = { framework: { type: "react", svgr: { componentName: "default", }, }, // ...};
The above example then becomes:
import Logo from "./logo.svg";
function App() { return ( <div className="App"> <Logo className="App-logo" alt="logo" /> ... </div> );}