@openremote/or-icon 1.0.0 → 1.2.0-snapshot.20240512155407

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 CHANGED
@@ -1,24 +1,61 @@
1
+ # @openremote/or-icon \<or-icon\>
1
2
  [![NPM Version][npm-image]][npm-url]
2
3
  [![Linux Build][travis-image]][travis-url]
3
4
  [![Test Coverage][coveralls-image]][coveralls-url]
4
5
 
5
- ## Install
6
+ Web Component for displaying an icon from a loaded iconset.
6
7
 
8
+ ## Install
7
9
  ```bash
8
- npm i -S @openremote/or-map
10
+ npm i @openremote/or-icon
11
+ yarn add @openremote/or-icon
9
12
  ```
10
13
 
11
14
  ## Usage
15
+ For a full list of properties, methods and options refer to the TypeDoc generated [documentation]().
12
16
 
13
- TODO
17
+ Icons are defined in iconsets, there are two iconsets provided by default and new ones can be created as required (see
18
+ [demo-core](../../demo/demo-core)), The `mdi` iconset is quite large and it is possible to prevent loading of this
19
+ when initialising the OpenRemote `Manager` via the `ManagerConfig`:
14
20
 
15
- ## License
21
+ * `mdi` - [Material Design Icons](https://materialdesignicons.com/)
22
+ * `or` - OpenRemote icons (see [here](./or-iconset.ts))
23
+
24
+ The default iconset is `mdi` but this can be changed by setting `OrIcon.DEFAULT_ICONSET`, to load an icon use the
25
+ following HTML:
26
+
27
+ ```$html
28
+ <or-icon icon="mdi:access-point" />
29
+ ```
30
+
31
+ If using the default iconset then the iconset prefix can be omitted:
32
+ ```$html
33
+ <or-icon icon="access-point" />
34
+ ```
16
35
 
36
+ Styling is done through CSS, the following CSS variables can be used:
37
+
38
+ ```$css
39
+ --or-icon-fill (default: currentcolor)
40
+ --or-icon-stroke (default: none)
41
+ --or-icon-height (default: 24px)
42
+ --or-icon-width (default: 24px)
43
+ --or-icon-pointer-events (default: none)
44
+ ```
45
+
46
+ When an iconset is added then any `or-icon` components in the DOM will be notified and refresh as required.
47
+
48
+ ## Supported Browsers
49
+ The last 2 versions of all modern browsers are supported, including Chrome, Safari, Opera, Firefox, Edge. In addition,
50
+ Internet Explorer 11 is also supported.
51
+
52
+
53
+ ## License
17
54
  [GNU AGPL](https://www.gnu.org/licenses/agpl-3.0.en.html)
18
55
 
19
56
  [npm-image]: https://img.shields.io/npm/v/live-xxx.svg
20
- [npm-url]: https://npmjs.org/package/live-xxx
57
+ [npm-url]: https://npmjs.org/package/@openremote/or-icon
21
58
  [travis-image]: https://img.shields.io/travis/live-js/live-xxx/master.svg
22
59
  [travis-url]: https://travis-ci.org/live-js/live-xxx
23
60
  [coveralls-image]: https://img.shields.io/coveralls/live-js/live-xxx/master.svg
24
- [coveralls-url]: https://coveralls.io/r/live-js/live-xxx?branch=master
61
+ [coveralls-url]: https://coveralls.io/r/live-js/live-xxx?branch=master