IconSwitcher

Creates an element with an 'attached' stylesheet that switches between two icon children using CSS selectors

Features

• Switch between two icons
• Easily size with size prop
• Animated
• Control animation speed

When do I Use This?

This component is useful when you want to display the state of a page/element using icons

Examples:

• Show sun for light theme, moon for dark theme
• Switch from a clipboard to a check mark on a copy button when clicked

How to use

---
import { DarkThemeToggle, IconSwitcher } from 'astro-headless-ui';
---
<DarkThemeToggle>
  <IconSwitcher name="theme-icons" active="body.dark" size="1.25em">
    <Icon name="carbon:sun"/>
    <Icon name="carbon:moon"/>
  </IconSwitcher>
</DarkThemeToggle>

Output:

<span class="theme-icons">
  <svg>...</svg>
  <svg>...</svg>
</span>

<style>
 ...
</style>

Props

as?: string

Default: span

Use to change the tag of the base element

default?: string

Note: Advanced use cases only, recommended to keep undefined

CSS selector needed to show first icon child

active?: string

CSS selector needed to show the second icon child

Example: body.dark, .copy-button.success, button.clicked

name?: string

Default: icon-toggle

A unique CSS class, used to 'attach' stylesheet to the base element. Use a unique name for every instance of the component

This prop gets automatically combined with class attribute if passed

Important: Define a unique value that wont interfere with other classes on the page

size?: string

Default: 1rem

A CSS size value, short for setting width and height to same value

Set to false if you want to do your own sizing

animation?: height|width

Default: height

height does an upwards shrinking animation

width does a rightwards shrinking animation

Set the speed prop to 0 if you don't want any animation

speed?: number

Default: 250

Speed of the animation, set to 0 if you don't want any animation

hide?: boolean

Default: false

If true removes the base element and only renders the stylesheet, only for advanced use cases if you want to add classes to your own elements

...attrs

All other props are passed as attributes to the base element (id, class, style, etc)

Slots

default

This slot expects two child icons to be passed like

<IconSwitcher>
  <Icon name=""/>
  <Icon name=""/>
</IconSwitcher>

Examples

Using with DarkThemeToggle

---
import { DarkThemeToggle, IconSwitcher } from 'astro-headless-ui';
---
<DarkThemeToggle>
  <IconSwitcher name="theme-icons" active="body.dark" size="1.25em">
    <Icon name="carbon:sun"/>
    <Icon name="carbon:moon"/>
  </IconSwitcher>
</DarkThemeToggle>

Using with CodeCopy

---
import { CodeCopy, IconSwitcher } from 'astro-headless-ui';
---
<CodeCopy>
 <IconSwitcher name="copy-icons" active="button.copied" size="1.5rem">
    <Icon name="fluent:clipboard-20-regular"/>
    <Icon name="fluent:clipboard-task-20-regular"/>
  </IconSwitcher>
</CodeCopy>