How to add a logo in React
Share
Logos are important in every website. They give your website an identity. We can add logos to our website using one of following methods:
The
importkeyword methodThe
pathmethod
The import keyword method
In this method, we place the logo in a different folder with any name. In our case, we named it images. We use the import keyword to reference the folder containing the logo.
Coding example
Let’s look at a coding example to learn more about this:
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
Explanation
Line 1: We import the logo from
imagesfolder usingimportkeyword.Line 2: We import the
App.cssfile for the styling.Line 10: We add the
imgtag, we called our logo using thesrcattribute, and fix its height and width of100px.
The path method
In this method, we place the logo in a different folder with any name. In our case, we named it images. We will call the logo by providing its complete path in the src attribute of the img tag.
Coding example
Let’s look at a coding example to learn more about this:
const reportWebVitals = onPerfEntry => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
Explanation
We first create an
imagesfolder inside ourpublicfolder.Line 1: we import the
App.cssfile for the styling.Line 2: We add the
imgtag, provide the path of the logo in thesrcattribute, and fix its height and width of100px.
We have successfully added a logo to our React project.
