Skip to content

Commit 7478dd1

Browse files
authored
Merge pull request #6 from w3ux/rb-refresh-polkicon
feat: Update Polkicon docs for new version
2 parents bf9a254 + 0ecfa2d commit 7478dd1

File tree

1 file changed

+15
-12
lines changed

1 file changed

+15
-12
lines changed

docs/pages/library/react-polkicon.mdx

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ A light-weight and customisable Polkadot Icon.
66

77
## Usage
88

9-
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.
9+
Polkicon is a light-weight component that renders an inline Polkadot icon, inheriting the
10+
font size of the nearest assigned parent element. The `address` prop dictates which colors are assigned to the Polkicon.
1011

1112
::::steps
1213

@@ -42,7 +43,7 @@ import { Polkicon } from '@w3ux/react-polkicon';
4243
...
4344

4445
<h1>
45-
<Polkicon size="10rem" address="13Bbi16jczqELAGBH7MaBu31ABreDmw9yFhrEiNEx6wMkNWe" />
46+
<Polkicon address="16F1ghy4bMr72BGyin7ryTxiQqJFJwpePsNJcZo1p6dUGVZT" />
4647
</h1>
4748
```
4849

@@ -53,19 +54,21 @@ import { Polkicon } from '@w3ux/react-polkicon';
5354
#### address
5455
`string`
5556

56-
The address of the Polkadot account.
57+
The Polkadot address to be represented by the Polkicon.
5758

58-
#### size
59-
`string | number`
59+
#### background
60+
`string?`
6061

61-
The size of the Polkicon. The default size is `2rem`.
62+
The background of the outermost circle of the icon. The `--background-default` CSS variable is assigned as the default value.
6263

63-
#### outerColor
64-
`string`
64+
The address of the Polkadot account.
65+
66+
#### transform
67+
`TransformProp?`
6568

66-
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`.
69+
Grow or shrink the Polkicon using "grow-1", "grow-2" - "grow-10", or "shrink-1", "shrink-2" - "shrink-10".
6770

68-
#### colors
69-
`string[]?`
71+
#### inactive
72+
`boolean?`
7073

71-
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.
74+
If `true`, the Polkicon will be displayed in grayscale.

0 commit comments

Comments
 (0)