Using Icons

For the "Contact Me" section of my website, I wanted clickable icons that would redirect the user to my social media pages. Here is how I went about this using regular HTML and a handy React tool:

If you have worked with basic HTML, you know that we use the <a> tag in order to reference a URL. It would look something like this:

<a href='https://www.linkedin.com/in/maasa-kono'>LinkedIn link</a>

...which ends up looking like this:

This will create a clickable link on your DOM entitled "LinkedIn link" that will redirect the page to my LinkedIn profile. However, I want to have the page open up in a new tab (just my personal preference). In order to do so, we will need to update the <a> tag by adding targe='_blank', so the updated version looks like this:

`<a href='https://www.linkedin.com/in/maasa-kono' target='_blank' rel='noopener noreferrer'>LinkedIn link</a>`

You will notice another addition of rel='noopener noreferrer'. This was added due to a security risk notification that popped up in the terminal, more of which you can read about here.

Now I have a link that will open up in a new tab so the user won't lose their place on my website!

Now I want that icon image to click on, as opposed to just plain text. To get this working, I utilized the react-share package, which you can download by running the following in your terminal:

npm install react-share --save

or

yarn add react-share

Once that installation is complete, we can now grab social media icons that are available in the package to use in our website. First, let's import the specific icons we want to use at the top of the file:

import React from 'react';
import {LinkedinIcon} from 'react-share';

We can now use the LinkedIn icon in this file! Let's replace the link text so that it is updated as follows:

<a href='https://www.linkedin.com/in/maasa-kono/' target="_blank" rel='noopener noreferrer'><LinkedinIcon /></a>

So now, our page looks like this:

You can find detailed information on more that react-share has to offer right here.

Happy coding!