@odx/icons 4.0.0-rc.33 → 4.0.0-rc.34

package/README.md

@@ -152,6 +152,26 @@ interface AssetLoaderOptions {
 loadIcons('<set-name>', options);
 ```
 
+#### Migration from Version < 4.x.x
+
+In order to migrate from versions prior to 4.x.x, you need to update your imports and usage as follows:
+
+- Remove icon font imports, as they are no longer supported.
+- Update your icon imports to use the new module structure.
+
+If you are using the CSS variant of the icons
+
+```HTML
+<i class="odx-icon" data-icon-name="user": data-icon-set="core"></i>
+```
+
+you will need to switch to the new custom element or import our compatibility script
+
+```js
+ // use this instead of '@odx/icons'
+import '@odx/icons/compat';
+```
+
 ### Browser Support
 
 This library leverages modern web technologies such as Shadow DOM for encapsulation and CSSStyleSheet.replaceSync() for efficient stylesheet updates. It targets the ES2022 specification, taking advantage of the latest JavaScript features. These technologies are widely supported in most modern browsers.

package/assets/core/career.json

@@ -0,0 +1,4 @@
+{
+  "description": "",
+  "tags": []
+}

package/assets/core/career.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="icons" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M5.47,4.78l-.03-1.01c-.02-.55.21-1.07.63-1.44.42-.37.97-.54,1.53-.47.56.07,1.06.37,1.37.83.31.46.4,1.02.25,1.55l-.28.97c-.23.82-1.06,1.35-1.92,1.24-.86-.11-1.53-.83-1.56-1.68ZM9,17h1.53l.21-2.4c.06-.65-.32-1.27-.93-1.52l-2.01-.82.65-2.43,1.84,1.76c.37.35.94.37,1.33.05l2.55-2.1-1.01-1.13-2.11,1.22-1.59-1.91c-.38-.45-.94-.72-1.53-.72h-1.86c-.57,0-1.12.25-1.5.68l-2.31,2.62c-.24.27-.31.64-.2.98l1.01,3.04,1.28-.46-.42-2.72,1.09-.93v11.8h1.63l.68-7.37,1.69.32v2.05ZM22,9v11c0,1.1-.9,2-2,2h-11v-4h3v-3h3v-3h3v-3h4ZM21,11h-1v3h-3v3h-3v3h-3v1h9c.55,0,1-.45,1-1v-9Z" style="fill: #f0f;"/>
+</svg>

package/dist/generated/core/career.d.ts

@@ -0,0 +1,8 @@
+declare const _default: import("@odx/assets-utils").OdxAsset;
+export default _default;
+declare global {
+    interface _OdxIcon {
+        'core::career': 'career';
+    }
+}
+//# sourceMappingURL=career.d.ts.map

package/dist/generated/core/career.js

@@ -0,0 +1,2 @@
+import { OdxAssetRegistry } from '@odx/assets-utils';
+export default OdxAssetRegistry.registerAsset({ namespace: 'odx-icon', set: 'core', name: 'career' }, '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m5.47 4.78-.03-1.01c-.02-.55.21-1.07.63-1.44s.97-.54 1.53-.47 1.06.37 1.37.83.4 1.02.25 1.55l-.28.97c-.23.82-1.06 1.35-1.92 1.24s-1.53-.83-1.56-1.68ZM9 17h1.53l.21-2.4c.06-.65-.32-1.27-.93-1.52l-2.01-.82.65-2.43 1.84 1.76c.37.35.94.37 1.33.05l2.55-2.1-1.01-1.13-2.11 1.22-1.59-1.91C9.08 7.27 8.52 7 7.93 7H6.07c-.57 0-1.12.25-1.5.68L2.26 10.3c-.24.27-.31.64-.2.98l1.01 3.04 1.28-.46-.42-2.72 1.09-.93v11.8h1.63l.68-7.37 1.69.32v2.05Zm13-8v11c0 1.1-.9 2-2 2H9v-4h3v-3h3v-3h3V9zm-1 2h-1v3h-3v3h-3v3h-3v1h9c.55 0 1-.45 1-1z"/></svg>');

package/dist/generated/core-metadata.js

@@ -81,6 +81,7 @@ const assetMetadata = {
     calendar: { code: '<odx-icon name="core::calendar">\n</odx-icon>' },
     camera: { code: '<odx-icon name="core::camera">\n</odx-icon>' },
     cancel: { code: '<odx-icon name="core::cancel">\n</odx-icon>' },
+    career: { code: '<odx-icon name="core::career">\n</odx-icon>' },
     'check-filled-mono': { code: '<odx-icon name="core::check-filled-mono">\n</odx-icon>' },
     'check-filled': { code: '<odx-icon name="core::check-filled">\n</odx-icon>' },
     check: { code: '<odx-icon name="core::check">\n</odx-icon>' },

package/dist/generated/core.d.ts

@@ -79,6 +79,7 @@ export declare const CalendarWeekViewIcon: import("@odx/assets-utils").OdxAsset;
 export declare const CalendarIcon: import("@odx/assets-utils").OdxAsset;
 export declare const CameraIcon: import("@odx/assets-utils").OdxAsset;
 export declare const CancelIcon: import("@odx/assets-utils").OdxAsset;
+export declare const CareerIcon: import("@odx/assets-utils").OdxAsset;
 export declare const CheckFilledMonoIcon: import("@odx/assets-utils").OdxAsset;
 export declare const CheckFilledIcon: import("@odx/assets-utils").OdxAsset;
 export declare const CheckIcon: import("@odx/assets-utils").OdxAsset;
@@ -467,6 +468,7 @@ declare global {
         'core::calendar': 'calendar';
         'core::camera': 'camera';
         'core::cancel': 'cancel';
+        'core::career': 'career';
         'core::check-filled-mono': 'check-filled-mono';
         'core::check-filled': 'check-filled';
         'core::check': 'check';

package/dist/generated/core.js

@@ -82,6 +82,7 @@ export const CalendarWeekViewIcon = OdxAssetRegistry.registerAsset({ namespace,
 export const CalendarIcon = OdxAssetRegistry.registerAsset({ namespace, set, name: 'calendar' }, '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19 3h-2V2h-2v1H9V2H7v1H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2M7 5v1h2V5h6v1h2V5h2v3H5V5zM5 19V9h14v10z"/></svg>');
 export const CameraIcon = OdxAssetRegistry.registerAsset({ namespace, set, name: 'camera' }, '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M20 5h-7.38l-1-2H5.38l-1 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2M4 19V7h1.62l1-2h3.76l1 2H20v12zm8-11c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5m0 8c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3m0-5v1c-.55 0-1 .45-1 1h-1c0-1.1.9-2 2-2"/></svg>');
 export const CancelIcon = OdxAssetRegistry.registerAsset({ namespace, set, name: 'cancel' }, '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M15.3 7.3 12 10.6 8.7 7.3 7.3 8.7l3.3 3.3-3.3 3.3 1.4 1.4 3.3-3.3 3.3 3.3 1.4-1.4-3.3-3.3 3.3-3.3zM12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2m0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8"/></svg>');
+export const CareerIcon = OdxAssetRegistry.registerAsset({ namespace, set, name: 'career' }, '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m5.47 4.78-.03-1.01c-.02-.55.21-1.07.63-1.44s.97-.54 1.53-.47 1.06.37 1.37.83.4 1.02.25 1.55l-.28.97c-.23.82-1.06 1.35-1.92 1.24s-1.53-.83-1.56-1.68ZM9 17h1.53l.21-2.4c.06-.65-.32-1.27-.93-1.52l-2.01-.82.65-2.43 1.84 1.76c.37.35.94.37 1.33.05l2.55-2.1-1.01-1.13-2.11 1.22-1.59-1.91C9.08 7.27 8.52 7 7.93 7H6.07c-.57 0-1.12.25-1.5.68L2.26 10.3c-.24.27-.31.64-.2.98l1.01 3.04 1.28-.46-.42-2.72 1.09-.93v11.8h1.63l.68-7.37 1.69.32v2.05Zm13-8v11c0 1.1-.9 2-2 2H9v-4h3v-3h3v-3h3V9zm-1 2h-1v3h-3v3h-3v3h-3v1h9c.55 0 1-.45 1-1z"/></svg>');
 export const CheckFilledMonoIcon = OdxAssetRegistry.registerAsset({ namespace, set, name: 'check-filled-mono' }, '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.49 2 2 6.49 2 12s4.49 10 10 10 10-4.49 10-10S17.51 2 12 2m4.66 5.74-5 10c-.15.3-.43.5-.76.54h-.13a1 1 0 0 1-.74-.33l-3.38-3.76c-.37-.41-.33-1.04.08-1.41s1.04-.34 1.41.08l2.4 2.67 4.34-8.69c.25-.49.85-.69 1.34-.45s.69.85.45 1.34Z"/></svg>');
 export const CheckFilledIcon = OdxAssetRegistry.registerAsset({ namespace, set, name: 'check-filled' }, '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#00dd31" d="M12 22C6.49 22 2 17.51 2 12S6.49 2 12 2s10 4.49 10 10-4.49 10-10 10"/><path fill="#002766" d="M10.76 18.29a1 1 0 0 1-.74-.33L6.64 14.2c-.37-.41-.33-1.04.08-1.41s1.04-.34 1.41.08l2.4 2.67 4.34-8.69c.25-.49.85-.69 1.34-.45s.69.85.45 1.34l-5 10c-.15.3-.43.5-.76.54h-.13Z"/></svg>');
 export const CheckIcon = OdxAssetRegistry.registerAsset({ namespace, set, name: 'check' }, '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M10.37 20.75a1 1 0 0 1-.74-.33l-5.04-5.61a1 1 0 0 1 .08-1.41.99.99 0 0 1 1.41.08L10.14 18l6.8-13.6c.25-.49.85-.69 1.34-.45.49.25.69.85.45 1.34l-7.46 14.92c-.15.3-.43.5-.76.54h-.13Z"/></svg>');

package/dist/src/compat.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=compat.d.ts.map

package/dist/src/compat.js

@@ -0,0 +1,7 @@
+import { connectAssetElement } from '@odx/assets-utils/element';
+import { OdxIconElement } from './main.js';
+connectAssetElement(OdxIconElement, {
+    nameAttribute: 'data-icon-name',
+    setAttribute: 'data-icon-set',
+    selector: '.odx-icon',
+});

package/generated/all.scss

@@ -1658,6 +1658,7 @@ $assets: ("uib-legacy::absorber-absent": "data:image/svg+xml,%3Csvg xmlns='http:
 "core::calendar": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19 3h-2V2h-2v1H9V2H7v1H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2M7 5v1h2V5h6v1h2V5h2v3H5V5zM5 19V9h14v10z'/%3E%3C/svg%3E",
 "core::camera": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M20 5h-7.38l-1-2H5.38l-1 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2M4 19V7h1.62l1-2h3.76l1 2H20v12zm8-11c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5m0 8c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3m0-5v1c-.55 0-1 .45-1 1h-1c0-1.1.9-2 2-2'/%3E%3C/svg%3E",
 "core::cancel": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M15.3 7.3 12 10.6 8.7 7.3 7.3 8.7l3.3 3.3-3.3 3.3 1.4 1.4 3.3-3.3 3.3 3.3 1.4-1.4-3.3-3.3 3.3-3.3zM12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2m0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8'/%3E%3C/svg%3E",
+"core::career": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='m5.47 4.78-.03-1.01c-.02-.55.21-1.07.63-1.44s.97-.54 1.53-.47 1.06.37 1.37.83.4 1.02.25 1.55l-.28.97c-.23.82-1.06 1.35-1.92 1.24s-1.53-.83-1.56-1.68ZM9 17h1.53l.21-2.4c.06-.65-.32-1.27-.93-1.52l-2.01-.82.65-2.43 1.84 1.76c.37.35.94.37 1.33.05l2.55-2.1-1.01-1.13-2.11 1.22-1.59-1.91C9.08 7.27 8.52 7 7.93 7H6.07c-.57 0-1.12.25-1.5.68L2.26 10.3c-.24.27-.31.64-.2.98l1.01 3.04 1.28-.46-.42-2.72 1.09-.93v11.8h1.63l.68-7.37 1.69.32v2.05Zm13-8v11c0 1.1-.9 2-2 2H9v-4h3v-3h3v-3h3V9zm-1 2h-1v3h-3v3h-3v3h-3v1h9c.55 0 1-.45 1-1z'/%3E%3C/svg%3E",
 "core::check-filled-mono": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12 2C6.49 2 2 6.49 2 12s4.49 10 10 10 10-4.49 10-10S17.51 2 12 2m4.66 5.74-5 10c-.15.3-.43.5-.76.54h-.13a1 1 0 0 1-.74-.33l-3.38-3.76c-.37-.41-.33-1.04.08-1.41s1.04-.34 1.41.08l2.4 2.67 4.34-8.69c.25-.49.85-.69 1.34-.45s.69.85.45 1.34Z'/%3E%3C/svg%3E",
 "core::check-filled": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2300dd31' d='M12 22C6.49 22 2 17.51 2 12S6.49 2 12 2s10 4.49 10 10-4.49 10-10 10'/%3E%3Cpath fill='%23002766' d='M10.76 18.29a1 1 0 0 1-.74-.33L6.64 14.2c-.37-.41-.33-1.04.08-1.41s1.04-.34 1.41.08l2.4 2.67 4.34-8.69c.25-.49.85-.69 1.34-.45s.69.85.45 1.34l-5 10c-.15.3-.43.5-.76.54h-.13Z'/%3E%3C/svg%3E",
 "core::check": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M10.37 20.75a1 1 0 0 1-.74-.33l-5.04-5.61a1 1 0 0 1 .08-1.41.99.99 0 0 1 1.41.08L10.14 18l6.8-13.6c.25-.49.85-.69 1.34-.45.49.25.69.85.45 1.34l-7.46 14.92c-.15.3-.43.5-.76.54h-.13Z'/%3E%3C/svg%3E",
@@ -3573,6 +3574,7 @@ $assets: ("uib-legacy::absorber-absent": "data:image/svg+xml,%3Csvg xmlns='http:
 "core::calendar": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19 3h-2V2h-2v1H9V2H7v1H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2M7 5v1h2V5h6v1h2V5h2v3H5V5zM5 19V9h14v10z'/%3E%3C/svg%3E",
 "core::camera": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M20 5h-7.38l-1-2H5.38l-1 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2M4 19V7h1.62l1-2h3.76l1 2H20v12zm8-11c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5m0 8c-1.65 0-3-1.35-3-3s1.35-3 3-3 3 1.35 3 3-1.35 3-3 3m0-5v1c-.55 0-1 .45-1 1h-1c0-1.1.9-2 2-2'/%3E%3C/svg%3E",
 "core::cancel": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M15.3 7.3 12 10.6 8.7 7.3 7.3 8.7l3.3 3.3-3.3 3.3 1.4 1.4 3.3-3.3 3.3 3.3 1.4-1.4-3.3-3.3 3.3-3.3zM12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2m0 18c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8'/%3E%3C/svg%3E",
+"core::career": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='m5.47 4.78-.03-1.01c-.02-.55.21-1.07.63-1.44s.97-.54 1.53-.47 1.06.37 1.37.83.4 1.02.25 1.55l-.28.97c-.23.82-1.06 1.35-1.92 1.24s-1.53-.83-1.56-1.68ZM9 17h1.53l.21-2.4c.06-.65-.32-1.27-.93-1.52l-2.01-.82.65-2.43 1.84 1.76c.37.35.94.37 1.33.05l2.55-2.1-1.01-1.13-2.11 1.22-1.59-1.91C9.08 7.27 8.52 7 7.93 7H6.07c-.57 0-1.12.25-1.5.68L2.26 10.3c-.24.27-.31.64-.2.98l1.01 3.04 1.28-.46-.42-2.72 1.09-.93v11.8h1.63l.68-7.37 1.69.32v2.05Zm13-8v11c0 1.1-.9 2-2 2H9v-4h3v-3h3v-3h3V9zm-1 2h-1v3h-3v3h-3v3h-3v1h9c.55 0 1-.45 1-1z'/%3E%3C/svg%3E",
 "core::check-filled-mono": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M12 2C6.49 2 2 6.49 2 12s4.49 10 10 10 10-4.49 10-10S17.51 2 12 2m4.66 5.74-5 10c-.15.3-.43.5-.76.54h-.13a1 1 0 0 1-.74-.33l-3.38-3.76c-.37-.41-.33-1.04.08-1.41s1.04-.34 1.41.08l2.4 2.67 4.34-8.69c.25-.49.85-.69 1.34-.45s.69.85.45 1.34Z'/%3E%3C/svg%3E",
 "core::check": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M10.37 20.75a1 1 0 0 1-.74-.33l-5.04-5.61a1 1 0 0 1 .08-1.41.99.99 0 0 1 1.41.08L10.14 18l6.8-13.6c.25-.49.85-.69 1.34-.45.49.25.69.85.45 1.34l-7.46 14.92c-.15.3-.43.5-.76.54h-.13Z'/%3E%3C/svg%3E",
 "core::chevron-down": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='m12 16.41-6.71-6.7 1.42-1.42 5.29 5.3 5.29-5.3 1.42 1.42z'/%3E%3C/svg%3E",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@odx/icons",
   "description": "A library of icon assets for ODX",
-  "version": "4.0.0-rc.33",
+  "version": "4.0.0-rc.34",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
   "homepage": "https://odx.draeger.com",
@@ -22,7 +22,7 @@
     "generate-assets": "npx generate-assets && biome check --write --no-errors-on-unmatched --files-ignore-unknown=true"
   },
   "dependencies": {
-    "@odx/assets-utils": "^3.1.0"
+    "@odx/assets-utils": "^3.2.0"
   },
   "devDependencies": {
     "@odx/assets-cli": "*",
@@ -34,6 +34,10 @@
       "import": "./dist/src/main.js",
       "types": "./dist/src/main.d.ts"
     },
+    "./compat": {
+      "import": "./dist/src/compat.js",
+      "types": "./dist/src/compat.d.ts"
+    },
     "./loader": {
       "import": "./dist/src/loader.js",
       "types": "./dist/src/loader.d.ts"