Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(blog): update heroicons post #6267

Merged
merged 1 commit into from
Aug 20, 2024
Merged

docs(blog): update heroicons post #6267

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
255 changes: 226 additions & 29 deletions documentation/blog/2023-09-18-heroicons.md → documentation/blog/2024-08-19-heroicons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-09-18-heroicons/
hide_table_of_contents: false
---

**This article was last updated on August 19, 2024, to add sections on Customizing Heroicons and Optimizing Icon Performance.**

## Introduction

[Heroicons](https://heroicons.com) are SVG-based icons packaged by the creators of TailwindCSS. They come in two size variants, `20`, which is suitable for small buttons and form elements, and a `24` size, that is useful for primary navigation buttons like call to action and hero sections. `24` size comes as `solid` and `outline`.
Expand All @@ -24,14 +26,9 @@ The existing navbar is available in [this repository](https://github.com/anewman

Steps we'll cover:

- [Install Heroicons](#install-heroicons)
- [A Navbar with Heroicons](#a-navbar-with-heroicons)
- [Adding and Styling Heroicons with TailwindCSS](#adding-and-styling-heroicons-with-tailwindcss)
- [Using Regular TailwindCSS Utilities with Heroicons](#using-regular-tailwindcss-utilities-with-heroicons)
- [Using `SVG` Related TailwindCSS Utilities with Heroicons](#using-svg-related-tailwindcss-utilities-with-heroicons)
- [Using non-TailwindCSS Classes with Heroicons](#using-non-tailwindcss-classes-with-heroicons)
- [Applying Native `<svg>` Properties to Heroicons](#applying-native-svg-properties-to-heroicons)
- [Applying Responsive TailwindCSS Utils to Heroicons](#applying-responsive-tailwindcss-utils-to-heroicons)
- [Customizing Heroicons](#customizing-heroicons)
- [Optimizing Icon Performance](#optimizing-icon-performance)

## Preparation

Expand Down Expand Up @@ -78,7 +75,7 @@ const Navbar = () => {
</a>
</div>
<div
className={`${menuHidden} border-t border-slate-500 md:border-none text-amber-50 transition-all ease-in-out duration-1000`}
className={`${menuHidden} border-t border-slate-500 text-amber-50 transition-all duration-1000 ease-in-out md:border-none`}
>
<div id="items" className="items-strip">
<div id="left" className="items-left">
Expand Down Expand Up @@ -116,7 +113,7 @@ const Navbar = () => {
</div>
</div>
<div
className={`absolute top-3 right-4 p-1 border border-orange-400 rounded md:hidden text-slate-500 hover:text-slate-300 hover:bg-orange-200`}
className={`absolute right-4 top-3 rounded border border-orange-400 p-1 text-slate-500 hover:bg-orange-200 hover:text-slate-300 md:hidden`}
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
>
<a href="/">
Expand Down Expand Up @@ -167,41 +164,41 @@ body {
}

.navbar {
@apply sticky top-0 mx-auto px-2 w-full h-auto bg-slate-600 flex flex-col justify-start md:flex-row md:justify-between md:items-center;
@apply sticky top-0 mx-auto flex h-auto w-full flex-col justify-start bg-slate-600 px-2 md:flex-row md:items-center md:justify-between;
}

.brand-wrapper {
@apply h-14 bg-slate-600 w-full flex justify-start items-center flex-1 self-start;
@apply flex h-14 w-full flex-1 items-center justify-start self-start bg-slate-600;
}

.brand {
max-width: 12rem;
color: var(--primary-color);
@apply text-4xl p-2;
@apply p-2 text-4xl;
}

.items-strip {
@apply my-2 flex flex-col justify-start items-start md:flex-row md:justify-start md:items-center;
@apply my-2 flex flex-col items-start justify-start md:flex-row md:items-center md:justify-start;
}

.items-left {
@apply mx-2 p-2 order-last md:order-none flex justify-center items-center;
@apply order-last mx-2 flex items-center justify-center p-2 md:order-none;
}

.items-list {
@apply flex flex-col md:flex-row md:justify-start md:items-center;
@apply flex flex-col md:flex-row md:items-center md:justify-start;
}

.nav-item {
@apply mx-2 p-1 rounded lg:mx-8 w-full lg:w-auto hover:scale-105 hover:backdrop-brightness-125 hover:shadow transition-all;
@apply mx-2 w-full rounded p-1 transition-all hover:scale-105 hover:shadow hover:backdrop-brightness-125 lg:mx-8 lg:w-auto;
}

.nav-link {
@apply text-center p-1 flex justify-start items-center;
@apply flex items-center justify-start p-1 text-center;
}

.text-input {
@apply py-0.5 px-2 border rounded-l text-slate-800;
@apply rounded-l border px-2 py-0.5 text-slate-800;
}

.avatar {
Expand Down Expand Up @@ -280,7 +277,7 @@ const Navbar = () => {
</a>
</div>
<div
className={`${menuHidden} border-t border-slate-500 md:border-none text-amber-50 transition-all ease-in-out duration-1000`}
className={`${menuHidden} border-t border-slate-500 text-amber-50 transition-all duration-1000 ease-in-out md:border-none`}
>
<div id="items" className="items-strip">
<div id="left" className="items-left">
Expand All @@ -290,15 +287,15 @@ const Navbar = () => {
placeholder="Find donald trump or something..."
/>
{/*highlight-next-line*/}
<MagnifyingGlassIcon className="h-6 w-6 mx-1 stroke-orange-400" />
<MagnifyingGlassIcon className="mx-1 h-6 w-6 stroke-orange-400" />
</div>
<div id="right">
<ul className="items-list">
<li className="nav-item md:order-last">
<a href="/">
{/*highlight-next-line*/}
<UserIcon
className="h-8 w-8 glow"
className="glow h-8 w-8"
stroke="pink"
strokeWidth={1.2}
/>
Expand All @@ -324,7 +321,7 @@ const Navbar = () => {
</div>
</div>
<div
className={`absolute top-3 right-4 p-1 border border-orange-400 rounded md:hidden text-slate-500 hover:text-slate-300 hover:bg-orange-200`}
className={`absolute right-4 top-3 rounded border border-orange-400 p-1 text-slate-500 hover:bg-orange-200 hover:text-slate-300 md:hidden`}
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
>
<a href="/">
Expand All @@ -350,7 +347,7 @@ As discussed below, we are using three types of CSS classes.
We can use regular Tailwind CSS utilities like `h-6 w-6`:

```tsx
<MagnifyingGlassIcon className="h-6 w-6 mx-1 stroke-orange-400" />
<MagnifyingGlassIcon className="mx-1 h-6 w-6 stroke-orange-400" />
```

In this case, we are using spacing utilities for height, width and margin.
Expand All @@ -376,7 +373,7 @@ Internally, `stroke-{color}-{saturation}` value is relayed to the `stroke` prope
We can use non-Tailwind classes as well:

```tsx
<UserIcon className="h-8 w-8 glow" stroke="pink" strokeWidth={1.2} />
<UserIcon className="glow h-8 w-8" stroke="pink" strokeWidth={1.2} />
```

For the `<UserIcon />`, we are applying a `glow` class that animates the icon with a glow `filter`. It's completely custom CSS and looks like this:
Expand Down Expand Up @@ -419,7 +416,7 @@ With the above changes Heroicons and their styles, the navbar looks like this:
Notice also that we are applying `stroke` and `strokeWidth` to `<UserIcon />`:

```tsx
<UserIcon className="h-8 w-8 glow" stroke="pink" strokeWidth={1.2} />
<UserIcon className="glow h-8 w-8" stroke="pink" strokeWidth={1.2} />
```

Native `<svg>` properties passed to Heroicons also get relayed to the `<svg>` element inside.
Expand Down Expand Up @@ -463,7 +460,7 @@ const Navbar = () => {
</a>
</div>
<div
className={`${menuHidden} border-t border-slate-500 md:border-none text-amber-50 transition-all ease-in-out duration-1000`}
className={`${menuHidden} border-t border-slate-500 text-amber-50 transition-all duration-1000 ease-in-out md:border-none`}
>
<div id="items" className="items-strip">
<div id="left" className="items-left">
Expand All @@ -472,14 +469,14 @@ const Navbar = () => {
type="email"
placeholder="Find Donald or something..."
/>
<MagnifyingGlassIcon className="h-6 w-6 mx-1 stroke-orange-400" />
<MagnifyingGlassIcon className="mx-1 h-6 w-6 stroke-orange-400" />
</div>
<div id="right">
<ul className="items-list">
<li className="nav-item md:order-last">
<a href="/">
<UserIcon
className="h-8 w-8 glow"
className="glow h-8 w-8"
stroke="pink"
strokeWidth={1.2}
/>
Expand Down Expand Up @@ -511,7 +508,7 @@ const Navbar = () => {
</div>
</div>
<div
className={`absolute top-3 right-4 p-1 border border-orange-400 rounded md:hidden text-slate-500 hover:text-slate-300 hover:bg-orange-200`}
className={`absolute right-4 top-3 rounded border border-orange-400 p-1 text-slate-500 hover:bg-orange-200 hover:text-slate-300 md:hidden`}
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
>
<a href="/">
Expand All @@ -533,6 +530,206 @@ With `md:hidden lg:block` we are changing the visibility of the icon using respo
<UserGroupIcon className="h-6 w-6 md:hidden lg:block" />
```

## Customizing Heroicons

Customizing Heroicons to your application's design and branding is possible, and here are a few advanced ways of enhancing them:

### Advanced SVG Manipulations

- **Path Adjustments**: Direct editing of SVG path data to create custom shapes or adjust a default one. It's done by editing the `d` attribute within the `<path>` tag of an SVG that describes the outline for the icon.

```tsx
import React from "react";

const CustomIcon = () => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
className="h-6 w-6"
>
<path
d="M12 2a10 10 0 110 20 10 10 0 010-20zm1 14h-2v-2h2v2zm0-4h-2V7h2v5z"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
/>
</svg>
);

export default CustomIcon;
```

- **Transformations**: By applying a few transformations such as scaling, rotation, or skewing, you can change some elements in an SVG. For this purpose, the `transform` attribute is used. To rotate an icon, for example, the `<svg>` element could have `transform="rotate(45)"`. This would rotate the icon by 45°.

```tsx
import { ArrowPathIcon } from "@heroicons/react/24/outline";

const RotatedIcon = () => (
<ArrowPathIcon className="h-8 w-8" transform="rotate(45)" stroke="blue" />
);
```

- **Animations**: You can animate your Heroicons using CSS or JavaScript. For example, you can create an animation with a `stroke-width` or continuous rotation by applying CSS properties to `@keyframes`.

```tsx
import { ArrowRightIcon } from "@heroicons/react/24/outline";

const AnimatedIcon = () => (
<ArrowRightIcon className="h-8 w-8 animate-bounce text-red-500" />
);
```

### Theming Icons

- **Dynamic Styling with TailwindCSS**: You're able to do dynamic classes with TailwindCSS, which means you toggle classes depending on some user actions or the state of your app. For example, you can change the color of an icon when it is hovered over, or if some condition is true, by using conditional class names.

```tsx
import { StarIcon } from "@heroicons/react/24/solid";

const ThemedIcon = ({ isActive }) => (
<StarIcon
className={`h-6 w-6 ${isActive ? "text-yellow-500" : "text-gray-300"}`}
/>
);
```

- **Dark Mode**: Implement dark mode support. This can easily be done in TailwindCSS with the `dark:` modifier. You can, for instance, define fill colors as `fill-current text-gray-900 dark:text-gray-100` for both light and dark modes.

```tsx
import { MoonIcon } from "@heroicons/react/24/outline";

const DarkModeIcon = () => (
<MoonIcon className="h-6 w-6 text-gray-900 dark:text-gray-100" />
);
```

- **Custom Themes**: TailwindCSS can also be extended by adding custom themes that allow imposing specific styles onto the Heroicons. This is done by defining new color schemes, stroke widths, and various other properties inside a Tailwind configuration file, then applying those new properties to the Heroicon.

```tsx
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
customBlue: "#1fb6ff",
},
},
},
};
```

```tsx
import { CogIcon } from "@heroicons/react/24/solid";

const CustomThemedIcon = () => <CogIcon className="text-customBlue h-6 w-6" />;
```

This way, you will be able to design unique branded icons that are fully integrated into the design language of your application, thus boosting the general user experience.

## Optimizing Icon Performance

The point of icon performance optimization, especially in web applications, is to improve user experience and speed up the time taken to load. Here are a few ways to go about that with some practical examples:

### Use SVG Icons Over Icon Fonts

SVG icons are typically more performant compared to icon fonts because they don't carry the overhead of loading an entire set of fonts when you need just a few icons. Additionally, SVGs are much more scalable and customizable.

Avoid using FontAwesome, and instead use SVGs directly or libraries like Heroicons.

```jsx
import { StarIcon } from "@heroicons/react/24/solid";

const ExampleIcon = () => <StarIcon className="h-6 w-6 text-yellow-500" />;
```

Here, `StarIcon` is used as an SVG so that only the necessary icon is loaded, minimizing load times and improving performance.

### Optimize SVG Files

Reducing file size means optimizing SVG files: removing unnecessary metadata, lowering the precision of paths, and simplifying shapes.

Use tools like [SVGO](https://github.com/svg/svgo) to optimize SVG files beforehand.

```bash
npx svgo input.svg -o output.svg
```

This command reduces the size of the `input.svg` file by optimizing it and removing unnecessary elements.

### Lazy Load Icons

In an application that uses a large number of icons, lazy loading ensures that only the necessary icons are loaded when needed rather than all at once, improving performance.

```jsx
import React, { Suspense, lazy } from "react";

const StarIcon = lazy(() => import("@heroicons/react/24/solid/StarIcon"));

const LazyLoadedIcon = () => (
<Suspense fallback={<div>Loading...</div>}>
<StarIcon className="h-6 w-6 text-yellow-500" />
</Suspense>
);
```

This approach defers loading the `StarIcon` until it’s actually needed, reducing the initial load time.

### Minimize the Use of Multiple Icon Sets

Loading multiple icon libraries together can significantly increase your JavaScript bundle size. Stick to a single icon set whenever possible, or simply use the ones you really need.

```jsx
import { HomeIcon, UserIcon } from "@heroicons/react/24/outline";

const Navbar = () => (
<nav>
<HomeIcon className="h-6 w-6 text-blue-500" />
<UserIcon className="h-6 w-6 text-green-500" />
</nav>
);
```

This approach avoids unnecessary imports, keeping the bundle size minimal.

#### Leverage a CDN

If you are using popular icon sets like Heroicons or FontAwesome, consider loading your icons with a CDN. This can cache the contents effectively and reduce the load on your server.

```html
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
/>
```

This method serves icons from a globally distributed CDN, reducing latency and improving load times.

#### Sprite Sheets for Multiple Icons

When dealing with projects that require lots of icons, combining them all into a single SVG sprite sheet is recommended. This approach saves multiple HTTP requests, which ultimately decreases page load times.

```tsx
<svg class="hidden">
<symbol id="icon-home" viewBox="0 0 24 24">
<!-- SVG Path -->
</symbol>
<symbol id="icon-user" viewBox="0 0 24 24">
<!-- SVG Path -->
</symbol>
</svg>

<svg class="icon">
<use xlink:href="#icon-home"></use>
</svg>
<svg class="icon">
<use xlink:href="#icon-user"></use>
</svg>
```

This technique allows multiple icons to be loaded in a single HTTP request, reducing overall load time.

## Summary

In this post, we quickly picked how to use Heroicons with TailwindCSS and non-Tailwind classes. We found that Heroicons produce an `<svg` element which receives styles from the JSX component via `className`, and other native properties like `stroke`, `fill`, `height`, `width`, etc. We saw that, in order to style a Heroicon `<svg>`, we can pass related TailwindCSS classes like `stroke-{color}-{saturation}` and non Tailwind classes to `className` prop of the Heroicon component. We can also pass properties like `stroke`, `fill`, etc., to a Heroicon to style its `<svg>`. As usual, Heroicons can also be manipulated using responsive classes.
Loading