fix(icons): changed piggy-bank icon (#3044)

* Updated icons/piggy-bank.svg

* Updated icons/piggy-bank.json

.github/workflows/ci.yml

@@ -9,7 +9,7 @@ on:
 
 jobs:
   create-release:
-    if: github.repository == 'lucide-icons/lucide' && ${{ !startsWith(github.event.head_commit.message, 'fix(icons)') }}
+    if: github.repository == 'lucide-icons/lucide' && ${{ startsWith(github.event.head_commit.message, 'feat(icons)') }}
     runs-on: ubuntu-latest
     outputs:
       VERSION: ${{ steps.new-version.outputs.NEW_VERSION }}

docs/guide/installation.md

@@ -184,8 +184,11 @@ npm install lucide-preact
 bun add lucide-preact
 ```
 
+
 :::
 
+For more details, see the [documentation](packages/lucide-preact.md).
+
 ## Astro
 
 Implementation of the lucide icon library for Astro applications.

icons/layers-2.json

@@ -1,7 +1,8 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "danielbayley"
+    "danielbayley",
+    "jguddas"
   ],
   "tags": [
     "stack",

icons/layers-2.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="m16.02 12 5.48 3.13a1 1 0 0 1 0 1.74L13 21.74a2 2 0 0 1-2 0l-8.5-4.87a1 1 0 0 1 0-1.74L7.98 12" />
-  <path d="M13 13.74a2 2 0 0 1-2 0L2.5 8.87a1 1 0 0 1 0-1.74L11 2.26a2 2 0 0 1 2 0l8.5 4.87a1 1 0 0 1 0 1.74Z" />
+  <path d="M13 13.74a2 2 0 0 1-2 0L2.5 8.87a1 1 0 0 1 0-1.74L11 2.26a2 2 0 0 1 2 0l8.5 4.87a1 1 0 0 1 0 1.74z" />
+  <path d="m20 14.285 1.5.845a1 1 0 0 1 0 1.74L13 21.74a2 2 0 0 1-2 0l-8.5-4.87a1 1 0 0 1 0-1.74l1.5-.845" />
 </svg>

icons/piggy-bank.json

@@ -1,7 +1,8 @@
 {
   "$schema": "../icon.schema.json",
   "contributors": [
-    "ericfennis"
+    "ericfennis",
+    "jamiemlaw"
   ],
   "tags": [
     "money",

icons/piggy-bank.svg

@@ -9,7 +9,7 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M19 5c-1.5 0-2.8 1.4-3 2-3.5-1.5-11-.3-11 5 0 1.8 0 3 2 4.5V20h4v-2h3v2h4v-4c1-.5 1.7-1 2-2h2v-4h-2c0-1-.5-1.5-1-2V5z" />
-  <path d="M2 9v1c0 1.1.9 2 2 2h1" />
-  <path d="M16 11h.01" />
+  <path d="M11 17h3v2a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-3a3.16 3.16 0 0 0 2-2h1a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1h-1a5 5 0 0 0-2-4V3a4 4 0 0 0-3.2 1.6l-.3.4H11a6 6 0 0 0-6 6v1a5 5 0 0 0 2 4v3a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1z" />
+  <path d="M16 10h.01" />
+  <path d="M2 8v1a2 2 0 0 0 2 2h1" />
 </svg>

icons/text-cursor-input.svg

@@ -9,9 +9,9 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <path d="M5 4h1a3 3 0 0 1 3 3 3 3 0 0 1 3-3h1" />
-  <path d="M13 20h-1a3 3 0 0 1-3-3 3 3 0 0 1-3 3H5" />
-  <path d="M5 16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1" />
+  <path d="M12 20h-1a2 2 0 0 1-2-2 2 2 0 0 1-2 2H6" />
   <path d="M13 8h7a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-7" />
-  <path d="M9 7v10" />
+  <path d="M5 16H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h1" />
+  <path d="M6 4h1a2 2 0 0 1 2 2 2 2 0 0 1 2-2h1" />
+  <path d="M9 6v12" />
 </svg>

icons/toggle-left.json

@@ -3,7 +3,8 @@
   "contributors": [
     "colebemis",
     "karsa-mistmere",
-    "ericfennis"
+    "ericfennis",
+    "jamiemlaw"
   ],
   "tags": [
     "on",

icons/toggle-left.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <rect width="20" height="12" x="2" y="6" rx="6" ry="6" />
-  <circle cx="8" cy="12" r="2" />
+  <circle cx="9" cy="12" r="3" />
+  <rect width="20" height="14" x="2" y="5" rx="7" />
 </svg>

icons/toggle-right.json

@@ -3,7 +3,8 @@
   "contributors": [
     "colebemis",
     "karsa-mistmere",
-    "ericfennis"
+    "ericfennis",
+    "jamiemlaw"
   ],
   "tags": [
     "on",

icons/toggle-right.svg

@@ -9,6 +9,6 @@
   stroke-linecap="round"
   stroke-linejoin="round"
 >
-  <rect width="20" height="12" x="2" y="6" rx="6" ry="6" />
-  <circle cx="16" cy="12" r="2" />
+  <circle cx="15" cy="12" r="3" />
+  <rect width="20" height="14" x="2" y="5" rx="7" />
 </svg>

packages/lucide-react/src/Icon.ts

@@ -1,7 +1,7 @@
 import { createElement, forwardRef } from 'react';
 import defaultAttributes from './defaultAttributes';
 import { IconNode, LucideProps } from './types';
-import { mergeClasses } from '@lucide/shared';
+import { mergeClasses, hasA11yProp } from '@lucide/shared';
 
 interface IconComponentProps extends LucideProps {
   iconNode: IconNode;
@@ -46,6 +46,7 @@ const Icon = forwardRef<SVGSVGElement, IconComponentProps>(
         stroke: color,
         strokeWidth: absoluteStrokeWidth ? (Number(strokeWidth) * 24) / Number(size) : strokeWidth,
         className: mergeClasses('lucide', className),
+        ...(!children && !hasA11yProp(rest) && { 'aria-hidden': 'true' }),
         ...rest,
       },
       [

packages/lucide-react/tests/Icon.spec.tsx

@@ -31,3 +31,63 @@ describe('Using Icon Component', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 });
+
+describe('Icon Component Accessibility', () => {
+  it('should not have aria-hidden prop when aria prop is present', async () => {
+    const { container } = render(
+      <Icon
+        iconNode={airVent}
+        size={48}
+        stroke="red"
+        absoluteStrokeWidth
+        aria-label="Air conditioning"
+      />,
+    );
+
+    expect(container.firstChild).not.toHaveAttribute('aria-hidden');
+  });
+
+  it('should not have aria-hidden prop when title prop is present', async () => {
+    const { container } = render(
+      <Icon
+        iconNode={airVent}
+        size={48}
+        stroke="red"
+        absoluteStrokeWidth
+        // @ts-expect-error
+        title="Air conditioning"
+      />,
+    );
+
+    expect(container.firstChild).not.toHaveAttribute('aria-hidden');
+  });
+
+  it('should not have aria-hidden prop when there are children that could be a <title> element', async () => {
+    const { container } = render(
+      <Icon
+        iconNode={airVent}
+        size={48}
+        stroke="red"
+        absoluteStrokeWidth
+      >
+        <title>Some title</title>
+      </Icon>,
+    );
+
+    expect(container.firstChild).not.toHaveAttribute('aria-hidden');
+  });
+
+  it('should never override aria-hidden prop', async () => {
+    const { container } = render(
+      <Icon
+        iconNode={airVent}
+        size={48}
+        stroke="red"
+        absoluteStrokeWidth
+        aria-hidden={false}
+      />,
+    );
+
+    expect(container.firstChild).toHaveAttribute('aria-hidden', 'false');
+  });
+});

packages/lucide-react/tests/__snapshots__/Icon.spec.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`Using Icon Component > should render icon and match snapshot 1`] = `
 <svg
+  aria-hidden="true"
   class="lucide"
   fill="none"
   height="48"

packages/lucide-react/tests/__snapshots__/createLucideIcon.spec.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`Using createLucideIcon > should create a component from an iconNode 1`] = `
 <svg
+  aria-hidden="true"
   class="lucide lucide-air-vent lucide-AirVent"
   fill="none"
   height="24"
@@ -30,6 +31,7 @@ exports[`Using createLucideIcon > should create a component from an iconNode 1`]
 
 exports[`Using createLucideIcon > should create a component from an iconNode with iconName 1`] = `
 <svg
