@siemens/ix-icons 0.0.0-pr-69-20250130132918 → 0.0.0-pr-69-20250205111227

package/README.md

@@ -12,38 +12,67 @@ SPDX-License-Identifier: MIT
 
 ## Usage
 
-### Installation
+### With Siemens Industrial Experience design system
 
-First install the package `@siemens/ix-icons` in your project (e.g. `npm install --save @siemens/ix-icons`).
+If you are also using the library [Siemens Industrial Experience](https://github.com/siemens/ix/), no additional  project setup will be neccessary. The packages `@siemens/ix-angular`, `@siemens/ix-react` or `@siemens/ix-vue` will take care of setting up the icon library for you.
 
-Then load the icon component:
+### Without Siemens Industrial Experience design system
 
-```javascript
-import { defineCustomElements } from '@siemens/ix-icons/loader';
+If you want to use `@siemens/ix-icons` without `@siemens/ix` you need to follow these steps:
+
+#### Using CDN
 
-(async () => {
-  await defineCustomElements();
-})();
+Place the following `<script>` near the end of your page, right before the closing </body> tag.
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@siemens/ix-icons@%5E3.0.0/dist/ix-icons/ix-icons.esm.js"></script>
+<script nomodule src="https://cdn.jsdelivr.net/npm/@siemens/ix-icons@%5E3.0.0/dist/ix-icons/ix-icons.js"></script>
 ```
 
-### Angular / Web Components
+Now you can render icons in you applicaton:
 
 ```html
-<ix-icon name="rocket"></ix-icon>
+<ix-icon name="star"></ix-icon>
 ```
 
-### React and Vue
+### Using a package manager like `npm`/`pnpm`/`yarn`
 
-```tsx
-import { rocket } from '@siemens/ix-icons/icons';
+First install the package `@siemens/ix-icons@latest` in your project (e.g. `npm install --save @siemens/ix-icons`).
+
+Then load the icon component:
 
-<ix-icon name={rocket}></ix-icon>;
+```javascript
+import { defineCustomElements } from '@siemens/ix-icons/loader';
+
+// Register Web Component <ix-icon></ix-icon>
+defineCustomElements();
 ```
 
-### Use `ix-icon` component with custom svg's
+### Prepare your project
+
+1. **Copy SVG Files:**
+   Copy all SVG files located under `node_modules/@siemens/ix-icons/svg` to an asset folder in your project. This allows the `ix-icon` component to fetch the images.
+
+2. **Alternative Method:**
+   Alternatively, you can use the `addIcons` function to load specific icons directly in your code. For example:
+
+   ```javascript
+   import { addIcons } from '@siemens/ix-icons';
+   import { iconStar } from '@siemens/ix-icons/icons';
+
+   addIcons({ iconStar });
+   ```
+
+   ```html
+   <ix-icon name="star"></ix-icon>
+   ```
+
+   You only need to add the same icon once. Additional calls to `addIcons` will not add redundant copies of the same icons to the collection.
+
+### Use the `ix-icon` component with custom SVG's
 
 ```tsx
-<ix-icon name="/your/asset/path/my-icon.svg"></ix-icon>;
+<ix-icon name="/your/asset/path/my-icon.svg"></ix-icon>
 ```
 
 ## Development
@@ -66,6 +95,6 @@ Contributions, issues and feature requests are welcome!
 
 ## 📝 License
 
-Copyright © 2019–2023 [Siemens AG](https://www.siemens.com/).
+Copyright © 2019–2025 [Siemens AG](https://www.siemens.com/).
 
 This project is MIT licensed.

package/components/index.js

@@ -1,4 +1,3 @@
-export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
-export { I as Icon, b as addIconToCache, a as addIcons, d as defineCustomElement } from './icon.js';
+export { I as Icon, d as addIconToCache, c as addIcons, e as defineCustomElement, g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-da232b5d.js';
 
 //# sourceMappingURL=index.js.map

package/components/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":";","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"index.js","mappings":"","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/ix-icon.js

@@ -1,4 +1,4 @@
-import { I as Icon, d as defineCustomElement$1 } from './icon.js';
+import { I as Icon, e as defineCustomElement$1 } from './p-da232b5d.js';
 
 const IxIcon = Icon;
 const defineCustomElement = defineCustomElement$1;