Part 43: Enhancing Your Share Button with Icons: A Simple Guide

[App] Client Components

[App] Client Components

Incorporating icons into your web applications can make them more intuitive and visually appealing. In this post, we’ll guide you through the process of adding an icon to a "Share link" button using an icon library that pairs well with modern styling frameworks.

Selecting an Icon Library

Choosing the right icon library is crucial for maintaining consistency and ease of use across your project. In our example, we’ll use a well-known library that integrates smoothly with React and offers a wide range of icons in various styles.

Installing the Icon Library

First, you need to install the icon library in your project. This library provides a React support package, which you can add to your project dependencies using the following command:

npm install @heroicons/react

This package includes a comprehensive set of icons. While we’re focusing on the "link" icon today, having a variety of icons available can be advantageous for future enhancements.

Importing and Utilizing the Icon

After installation, you can easily import the desired icon from the library. Icons come in different styles and sizes, such as "solid" or "outline". For our purpose, we’ll use the 20x20 "solid" icons. Here’s how you can import and use the "LinkIcon":

'use client';
import { useState } from 'react';
import { LinkIcon } from '@heroicons/react/20/solid';

export default function ShareLinkButton() {
    const [clicked, setClicked] = useState(false);

    const handleClick = () => {
      console.log('clicked!');
      navigator.clipboard.writeText(window.location.href);
      setClicked(true);
      setTimeout(() => setClicked(false), 1500);
    };

    return (
      <button onClick={handleClick}
        className="border flex gap-1 items-center px-2 py-1 rounded text-slate-500 text-sm
                   hover:bg-orange-100 hover:text-slate-700">
        <LinkIcon className="h-4 w-4" />
        {clicked ? 'Link copied!' : 'Share link'}
      </button>
    );
  }

Styling the Icon

One of the key benefits of using this library is the ability to style icons using utility classes. In this example, we set the height and width to 16px using h-4 and w-4. The button employs flexbox to align the icon and text in a single row, with gap-1 providing spacing between them and items-center ensuring vertical alignment.

Integrating Third-Party Components

Using third-party components can significantly enhance your application's functionality and appearance. Icons, being SVG elements, can be seamlessly integrated into both Server and Client Components. However, if you are using a third-party widget that requires client-side functionality, it must be used within a Client Component If necessary, you can create a Client Component to wrap the third-party component.

Conclusion

Adding icons to your buttons is a straightforward way to improve user interface design. By utilizing a reliable icon library, you ensure consistency across your application while taking advantage of the flexibility of React components. This tutorial not only shows how to implement an icon but also demonstrates the effective use of third-party components in your project. Whether you're updating a single button or a complete interface, thoughtful icon integration can greatly enhance the user experience.