DEV Community

Cover image for Using Icons
Maasa Kono
Maasa Kono

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

...which ends up looking like this:

Alt Text

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>`
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

So now, our page looks like this:

Alt Text

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

Happy coding!

Top comments (0)