I am facing challenges rendering SVGs that I have exported from Figma. When I try to incorporate them into my React components, they appear distorted, and the colors are not rendering as they do in Figma.
What I have tried: Exported SVGs from Figma: I meticulously exported the designs as SVGs from Figma, ensuring to select the correct options.
Imported SVGs in React: With my limited knowledge of React, I have attempted to import the SVGs and render them using both the tag and as a background in a div.
Attempted to Adjust Styles: I have tried to adjust the styles and attributes of the SVGs, but the distortions and color mismatches persist.
Expected Outcome: I expected the SVGs to render accurately, reflecting the designs and colors as they are in Figma.
Actual Outcome: The SVGs are distorted, and the colors are not accurate, which is quite frustrating as it affects the overall aesthetics of the application.
Question: How to properly render SVGs exported from Figma in my React components, maintaining the correct proportions and colors?
1
There are many ways to load svg in React as component. I provide you several methods with sample code.
- Use an SVG as a component.
import { ReactComponent as Logo} from './logo.svg';
import './App.css';
const App = () => {
return (
<div className="App">
<Logo />
</div>
);
}
export default App;
- Note: In this case, you need to have svg file as asset in root/src directory in your react project.
- Use svgr package. To use the svgr you need to install the package and update webpack configuration.
npm install @svgr/webpack- Update webpack configuration
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
module: {
rules: [
{
test: /.svg$/,
use: ['@svgr/webpack'],
},
],
},
};
- After that, import svg file as a component
import React from 'react';
import ReactLogo from './logo.svg';
const App = () => {
return (
<div className="App">
<ReactLogo />
</div>
);
}
export default App;
- Use react-svg package
npm install react-svg- Load svg with ReactSvg
import React from 'react';
import { ReactSVG } from "react-svg";
const App = () => {
return (
<div className="App">
<ReactSVG src="./logo.svg" />
</div>
);
}
export default App;