@odx/icons 4.0.0-rc.22 → 4.0.0-rc.23
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -4
- package/dist/src/main.js +5 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -51,12 +51,26 @@ import '@odx/icons/core/user';
|
|
|
51
51
|
|
|
52
52
|
- **name**: string - `<set-name>::<name>` or `<name>` with default set (core)
|
|
53
53
|
- **set**: string - `<set-name>`
|
|
54
|
+
- **size**: string - one of `xs` | `sm` | `md` | `lg`
|
|
54
55
|
|
|
55
|
-
|
|
56
|
+
#### Size Attribute
|
|
57
|
+
|
|
58
|
+
The size attribute provides predefined size options for the icon. These options correspond to CSS variables that can be customized globally in your project. The available values are:
|
|
59
|
+
|
|
60
|
+
- `xs`: `--odx-size-100` - fallback: `16px`
|
|
61
|
+
- `sm`: `--odx-size-125` - fallback: `20px`
|
|
62
|
+
- `md`: `--odx-size-150` - fallback: `24px`
|
|
63
|
+
- `lg`: `--odx-size-200` - fallback: `32px`
|
|
64
|
+
- `xl`: `--odx-size-225` - fallback: `36px`
|
|
65
|
+
|
|
66
|
+
> The size tokens (`--odx-size-*`) are provided by the **@odx/design-tokens** package.
|
|
67
|
+
|
|
68
|
+
### CSS Custom Properties
|
|
69
|
+
|
|
70
|
+
- **--color**: string - Sets the color of the icon. The default value is `currentColor`, allowing the icon to inherit the text color
|
|
71
|
+
- **--rotate**: string - Controls the rotation of the icon. The default value is `0deg`
|
|
72
|
+
- **--size**: string - Defines the size of the icon. The default value is `1em`, which matches the current font size. This can be overridden using the size attribute or custom CSS
|
|
56
73
|
|
|
57
|
-
- **--color**: string - default: `currentColor`
|
|
58
|
-
- **--rotate**: string - default: `0deg`
|
|
59
|
-
- **--size**: string - default: `1em`
|
|
60
74
|
|
|
61
75
|
### HTML Example
|
|
62
76
|
|
package/dist/src/main.js
CHANGED
|
@@ -2,17 +2,16 @@ import { OdxAssetElement, registerAssetElement } from '@odx/assets-utils';
|
|
|
2
2
|
const styles = `
|
|
3
3
|
:host {
|
|
4
4
|
--rotate: 0deg;
|
|
5
|
-
}
|
|
6
5
|
|
|
7
|
-
:host {
|
|
8
6
|
transform-origin: 50% 50%;
|
|
9
7
|
transform: rotate(var(--rotate));
|
|
10
8
|
}
|
|
11
9
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}
|
|
10
|
+
:host([size="xs"]) { --size: var(--odx-size-100, 16px); }
|
|
11
|
+
:host([size="sm"]) { --size: var(--odx-size-125, 20px); }
|
|
12
|
+
:host([size="md"]) { --size: var(--odx-size-150, 24px); }
|
|
13
|
+
:host([size="lg"]) { --size: var(--odx-size-200, 32px); }
|
|
14
|
+
:host([size="xl"]) { --size: var(--odx-size-225, 36px); }
|
|
16
15
|
`;
|
|
17
16
|
export class OdxIconElement extends OdxAssetElement {
|
|
18
17
|
static assetAttributes = [
|
package/package.json
CHANGED