Merge pull request #6 from w3ux/rb-refresh-polkicon

feat: Update Polkicon docs for new version
w3ux · Nov 2, 2024 · 7478dd1 · 7478dd1
2 parents bf9a254 + 0ecfa2d
commit 7478dd1
Showing 1 changed file with 15 additions and 12 deletions.
diff --git a/docs/pages/library/react-polkicon.mdx b/docs/pages/library/react-polkicon.mdx
@@ -6,7 +6,8 @@ A light-weight and customisable Polkadot Icon.
 
 ## Usage
 
-Polkicon is a light-weight component that renders the Polkadot icon, with various display options built in. By default, the `address` prop dictates which color palette the Polkicon will display.
+Polkicon is a light-weight component that renders an inline Polkadot icon, inheriting the
+font size of the nearest assigned parent element. The `address` prop dictates which colors are assigned to the Polkicon.
 
 ::::steps
 
@@ -42,7 +43,7 @@ import { Polkicon } from '@w3ux/react-polkicon';
 ...
 
 <h1>
-  <Polkicon size="10rem" address="13Bbi16jczqELAGBH7MaBu31ABreDmw9yFhrEiNEx6wMkNWe" />
+  <Polkicon address="16F1ghy4bMr72BGyin7ryTxiQqJFJwpePsNJcZo1p6dUGVZT" />
 </h1>
 ```
 
@@ -53,19 +54,21 @@ import { Polkicon } from '@w3ux/react-polkicon';
 #### address
 `string`
 
-The address of the Polkadot account.
+The Polkadot address to be represented by the Polkicon.
 
-#### size
-`string | number`
+#### background
+`string?`
 
-The size of the Polkicon. The default size is `2rem`.
+The background of the outermost circle of the icon. The `--background-default` CSS variable is assigned as the default value.
 
-#### outerColor
-`string`
+The address of the Polkadot account.
+
+#### transform
+`TransformProp?`
 
-The color of the outermost circle of the icon. The default value is the `--background-default` CSS variable. This value can be overridden with a custom color, or be set to transparent with the value `transparent`.
+Grow or shrink the Polkicon using "grow-1", "grow-2" - "grow-10", or "shrink-1", "shrink-2" - "shrink-10".
 
-#### colors
-`string[]?`
+#### inactive
+`boolean?`
 
-If a specific pattern or color combination is desired, `colors` can be used to override the default color palette. The colors prop accepts an array of colors, which will be applied to the icon in the order they were provided.
+If `true`, the Polkicon will be displayed in grayscale.