Skip to content

Commit 628d4f9

Browse files
ericfennisericfennis
committed
2 parents 603274c + 0371baa commit 628d4f9

94 files changed

Lines changed: 1472 additions & 572 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ packages/**/src/icons/*.tsx
2020
packages/**/src/aliases/*.ts
2121
packages/**/src/aliases.ts
2222
!packages/**/src/aliases/index.ts
23+
packages/**/src/utils/*.ts
24+
!packages/shared/src/utils/*.ts
2325
packages/**/src/dynamicIconImports.ts
2426
packages/**/DynamicIcon.d.ts
2527
packages/**/dynamicIconImports.js

‎README.md‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,16 @@ Thank you to all the people who contributed to Lucide!
8888

8989
<a href="https://www.digitalocean.com/?refcode=b0877a2caebd&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge"><img src="docs/public/digitalocean.svg" width="200" alt="DigitalOcean Referral Badge" /></a>
9090

91+
[//]: <> (Open Collective backers)
9192
### Awesome backers 🍺
9293

93-
<a href="https://github.com/pdfme/pdfme"><img src="docs/public/sponsors/pdfme.svg" width="180" alt="pdfme sponsor badge" /></a>
94-
<a href="https://www.fina.money/"><img src="docs/public/sponsors/fina-money.png" width="180" alt="Fina Money sponsor badge" /></a>
94+
<a href="https://github.com/pdfme/pdfme"><img src="docs/public/sponsors/pdfme.svg" width="180" alt="pdfme – Open-source PDF generation library built with TypeScript and React." /></a>
95+
<a href="https://www.paxhistoria.co/"><img src="docs/public/sponsors/paxhistoria.svg?" width="180" alt="Pax Historia – An alternate history sandbox game" /></a>
96+
97+
### Backers ☕
98+
99+
<a href="https://www.fina.money/"><img src="docs/public/sponsors/fina-money.png" width="180" alt="Fina Money – Modular Finance Tracker" /></a>
100+
101+
### Other contributors 💸
102+
103+
You can find all our past and non-recurring financial contributors at [our Open Collective page](https://opencollective.com/lucide-icons).

‎docs/.vitepress/theme/components/base/Input.vue‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@ const updateShortcutSpacing = () => {
3535
});
3636
};
3737
38+
const isMac = /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
39+
3840
onMounted(updateShortcutSpacing);
3941
watch(() => props.shortcut, updateShortcutSpacing);
4042
@@ -73,6 +75,7 @@ defineExpose({
7375
v-if="type === 'search' && modelValue"
7476
class="clear-button"
7577
aria-label="Clear input"
78+
:style="{ right: isMac ? '50px' : '68px' }"
7679
>
7780
<Icon
7881
:iconNode="x"
@@ -126,7 +129,7 @@ defineExpose({
126129
127130
.clear-button {
128131
position: absolute;
129-
right: 56px;
132+
right: 68px;
130133
top: 9px;
131134
padding: 4px;
132135
transition: background-color .25s;
@@ -149,10 +152,32 @@ defineExpose({
149152
pointer-events: none;
150153
}
151154
155+
.input[type="search"]::-webkit-search-cancel-button {
156+
-webkit-appearance: none;
157+
appearance: none;
158+
display: none;
159+
}
160+
161+
.input[type="search"]::-ms-clear {
162+
display: none;
163+
}
164+
165+
.input[type="search"]::-o-clear {
166+
display: none;
167+
}
168+
169+
.input[type="search"]::-moz-clear {
170+
display: none;
171+
}
172+
152173
@media (hover: none) {
153174
.shortcut {
154175
display: none;
155176
}
177+
178+
.clear-button {
179+
right: 16px !important;
180+
}
156181
}
157182
</style>
158183

‎docs/guide/advanced/accessibility.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@ because they can quickly give information.
1010
However, not everyone can understand them easily. When using icons it is very important to consider
1111
the following aspects of accessibility.
1212

13+
::: info
14+
By default, we hide icons from screen readers using `aria-hidden="true"`.
15+
You can make them accessible yourself by following the guidelines below.
16+
:::
17+
1318
## Provide visible labels
1419

1520
Icons are a helpful tool to improve perception, but they aren't a replacement for text.

‎docs/guide/packages/lucide-angular.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -167,3 +167,15 @@ import { coconut } from '@lucide/lab';
167167
})
168168
export class AppModule { }
169169
```
170+
171+
## Accessibility
172+
173+
By default, we hide icons from screen readers using `aria-hidden="true"`.
174+
175+
You can add accessibility attributes using aria-labels.
176+
177+
```html
178+
<lucide-icon name="check" aria-label="Task completed"></lucide-icon>
179+
```
180+
181+
For best practices on accessibility, please see our [accessibility guide](../advanced/accessibility.md).

‎docs/guide/packages/lucide-astro.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -192,3 +192,19 @@ import LucideIcon from './LucideIcon.astro';
192192
193193
<LucideIcon name="Menu" />
194194
```
195+
196+
## Accessibility
197+
198+
By default, we hide icons from screen readers using `aria-hidden="true"`.
199+
200+
You can add accessibility attributes using aria-labels.
201+
202+
```jsx
203+
---
204+
import { Check } from '@lucide/astro';
205+
---
206+
207+
<Check aria-label="Task completed" />
208+
```
209+
210+
For best practices on accessibility, please see our [accessibility guide](../advanced/accessibility.md).

‎docs/guide/packages/lucide-preact.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -131,3 +131,19 @@ const App = () => {
131131

132132
export default App;
133133
```
134+
135+
## Accessibility
136+
137+
By default, we hide icons from screen readers using `aria-hidden="true"`.
138+
139+
You can add accessibility attributes using aria-labels.
140+
141+
```jsx
142+
import { Check } from 'lucide-preact';
143+
144+
const App = () => {
145+
return <Check aria-label="Task completed" />;
146+
};
147+
```
148+
149+
For best practices on accessibility, please see our [accessibility guide](../advanced/accessibility.md).

‎docs/guide/packages/lucide-react.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,3 +109,19 @@ const App = () => (
109109
<DynamicIcon name="camera" color="red" size={48} />
110110
);
111111
```
112+
113+
## Accessibility
114+
115+
By default, we hide icons from screen readers using `aria-hidden="true"`.
116+
117+
You can add accessibility attributes using aria-labels.
118+
119+
```jsx
120+
import { Check } from 'lucide-react';
121+
122+
const App = () => {
123+
return <Check aria-label="Task completed" />;
124+
};
125+
```
126+
127+
For best practices on accessibility, please see our [accessibility guide](../advanced/accessibility.md).

‎docs/guide/packages/lucide-solid.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,3 +144,19 @@ const App = () => {
144144

145145
export default App;
146146
```
147+
148+
## Accessibility
149+
150+
By default, we hide icons from screen readers using `aria-hidden="true"`.
151+
152+
You can add accessibility attributes using aria-labels.
153+
154+
```jsx
155+
import { Check } from 'lucide-solid';
156+
157+
const App = () => {
158+
return <Check aria-label="Task completed" />;
159+
};
160+
```
161+
162+
For best practices on accessibility, please see our [accessibility guide](../advanced/accessibility.md).

‎docs/guide/packages/lucide-svelte.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -331,3 +331,19 @@ The example below imports all ES Modules, so exercise caution when using it. Imp
331331
332332
<LucideIcon name="Menu" />
333333
```
334+
335+
## Accessibility
336+
337+
By default, we hide icons from screen readers using `aria-hidden="true"`.
338+
339+
You can add accessibility attributes using aria-labels.
340+
341+
```svelte
342+
<script>
343+
import { Check } from '@lucide/svelte';
344+
</script>
345+
346+
<Check aria-label="Task completed" />
347+
```
348+
349+
For best practices on accessibility, please see our [accessibility guide](../advanced/accessibility.md).

0 commit comments

Comments
 (0)