@odx/icons 4.0.0-rc.20 → 4.0.0-rc.21

package/README.md

@@ -12,7 +12,7 @@ npm i @odx/icons@next
 
 ## Usage
 
-The library provides a custom element `<odx-icon>` to display icons. You can choose between different icon sets (1x1 or 4x3) or import individual icons to reduce your bundle size.
+The library provides a custom element `<odx-icon>` to display icons. You can choose between different icon sets (core, safety, ...) or import individual icons to reduce your bundle size.
 
 > **We rely on the esm module behavior in order to keep a global state.** If you load an asset from a CDN ensure that the same module of **@odx/assets-utils** is used throughout your application. One common technique is the usage of an [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) (`<script type="importmap">`).
 
@@ -55,6 +55,8 @@ import '@odx/icons/core/user';
 ### CSS Property API
 
 - **--color**: string - default: `currentColor`
+- **--rotate**: string - default: `0deg`
+- **--size**: string - default: `1em`
 
 ### HTML Example
 
@@ -89,7 +91,7 @@ import '@odx/icons/core';
 
 // Create an icon dynamically
 const icon = document.createElement('odx-icon');
-icon.setAttribute('name', 'user');
+icon.name='core::user'
 
 document.body.appendChild(icon);
 ```

package/dist/src/main.d.ts

@@ -14,6 +14,7 @@ export declare class OdxIconElement extends OdxAssetElement {
         readonly values: ["currentColor"];
         readonly attributes: ["fill", "stroke"];
     }];
+    static readonly styles: string[];
     readonly namespace = "odx-icon";
     readonly defaultSet = "core";
     set name(value: OdxIconName);

package/dist/src/main.js

@@ -1,8 +1,24 @@
 import { OdxAssetElement, registerAssetElement } from '@odx/assets-utils';
+const styles = `
+  :host {
+    --rotate: 0deg;
+  }
+
+  :host {
+    transform-origin: 50% 50%;
+    transform: rotate(var(--rotate));
+  }
+
+  svg {
+    inline-size: 100%;
+    pointer-events: none;
+  }
+`;
 export class OdxIconElement extends OdxAssetElement {
     static assetAttributes = [
         { name: 'color', values: ['currentColor'], attributes: ['fill', 'stroke'] },
     ];
+    static styles = [styles];
     namespace = 'odx-icon';
     defaultSet = 'core';
     set name(value) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@odx/icons",
   "description": "A library of icon assets for ODX",
-  "version": "4.0.0-rc.20",
+  "version": "4.0.0-rc.21",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",