@justeattakeaway/pie-icon-button 0.24.0 → 0.24.2

package/README.md

@@ -76,7 +76,7 @@ import { PieIconButton } from '@justeattakeaway/pie-icon-button/dist/react';
 
 ## Importing Icons
 
-We recommend using the `pie-icon-button` component alongside the `pie-icons-webc` package. This package contains all of the PIE iconset as importable web components and are built to work alongside our other PIE components.
+We recommend using the `pie-icon-button` component alongside the `pie-icons-webc` package. This package contains all of the PIE icons as importable web components and are built to work alongside our other PIE components.
 
 `pie-icon-button` provides a slot into which you can pass your chosen icon, and it will automatically size it to the correct dimensions depending on the `size` of the `pie-icon-button` component.
 
@@ -86,17 +86,17 @@ To import an icon using `pie-icons-webc`, you should import the icon that you wo
 
 ```js
 import { PieIconButton } from '@justeattakeaway/pie-icon-button';
-import '@justeattakeaway/pie-icons-webc/icons/IconClose';
+import '@justeattakeaway/pie-icons-webc/IconClose';
 ```
 
 Then, in your markup, you would implement the component like this:
 
 ```html
-<pie-icon-button><icon-close /></pie-icon-button>
+<pie-icon-button><icon-close></icon-close></pie-icon-button>
 ```
 
 > [!WARNING]
-> Usually, icons imported from `pie-icons-webc` can be resized by specifying the `size` prop (such as `<icon-close size="xl" />`).
+> Usually, icons imported from `pie-icons-webc` can be resized by specifying the `size` prop (such as `<icon-close size="xl"></icon-close>`).
 > These size props will have no effect when used alongside the `pie-icon-button` component, as the icon is resized with respect to the size of the `pie-icon-button`.
 
 
@@ -113,10 +113,10 @@ In your HTML markup or JSX, you can then use these to set the properties for the
 
 ```html
 <!-- Native HTML -->
-<pie-icon-button size='small' type='button' variant='secondary'><icon-close /></pie-icon-button>
+<pie-icon-button size='small' type='button' variant='secondary'><icon-close></icon-close></pie-icon-button>
 
 <!-- JSX -->
-<PieIconButton size='small' type='button' variant='secondary'><icon-close /></PieIconButton>
+<PieIconButton size='small' type='button' variant='secondary'><icon-close></icon-close></PieIconButton>
 ```
 
 ## Events
@@ -130,21 +130,21 @@ For example, to add a click handler in various templates:
 
 ```html
 <!-- Other attributes omitted for clarity -->
-<pie-icon-button onclick="e => console.log(e)"><icon-close /></pie-icon-button>
+<pie-icon-button onclick="e => console.log(e)"><icon-close></icon-close></pie-icon-button>
 ```
 
 ### Vue templates (using Nuxt 3)
 
 ```html
 <!-- Other attributes omitted for clarity -->
-<pie-icon-button @click="handleClick"><icon-close /></pie-icon-button>
+<pie-icon-button @click="handleClick"><icon-close></icon-close></pie-icon-button>
 ```
 
 ### React templates (using Next 13)
 
 ```html
 <!-- Other attributes omitted for clarity -->
-<PieIconButton onClick={handleClick}><icon-close /></PieIconButton>
+<PieIconButton onClick={handleClick}><icon-close></icon-close></PieIconButton>
 
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-icon-button",
-  "version": "0.24.0",
+  "version": "0.24.2",
   "description": "PIE Design System Icon Button built using Web Components",
   "type": "module",
   "main": "dist/index.js",
@@ -26,7 +26,7 @@
   "author": "Just Eat Takeaway.com - Design System Team",
   "license": "Apache-2.0",
   "dependencies": {
-    "@justeattakeaway/pie-icons-webc": "0.12.0",
+    "@justeattakeaway/pie-icons-webc": "0.14.0",
     "@justeattakeaway/pie-spinner": "0.3.1",
     "@justeattakeaway/pie-webc-core": "0.13.0"
   },