Skip to main content

Icon Adapter

Deprecated in version 0.3.0

deprecated

The role of this component is now replaced by the iconClass function.

The Icon Adapter component allows you to integrate third-party icon libraries with the Tailwind-Joy component.

info

This component is an original component of Tailwind-Joy.

Introduction​

For Joy UI, you are instructed to define global styles to integrate third-party icon libraries with Joy UI components.

Some of these libraries are instructed to define styles for <svg>, but this can have the side effect of applying a single style to <svg>s that are not components of the icon library.

So, I created this component to enable “Automatic adjustment” feature while avoiding the side effects that can occur with global style definitions.

Basics​

import { IconAdapter } from 'tailwind-joy/components';

Tailwind-Joy Icon Adapter defines default styles for third-party icon components.

The demo below shows the difference with or without the Icon Adapter.

import { Box, Button, IconAdapter } from 'tailwind-joy/components';
import { MdAdd } from 'react-icons/md';

export function IconAdapterBasics() {
  return (
    <div>
      <Box className="flex flex-wrap items-center justify-center gap-2">
        <Button
          color="primary"
          size="sm"
          startDecorator={
            <IconAdapter>
              <MdAdd />
            </IconAdapter>
          }
        >
          With
        </Button>
        <Button
          color="success"
          size="md"
          startDecorator={
            <IconAdapter>
              <MdAdd />
            </IconAdapter>
          }
        >
          With
        </Button>
        <Button
          color="neutral"
          size="lg"
          startDecorator={
            <IconAdapter>
              <MdAdd />
            </IconAdapter>
          }
        >
          With
        </Button>
      </Box>
      <Box className="flex flex-wrap items-center justify-center gap-2">
        <Button
          color="primary"
          size="sm"
          startDecorator={
            <MdAdd className="m-[var(--Icon-margin)] inline-block h-[1em] w-[1em] shrink-0 select-none [color:var(--Icon-color,var(--joy-neutral-500))] [font-size:var(--Icon-fontSize,1.5rem)] dark:[color:var(--Icon-color,var(--joy-neutral-400))]" />
          }
        >
          Without
        </Button>
        <Button
          color="success"
          size="md"
          startDecorator={
            <MdAdd className="m-[var(--Icon-margin)] inline-block h-[1em] w-[1em] shrink-0 select-none [color:var(--Icon-color,var(--joy-neutral-500))] [font-size:var(--Icon-fontSize,1.5rem)] dark:[color:var(--Icon-color,var(--joy-neutral-400))]" />
          }
        >
          Without
        </Button>
        <Button
          color="neutral"
          size="lg"
          startDecorator={
            <MdAdd className="m-[var(--Icon-margin)] inline-block h-[1em] w-[1em] shrink-0 select-none [color:var(--Icon-color,var(--joy-neutral-500))] [font-size:var(--Icon-fontSize,1.5rem)] dark:[color:var(--Icon-color,var(--joy-neutral-400))]" />
          }
        >
          Without
        </Button>
      </Box>
    </div>
  );
}

Icon libraries​

React Icons​

npm install react-icons

See the Basics section above for a component demo display.

Heroicons​

npm install @heroicons/react
import { Box, Button, IconAdapter } from 'tailwind-joy/components';
import { HeartIcon } from '@heroicons/react/24/outline';

export function IconAdapterHeroicons() {
  return (
    <div>
      <Box className="flex flex-wrap items-center justify-center gap-2">
        <Button
          color="danger"
          size="sm"
          startDecorator={
            <IconAdapter>
              <HeartIcon />
            </IconAdapter>
          }
        >
          With
        </Button>
        <Button
          color="warning"
          size="md"
          startDecorator={
            <IconAdapter>
              <HeartIcon />
            </IconAdapter>
          }
        >
          With
        </Button>
        <Button
          color="success"
          size="lg"
          startDecorator={
            <IconAdapter>
              <HeartIcon />
            </IconAdapter>
          }
        >
          With
        </Button>
      </Box>
      <Box className="flex flex-wrap items-center justify-center gap-2">
        <Button
          color="danger"
          size="sm"
          startDecorator={
            <HeartIcon className="m-[var(--Icon-margin)] inline-block h-[1em] w-[1em] shrink-0 select-none [color:var(--Icon-color,var(--joy-neutral-500))] [font-size:var(--Icon-fontSize,1.5rem)] dark:[color:var(--Icon-color,var(--joy-neutral-400))]" />
          }
        >
          Without
        </Button>
        <Button
          color="warning"
          size="md"
          startDecorator={
            <HeartIcon className="m-[var(--Icon-margin)] inline-block h-[1em] w-[1em] shrink-0 select-none [color:var(--Icon-color,var(--joy-neutral-500))] [font-size:var(--Icon-fontSize,1.5rem)] dark:[color:var(--Icon-color,var(--joy-neutral-400))]" />
          }
        >
          Without
        </Button>
        <Button
          color="success"
          size="lg"
          startDecorator={
            <HeartIcon className="m-[var(--Icon-margin)] inline-block h-[1em] w-[1em] shrink-0 select-none [color:var(--Icon-color,var(--joy-neutral-500))] [font-size:var(--Icon-fontSize,1.5rem)] dark:[color:var(--Icon-color,var(--joy-neutral-400))]" />
          }
        >
          Without
        </Button>
      </Box>
    </div>
  );
}

Anatomy​

If the anatomy of the content is a single root element, the class name of the Icon Adapter component is merged into the class attribute of that root element, and the Icon Adapter component is fragmented.

<!-- root element of Icon Adapter contents -->
<svg class="tj-icon-adapter-root ...">
  <!-- Icon Adapter contents excluding the root element -->
</svg>

Otherwise, the Icon Adapter component is composed of a single root <span> element that wraps around its contents.

<span class="contents">
  <!-- Icon Adapter contents -->
</span>

API​

See the documentation below for a complete reference to all of the props available to the components mentioned here.