-
-
Notifications
You must be signed in to change notification settings - Fork 548
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' of https://github.com/lucide-icons/lucide into cl…
…eanup
- Loading branch information
Showing
211 changed files
with
1,852 additions
and
408 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import iconNodes from '../../data/iconNodes/index.ts'; | ||
| import { IconNodeWithKeys } from '../../theme/types'; | ||
| import iconMetaData from '../../data/iconMetaData'; | ||
| import releaseMeta from '../../data/releaseMetaData.json'; | ||
| import categories from '../../data/categoriesData.json'; | ||
|
|
||
| const dataResponse = { | ||
| icons: Object.entries(iconNodes).reduce((acc, [name, iconNode]) => { | ||
| const newIconNode = (iconNode as IconNodeWithKeys).map(([name, { key, ...attrs }]) => { | ||
| return [name, attrs]; | ||
| }); | ||
|
|
||
| acc[name] = { | ||
| iconNode: newIconNode, | ||
| aliases: (iconMetaData[name]?.aliases ?? []).map((alias) => | ||
| typeof alias === 'string' ? alias : alias.name, | ||
| ), | ||
| tags: iconMetaData[name].tags ?? [], | ||
| categories: iconMetaData[name].categories ?? [], | ||
| ...releaseMeta[name], | ||
| }; | ||
|
|
||
| return acc; | ||
| }, {}), | ||
| aliases: Object.entries(iconNodes).reduce((acc, [name]) => { | ||
| for (const alias of iconMetaData[name]?.aliases ?? []) { | ||
| acc[typeof alias === 'string' ? alias : alias.name] = name; | ||
| } | ||
|
|
||
| return acc; | ||
| }, {}), | ||
| categories, | ||
| }; | ||
|
|
||
| export default eventHandler((event) => { | ||
| setResponseHeader(event, 'Cache-Control', 'public, max-age=86400'); | ||
| setResponseHeader(event, 'Access-Control-Allow-Origin', '*'); | ||
|
|
||
| return dataResponse; | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,215 @@ | ||
| --- | ||
| title: Accessibility | ||
| --- | ||
|
|
||
| # Accessibility | ||
|
|
||
| <!-- Description how you should use svg icons keeping web accessible --> | ||
| <!-- See @JanTrichter comment about some information to write this: https://github.com/lucide-icons/lucide/pull/1521#discussion_r1332141390 --> | ||
| Icons are pictures that show what something means without using words. They can be very helpful | ||
| because they can quickly give information. | ||
|
|
||
| However, not everyone can understand them easily. When using icons it is very important to consider | ||
| the following aspects of accessibility. | ||
|
|
||
| ## Provide visible labels | ||
|
|
||
| Icons are a helpful tool to improve perception, but they aren't a replacement for text. | ||
|
|
||
| In most cases, it is probably a good idea to also provide a textual representation of your icon's | ||
| function. | ||
|
|
||
|  | ||
|
|
||
| ## Contrast | ||
|
|
||
| Ensure there's enough contrast between the icon and its background so that it's visible to people | ||
| with low vision or color vision deficiencies. | ||
|
|
||
| We recommend | ||
| following [WCAG 2.1 SC 1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html). | ||
|
|
||
|  | ||
|
|
||
| ## Use of color | ||
|
|
||
| Avoid relying solely on color to convey meaning in icons, as some users may have color blindness. | ||
| Instead, use additional visual cues like shape, shading or text. | ||
|
|
||
|  | ||
|
|
||
| ## Interactivity | ||
|
|
||
| Ensure that interactive icons are accessible via keyboard navigation and provide clear feedback when | ||
| activated. | ||
|
|
||
|  | ||
|
|
||
| In most cases this is easily done by wrapping them in icon buttons. | ||
|
|
||
| ## Minimum target size | ||
|
|
||
| Small targets can be difficult to click or touch, if your icon is interactive, we recommend that it | ||
| should have a minimum target size of 44×44 pixels. | ||
|
|
||
|  | ||
|
|
||
| In practice, this doesn't necessarily mean that the icon itself should be this large, only its | ||
| interactive wrapper element. | ||
|
|
||
| ## Meaningfulness | ||
|
|
||
| Icons should represent concepts or actions in a universally understandable way. Avoid using abstract | ||
| or ambiguous, or culture-specific symbols that might confuse some users. | ||
|
|
||
|  | ||
|
|
||
| ## Consistency | ||
|
|
||
| Maintain consistency in icon design and usage across your interface to help users learn and | ||
| understand their meanings more easily. | ||
|
|
||
|  | ||
|
|
||
| ## Text Alternatives | ||
|
|
||
| You may have to provide text labels or alternative text descriptions for icons, especially for | ||
| screen readers used by people with visual impairments. | ||
|
|
||
| However: descriptions should only be provided to standalone icons that aren't purely decorative, as | ||
| providing accessible names to non-functional elements only increases clutter when using screen | ||
| readers. | ||
|
|
||
| ### On standalone icons | ||
|
|
||
| Icons are usually very unlikely to stand on their own with no semantically meaningful wrapper | ||
| element. In most cases they will be part of a badge, button (including icon buttons), navigation | ||
| item or other interactive UI element. | ||
|
|
||
| ::: warning | ||
| In case some of your icons stand alone, and they serve a non-decorative function, make sure to | ||
| provide the appropriate accessible label for them. | ||
| ::: | ||
|
|
||
|  | ||
|
|
||
| In general try to avoid using functional icons with no interactivity, we recommend that: | ||
|
|
||
| 1) you either add a visible description next to them, or | ||
| 2) place them in badges, labels or on buttons, and at least add a tooltip to them. | ||
|
|
||
| In any such case, it is preferred that the accessible name be provided for these interactive | ||
| elements (badges, buttons, nav items etc.) only, _not_ the icons themselves. | ||
|
|
||
| ### On buttons | ||
|
|
||
| Do not provide an accessible label to icons when used on a button, as this label will be read out by | ||
| screen readers, leading to nonsensical text. | ||
|
|
||
|  | ||
|
|
||
| ::: details Code examples | ||
|
|
||
| ```tsx | ||
| // Don't do this | ||
| <button> | ||
| <Plus aria-label="Plus icon"/> | ||
| Add document | ||
| </button> | ||
|
|
||
| // Do this, just leave it | ||
| <button> | ||
| <Plus/> | ||
| Add document | ||
| </button> | ||
| ``` | ||
|
|
||
| ::: | ||
|
|
||
| ### On icon buttons | ||
|
|
||
| Icon buttons are buttons that do not contain any visible text apart from the icon itself (think of | ||
| the close button of a dialog for example). | ||
|
|
||
| As previously stated, you should provide your accessible label on the icon button itself, not the | ||
| contained icon. | ||
|
|
||
|  | ||
|
|
||
| ::: details Code examples | ||
|
|
||
| ```tsx | ||
| // Don't do this | ||
| <button class="btn-icon"> | ||
| <Home/> | ||
| </button> | ||
|
|
||
| // Don't do this either | ||
| <button class="btn-icon"> | ||
| <Home aria-label="Home icon"/> | ||
| </button> | ||
|
|
||
| // This works but might not be the best solution, see below | ||
| <button aria-label="Go to home" class="btn-icon"> | ||
| <Home/> | ||
| </button> | ||
|
|
||
| // Do this instead | ||
| <button class="btn-icon"> | ||
| <Home/> | ||
| <span class="visually-hidden">Go to home</span> | ||
| </button> | ||
| ``` | ||
|
|
||
| ::: | ||
|
|
||
| ## A note on `aria-label` | ||
|
|
||
| Although you could provide accessible labels to your elements via the `aria-label` attribute, we | ||
| generally recommend avoiding this and instead suggest that you use your chosen CSS framework's " | ||
| visually hidden" utility whenever possible. You can | ||
| [read more about why `aria-label` might not be the best solution](https://gomakethings.com/revisting-aria-label-versus-a-visually-hidden-class/). | ||
| ### Example - Radix UI | ||
|
|
||
| Use [Radix UI's built-in accessible icon utility component](https://www.radix-ui.com/primitives/docs/utilities/accessible-icon). | ||
|
|
||
| ```tsx | ||
| import { ArrowRightIcon } from 'lucide-react'; | ||
| import { AccessibleIcon } from '@radix-ui/react-accessible-icon'; | ||
|
|
||
| <AccessibleIcon label="Next item"> | ||
| <ArrowRightIcon /> | ||
| </AccessibleIcon> | ||
| ``` | ||
| ### Example - Bootstrap | ||
|
|
||
| ```html | ||
|
|
||
| <div> | ||
| <i data-lucide="phone" aria-hidden="true"></i> | ||
| <span class="visually-hidden">Phone number</span> | ||
| </div> | ||
| ``` | ||
|
|
||
| ### Example - Tailwind CSS | ||
|
|
||
| ```html | ||
|
|
||
| <div> | ||
| <i data-lucide="phone" aria-hidden="true"></i> | ||
| <span class="sr-only">Phone number</span> | ||
| </div> | ||
| ``` | ||
|
|
||
| If you're not sure, you may consider learning more | ||
| about [how to hide content.](https://www.a11yproject.com/posts/how-to-hide-content/) | ||
|
|
||
| ## Further resources | ||
|
|
||
| We also recommend checking out the following resources about accessibility: | ||
|
|
||
| - [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG21/) | ||
| - [Web Accessibility Initiative (WAI)](https://www.w3.org/WAI/) | ||
| - [Learn accessibility on web.dev](https://web.dev/learn/accessibility) | ||
| - [Inclusive Components](https://inclusive-components.design/) | ||
| - [A11yTalks](https://www.a11ytalks.com/) | ||
| - [A11y automation tracker](https://a11y-automation.dev/) | ||
| - [The A11Y Project](https://www.a11yproject.com/) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.