How to make a react copy to clipboard icon

In this tutorial, we are going to share react copy to clipboard icon

React copy to clipboard icon can be exposed as a component using svg as follow:

const CopyClipboardIcon = () => {

  return (<svg xmlns="http://www.w3.org/2000/svg" style={{height:'24', width:'24'}} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} >
    <path strokeLinecap="round" strokeLinejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
  </svg>)
}

This can be integrated in your react app like below:

edit you App.js and copy the following:

export default function Test() {

  return (
    <CopyClipboardIcon />
  );
}


const CopyClipboardIcon = () => {

  return (<svg xmlns="http://www.w3.org/2000/svg" style={{height:'24', width:'24'}} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} >
    <path strokeLinecap="round" strokeLinejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
  </svg>)
}

And you should be able to see it when you run localhost:3000/

Customize copy to clipboard icon with tailwindcss

You can add motion to the react icon, so when you click on it, it feels like something was happened

To add motion, simply edit CSS so when the icon is active it moves downward and the user gets feedback

Here is how to do it:

Edit App.js and copy the following code

export default function Test() {
  return <CopyClipboardIcon />;
}

const CopyClipboardIcon = () => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      className="shadow-md shadow-slate-700 active:translate-y-1 hover:cursor-pointer h-6 w-6 "
      fill="none"
      viewBox="0 0 24 24"
      stroke="currentColor"
      strokeWidth={2}
    >
      <path
        strokeLinecap="round"
        strokeLinejoin="round"
        d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"
      />
    </svg>
  );
};

Try to run localhost:3000 and see the nice effect when you click on the icon. It slides downward and you know then that your have copied content to your system clipboard

Conclusion

We have seen how to make a react copy to clipboard icon using inline CSS, and using tailwind for improved motion when clicking on the icon.

If you like the article, and want to add the copy clipboard function when you click on the icon, check this article, it contains full description on how to copy content to clipboard