@public-ui/themes 4.0.0-alpha.3 → 4.0.0-alpha.5
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 +10 -10
- package/assets/material-icons/README.md +19 -14
- package/assets/material-icons/_data/versions.json +2123 -2123
- package/assets/material-icons/index.d.ts +2122 -2122
- package/assets/material-icons/package.json +50 -50
- package/assets/material-symbols/README.md +18 -11
- package/assets/material-symbols/index.d.ts +2803 -2803
- package/assets/material-symbols/package.json +39 -39
- package/dist/index.cjs +275 -272
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +275 -272
- package/dist/index.mjs.map +1 -1
- package/package.json +6 -3
package/README.md
CHANGED
|
@@ -34,17 +34,17 @@ import { defineCustomElements } from '@public-ui/components/dist/loader';
|
|
|
34
34
|
import { DEFAULT, ECL_EC, ECL_EU } from '@public-ui/themes';
|
|
35
35
|
|
|
36
36
|
register(
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
37
|
+
DEFAULT,
|
|
38
|
+
// or provide an array to register multiple themes:
|
|
39
|
+
// [DEFAULT, ECL_EC, ECL_EU]
|
|
40
|
+
defineCustomElements,
|
|
41
41
|
)
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
42
|
+
.then(() => {
|
|
43
|
+
/* KoliBri ready */
|
|
44
|
+
})
|
|
45
|
+
.catch((error) => {
|
|
46
|
+
/* Handle errors */
|
|
47
|
+
});
|
|
48
48
|
```
|
|
49
49
|
|
|
50
50
|
Override theme tokens in your own stylesheet as needed. The [default theme README](./default/README.md) lists all available variables.
|
|
@@ -39,17 +39,22 @@ or import in CSS (example: `src/styles.css` in Angular CLI):
|
|
|
39
39
|
or import in HTML:
|
|
40
40
|
|
|
41
41
|
```html
|
|
42
|
-
<link href="/path/to/material-icons/iconfont/material-icons.css" rel="stylesheet"
|
|
42
|
+
<link href="/path/to/material-icons/iconfont/material-icons.css" rel="stylesheet" />
|
|
43
43
|
```
|
|
44
44
|
|
|
45
45
|
To display an icon, use one of the following:
|
|
46
46
|
|
|
47
47
|
```html
|
|
48
|
-
<span class="material-icons">pie_chart</span>
|
|
49
|
-
|
|
50
|
-
<span class="material-icons-
|
|
51
|
-
|
|
52
|
-
<span class="material-icons-
|
|
48
|
+
<span class="material-icons">pie_chart</span>
|
|
49
|
+
<!-- Filled -->
|
|
50
|
+
<span class="material-icons-outlined">pie_chart</span>
|
|
51
|
+
<!-- Outlined -->
|
|
52
|
+
<span class="material-icons-round">pie_chart</span>
|
|
53
|
+
<!-- Round -->
|
|
54
|
+
<span class="material-icons-sharp">pie_chart</span>
|
|
55
|
+
<!-- Sharp -->
|
|
56
|
+
<span class="material-icons-two-tone">pie_chart</span>
|
|
57
|
+
<!-- Two Tone -->
|
|
53
58
|
```
|
|
54
59
|
|
|
55
60
|
### Reducing Build Size
|
|
@@ -65,13 +70,13 @@ The default `material-icons.css` includes CSS for all fonts. This may cause buil
|
|
|
65
70
|
<details>
|
|
66
71
|
<summary><strong>Show all</strong></summary><br>
|
|
67
72
|
|
|
68
|
-
Icons
|
|
69
|
-
|
|
70
|
-
Filled
|
|
71
|
-
Outlined | outlined.css | outlined.scss
|
|
72
|
-
Round
|
|
73
|
-
Sharp
|
|
74
|
-
Two Tone | two-tone.css | two-tone.scss
|
|
73
|
+
| Icons | CSS | Sass |
|
|
74
|
+
| :------- | :----------- | :------------ |
|
|
75
|
+
| Filled | filled.css | filled.scss |
|
|
76
|
+
| Outlined | outlined.css | outlined.scss |
|
|
77
|
+
| Round | round.css | round.scss |
|
|
78
|
+
| Sharp | sharp.css | sharp.scss |
|
|
79
|
+
| Two Tone | two-tone.css | two-tone.scss |
|
|
75
80
|
|
|
76
81
|
</details>
|
|
77
82
|
|
|
@@ -122,7 +127,7 @@ See [demo].
|
|
|
122
127
|
Material design icons are created by [Google](https://github.com/google/material-design-icons#license).
|
|
123
128
|
|
|
124
129
|
> We have made these icons available for you to incorporate into your products under the [Apache License Version 2.0][license]. Feel free to remix and re-share these icons and documentation in your products.
|
|
125
|
-
We'd love attribution in your app's
|
|
130
|
+
> We'd love attribution in your app's _about_ screen, but it's not required.
|
|
126
131
|
|
|
127
132
|
[releases]: https://github.com/marella/material-icons/releases
|
|
128
133
|
[license]: https://github.com/marella/material-icons/blob/main/LICENSE
|