+  aria-hidden="true"
   class="lucide lucide-air-vent"
   fill="none"
   height="24"
@@ -58,6 +60,7 @@ exports[`Using createLucideIcon > should create a component from an iconNode wit
 
 exports[`Using createLucideIcon > should include backwards compatible className 1`] = `
 <svg
+  aria-hidden="true"
   class="lucide lucide-layout2 lucide-layout-2"
   fill="none"
   height="24"

packages/lucide-react/tests/__snapshots__/lucide-react.spec.tsx.snap

@@ -11,6 +11,7 @@ exports[`Using lucide icon components > should adjust the size, stroke color and
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-grid3x3 lucide-grid-3x3"
+     aria-hidden="true"
 >
   <rect width="18"
         height="18"
@@ -41,6 +42,7 @@ exports[`Using lucide icon components > should not scale the strokeWidth when ab
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-grid3x3 lucide-grid-3x3"
+     aria-hidden="true"
 >
   <rect width="18"
         height="18"
@@ -71,6 +73,7 @@ exports[`Using lucide icon components > should render an component 1`] = `
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-grid3x3 lucide-grid-3x3"
+     aria-hidden="true"
 >
   <rect width="18"
         height="18"

packages/shared/src/utils.ts

@@ -49,3 +49,17 @@ export const mergeClasses = <ClassType = string | undefined | null>(...classes:
     })
     .join(' ')
     .trim();
+
+/**
+ * Check if a component has an accessibility prop
+ *
+ * @param {object} props
+ * @returns {boolean} Whether the component has an accessibility prop
+ */
+export const hasA11yProp = (props: Record<string, any>) => {
+  for (const prop in props) {
+    if (prop.startsWith('aria-') || prop === 'role' || prop === 'title') {
+      return true;
+    }
+  }
+};