ThemeIcon

ThemeIcon is a dynamic icon that shows four colors of the current theme in four different circles.

It's the component used by ThemeEditorButton.

Import

Community Version

import { ThemeIcon } from '@hypertheme-editor/chakra-ui'

Pro Version PRO

import { ThemeIcon } from '@hypertheme-editor-pro/chakra-ui'

Usage

Basic Usage

<ThemeIcon />

With Styled Props

<ThemeIcon my={10} />

Props

This component accepts also SimpleGridProps from the Chakra UI SimpleGrid component, read more here.

size

Change the size of the button.

Currently it accepts 'sm' | 'md' | 'lg' value.

Here's an example showing the different sizes:

<VStack>
  <ThemeIcon size="sm" />
  <ThemeIcon size="md" />
  <ThemeIcon size="lg" />
</VStack>

Hyper kit

Made with ❤️ in 🇮🇹 | byHyperting