Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
f4d451de80 | ||
|
|
1e887bc30f | ||
|
|
1442b9a35b | ||
|
|
41fd856578 | ||
|
|
621b60b19d | ||
|
|
b77e372f3e | ||
|
|
d4891a7307 | ||
|
|
199987276b | ||
|
|
5647b34594 | ||
|
|
439e463430 | ||
|
|
22921304a7 | ||
|
|
220abb1510 | ||
|
|
91ce9221e8 | ||
|
|
904d74fe4a | ||
|
|
f507644488 | ||
|
|
501b65a7a1 | ||
|
|
14862fb0dc |
@@ -68,6 +68,16 @@ jobs:
|
||||
# input: +++ b/icons/accessibility.json%0A@@ -2,0 +3 @@%0A+ "contributors": ["hi"],%0A@@ -13 +14 @@%0A+}%0A
|
||||
# output: ::$ANNOTATION_SEVERITY file=icons/accessibility.json,line=2,endLine=3,title=$ANNOTATION_TITLE::$ANNOTATION_DESCRIPTION%0A%0A+ "contributors": ["hi"],%0A@@ -13 +14 @@%0A+}%0A
|
||||
|
||||
lint-aliases:
|
||||
name: Check Uniqueness of Aliases
|
||||
runs-on: ubuntu-latest
|
||||
permissions:
|
||||
contents: read
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
- name: Check Uniqueness of Aliases
|
||||
run: ! cat <(printf "%s\\n" icons/*.json | while read -r name; do basename "$name" .json; done) <(jq -cr 'select(.aliases) | .aliases[] | if type=="string" then . else .name end' icons/*.json) | sort | uniq -c | grep -ve '^ 1 '
|
||||
|
||||
generate-changed-icons-comment:
|
||||
runs-on: ubuntu-latest
|
||||
permissions:
|
||||
|
||||
@@ -31,10 +31,10 @@ const sidebar: UserConfig<DefaultTheme.Config>['themeConfig']['sidebar'] = {
|
||||
{
|
||||
text: 'Advanced',
|
||||
items: [
|
||||
// {
|
||||
// text: 'Accessibility',
|
||||
// link: '/guide/advanced/accessibility'
|
||||
// },
|
||||
{
|
||||
text: 'Accessibility',
|
||||
link: '/guide/advanced/accessibility',
|
||||
},
|
||||
{
|
||||
text: 'Global styling',
|
||||
link: '/guide/advanced/global-styling',
|
||||
|
||||
@@ -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/)
|
||||
|
||||
@@ -20,6 +20,12 @@ As new applications with specific features arise, Lucide aims to provide a compl
|
||||
|
||||
In addition to design, code is also important. Assets like icons can significantly increase bandwidth usage in web projects. With the growing internet, Lucide has a responsibility to keep their assets as small as possible. To achieve this, Lucide uses SVG compression and specific code architecture for tree-shaking abilities. After tree-shaking, you only ship the icons you used, which helps to keep software distribution size to a minimum.
|
||||
|
||||
## Accessibility
|
||||
|
||||
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. Read more about [how to use Lucide in an accessible way](./advanced/accessibility.md).
|
||||
|
||||
## Official Packages
|
||||
|
||||
Lucide's official packages are designed to work on different platforms, making it easier for users to integrate icons into their projects. The packages are available for various technologies, including [Web (Vanilla)](https://lucide.dev/guide/packages/lucide), [React](https://lucide.dev/guide/packages/lucide-react), [React Native](https://lucide.dev/guide/packages/lucide-react-native), [Vue](https://lucide.dev/guide/packages/lucide-vue), [Vue 3](https://lucide.dev/guide/packages/lucide-vue-next), [Svelte](https://lucide.dev/guide/packages/lucide-svelte),[Preact](https://lucide.dev/guide/packages/lucide-preact), [Solid](https://lucide.dev/guide/packages/lucide-solid), [Angular](https://lucide.dev/guide/packages/lucide-angular), [NodeJS](https://lucide.dev/guide/packages/lucide-static#nodejs) and [Flutter](https://lucide.dev/guide/packages/lucide-flutter).
|
||||
|
||||
|
After Width: | Height: | Size: 112 KiB |
|
After Width: | Height: | Size: 101 KiB |
|
After Width: | Height: | Size: 244 KiB |
|
After Width: | Height: | Size: 209 KiB |
|
After Width: | Height: | Size: 50 KiB |
|
After Width: | Height: | Size: 118 KiB |
|
After Width: | Height: | Size: 239 KiB |
|
After Width: | Height: | Size: 76 KiB |
|
After Width: | Height: | Size: 142 KiB |
|
After Width: | Height: | Size: 108 KiB |
@@ -53,7 +53,55 @@
|
||||
"categories": {
|
||||
"type": "array",
|
||||
"items": {
|
||||
"type": "string"
|
||||
"type": "string",
|
||||
"enum": [
|
||||
"accessibility",
|
||||
"account",
|
||||
"animals",
|
||||
"arrows",
|
||||
"brands",
|
||||
"buildings",
|
||||
"charts",
|
||||
"communication",
|
||||
"connectivity",
|
||||
"currency",
|
||||
"cursors",
|
||||
"design",
|
||||
"development",
|
||||
"devices",
|
||||
"emoji",
|
||||
"files",
|
||||
"food-beverage",
|
||||
"furniture",
|
||||
"gaming",
|
||||
"home",
|
||||
"layout",
|
||||
"mail",
|
||||
"maps",
|
||||
"maths",
|
||||
"medical",
|
||||
"money",
|
||||
"multimedia",
|
||||
"nature",
|
||||
"navigation",
|
||||
"notifications",
|
||||
"people",
|
||||
"photography",
|
||||
"science",
|
||||
"seasons",
|
||||
"security",
|
||||
"shapes",
|
||||
"shopping",
|
||||
"social",
|
||||
"sports",
|
||||
"sustainability",
|
||||
"text",
|
||||
"time",
|
||||
"tools",
|
||||
"transportation",
|
||||
"travel",
|
||||
"weather"
|
||||
]
|
||||
},
|
||||
"uniqueItems": true
|
||||
},
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M19 9V6a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v3" />
|
||||
<path d="M3 16a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5a2 2 0 0 0-4 0v2H7v-2a2 2 0 0 0-4 0Z" />
|
||||
<path d="M3 16a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5a2 2 0 0 0-4 0v1.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V11a2 2 0 0 0-4 0z" />
|
||||
<path d="M5 18v2" />
|
||||
<path d="M19 18v2" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 401 B After Width: | Height: | Size: 437 B |
@@ -2,7 +2,8 @@
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"karsa-mistmere",
|
||||
"danielbayley"
|
||||
"danielbayley",
|
||||
"jguddas"
|
||||
],
|
||||
"tags": [
|
||||
"zip",
|
||||
|
||||
@@ -9,10 +9,10 @@
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M16 22h2a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v18" />
|
||||
<path d="M14 2v4a2 2 0 0 0 2 2h4" />
|
||||
<circle cx="10" cy="20" r="2" />
|
||||
<path d="M10 7V6" />
|
||||
<path d="M10 12v-1" />
|
||||
<path d="M10 18v-2" />
|
||||
<path d="M10 7V6" />
|
||||
<path d="M14 2v4a2 2 0 0 0 2 2h4" />
|
||||
<path d="M15.5 22H18a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v16a2 2 0 0 0 .274 1.01" />
|
||||
<circle cx="10" cy="20" r="2" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 419 B After Width: | Height: | Size: 442 B |
@@ -2,7 +2,8 @@
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"karsa-mistmere",
|
||||
"danielbayley"
|
||||
"danielbayley",
|
||||
"jguddas"
|
||||
],
|
||||
"tags": [
|
||||
"executable",
|
||||
|
||||
@@ -9,15 +9,15 @@
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v2" />
|
||||
<path d="M14 2v4a2 2 0 0 0 2 2h4" />
|
||||
<path d="m3.2 12.9-.9-.4" />
|
||||
<path d="m3.2 15.1-.9.4" />
|
||||
<path d="M4.677 21.5a2 2 0 0 0 1.313.5H18a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v2.5" />
|
||||
<path d="m4.9 11.2-.4-.9" />
|
||||
<path d="m4.9 16.8-.4.9" />
|
||||
<path d="m7.5 10.3-.4.9" />
|
||||
<path d="m7.5 17.7-.4-.9" />
|
||||
<path d="m9.7 12.5-.9.4" />
|
||||
<path d="m9.7 15.5-.9-.4" />
|
||||
<circle cx="6" cy="14" r="3" />
|
||||
<path d="M6 10v1" />
|
||||
<path d="M6 17v1" />
|
||||
<path d="M10 14H9" />
|
||||
<path d="M3 14H2" />
|
||||
<path d="m9 11-.88.88" />
|
||||
<path d="M3.88 16.12 3 17" />
|
||||
<path d="m9 17-.88-.88" />
|
||||
<path d="M3.88 11.88 3 11" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 558 B After Width: | Height: | Size: 614 B |
@@ -1,7 +1,8 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"danielbayley"
|
||||
"danielbayley",
|
||||
"jguddas"
|
||||
],
|
||||
"tags": [
|
||||
"acoustic",
|
||||
|
||||
@@ -9,9 +9,9 @@
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="m20 7 1.7-1.7a1 1 0 0 0 0-1.4l-1.6-1.6a1 1 0 0 0-1.4 0L17 4v3Z" />
|
||||
<path d="m17 7-5.1 5.1" />
|
||||
<circle cx="11.5" cy="12.5" r=".5" fill="currentColor" />
|
||||
<path d="M6 12a2 2 0 0 0 1.8-1.2l.4-.9C8.7 8.8 9.8 8 11 8c2.8 0 5 2.2 5 5 0 1.2-.8 2.3-1.9 2.8l-.9.4A2 2 0 0 0 12 18a4 4 0 0 1-4 4c-3.3 0-6-2.7-6-6a4 4 0 0 1 4-4" />
|
||||
<path d="m11.9 12.1 4.514-4.514" />
|
||||
<path d="M20.1 2.3a1 1 0 0 0-1.4 0l-1.114 1.114A2 2 0 0 0 17 4.828v1.344a2 2 0 0 1-.586 1.414A2 2 0 0 1 17.828 7h1.344a2 2 0 0 0 1.414-.586L21.7 5.3a1 1 0 0 0 0-1.4z" />
|
||||
<path d="m6 16 2 2" />
|
||||
<path d="M8.2 9.9C8.7 8.8 9.8 8 11 8c2.8 0 5 2.2 5 5 0 1.2-.8 2.3-1.9 2.8l-.9.4A2 2 0 0 0 12 18a4 4 0 0 1-4 4c-3.3 0-6-2.7-6-6a4 4 0 0 1 4-4 2 2 0 0 0 1.8-1.2z" />
|
||||
<circle cx="11.5" cy="12.5" r=".5" fill="currentColor" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 568 B After Width: | Height: | Size: 669 B |
@@ -1,15 +0,0 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"colebemis",
|
||||
"csandman",
|
||||
"ericfennis"
|
||||
],
|
||||
"tags": [
|
||||
"house",
|
||||
"living"
|
||||
],
|
||||
"categories": [
|
||||
"account"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"jguddas",
|
||||
"karsa-mistmere"
|
||||
],
|
||||
"tags": [
|
||||
"home",
|
||||
"living",
|
||||
"building",
|
||||
"residence",
|
||||
"architecture",
|
||||
"autarky",
|
||||
"energy"
|
||||
],
|
||||
"categories": [
|
||||
"buildings",
|
||||
"home",
|
||||
"sustainability"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M10 12V8.964" />
|
||||
<path d="M14 12V8.964" />
|
||||
<path d="M15 12a1 1 0 0 1 1 1v2a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-2a1 1 0 0 1 1-1z" />
|
||||
<path d="M8.5 21H5a2 2 0 0 1-2-2v-9a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-2" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 500 B |
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"karsa-mistmere",
|
||||
"jguddas"
|
||||
],
|
||||
"tags": [
|
||||
"home",
|
||||
"living",
|
||||
"medical",
|
||||
"new",
|
||||
"addition",
|
||||
"building",
|
||||
"residence",
|
||||
"architecture"
|
||||
],
|
||||
"categories": [
|
||||
"buildings",
|
||||
"account",
|
||||
"medical"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M13.22 2.416a2 2 0 0 0-2.511.057l-7 5.999A2 2 0 0 0 3 10v9a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7.354" />
|
||||
<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" />
|
||||
<path d="M15 6h6" />
|
||||
<path d="M18 3v6" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 424 B |
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"jguddas",
|
||||
"karsa-mistmere"
|
||||
],
|
||||
"tags": [
|
||||
"home",
|
||||
"living",
|
||||
"building",
|
||||
"residence",
|
||||
"architecture"
|
||||
],
|
||||
"categories": [
|
||||
"account",
|
||||
"buildings",
|
||||
"home"
|
||||
],
|
||||
"aliases": [
|
||||
"home"
|
||||
]
|
||||
}
|
||||
@@ -9,6 +9,6 @@
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
||||
<polyline points="9 22 9 12 15 12 15 22" />
|
||||
<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" />
|
||||
<path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 316 B After Width: | Height: | Size: 391 B |
@@ -1,9 +1,7 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"it-is-not",
|
||||
"danielbayley",
|
||||
"karsa-mistmere"
|
||||
"jguddas"
|
||||
],
|
||||
"tags": [
|
||||
"lyrics",
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="m12 8-9.04 9.06a2.82 2.82 0 1 0 3.98 3.98L16 12" />
|
||||
<circle cx="17" cy="7" r="5" />
|
||||
<path d="m11 7.601-5.994 8.19a1 1 0 0 0 .1 1.298l.817.818a1 1 0 0 0 1.314.087L15.09 12" />
|
||||
<path d="M16.5 21.174C15.5 20.5 14.372 20 13 20c-2.058 0-3.928 2.356-6 2-2.072-.356-2.775-3.369-1.5-4.5" />
|
||||
<circle cx="16" cy="7" r="5" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 305 B After Width: | Height: | Size: 445 B |
@@ -33,13 +33,5 @@
|
||||
"text",
|
||||
"design",
|
||||
"tools"
|
||||
],
|
||||
"aliases": [
|
||||
{
|
||||
"name": "edit-2",
|
||||
"deprecated": true,
|
||||
"deprecationReason": "alias.name",
|
||||
"toBeRemovedInVersion": "v1.0"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -9,8 +9,8 @@
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<line x1="2" x2="22" y1="2" y2="22" />
|
||||
<line x1="12" x2="12" y1="17" y2="22" />
|
||||
<path d="M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V17h12" />
|
||||
<path d="M15 9.34V6h1a2 2 0 0 0 0-4H7.89" />
|
||||
<path d="M12 17v5" />
|
||||
<path d="M15 9.34V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H7.89" />
|
||||
<path d="m2 2 20 20" />
|
||||
<path d="M9 9v1.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h11" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 416 B After Width: | Height: | Size: 408 B |
@@ -9,6 +9,6 @@
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<line x1="12" x2="12" y1="17" y2="22" />
|
||||
<path d="M5 17h14v-1.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V6h1a2 2 0 0 0 0-4H8a2 2 0 0 0 0 4h1v4.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24Z" />
|
||||
<path d="M12 17v5" />
|
||||
<path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 417 B After Width: | Height: | Size: 450 B |
@@ -1,7 +1,9 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"Billiam"
|
||||
"Billiam",
|
||||
"jguddas",
|
||||
"karsa-mistmere"
|
||||
],
|
||||
"tags": [
|
||||
"quotation"
|
||||
|
||||
@@ -9,6 +9,6 @@
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z" />
|
||||
<path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z" />
|
||||
<path d="M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z" />
|
||||
<path d="M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 506 B After Width: | Height: | Size: 491 B |
@@ -10,7 +10,7 @@
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M20 9V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v3" />
|
||||
<path d="M2 11v5a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-5a2 2 0 0 0-4 0v2H6v-2a2 2 0 0 0-4 0Z" />
|
||||
<path d="M2 16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-5a2 2 0 0 0-4 0v1.5a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5V11a2 2 0 0 0-4 0z" />
|
||||
<path d="M4 18v2" />
|
||||
<path d="M20 18v2" />
|
||||
<path d="M12 4v9" />
|
||||
|
||||
|
Before Width: | Height: | Size: 426 B After Width: | Height: | Size: 461 B |
@@ -7,7 +7,7 @@
|
||||
export let size: number | string = 24
|
||||
export let strokeWidth: number | string = 2
|
||||
export let absoluteStrokeWidth: boolean = false
|
||||
export let iconNode: IconNode
|
||||
export let iconNode: IconNode = []
|
||||
|
||||
const mergeClasses = <ClassType = string | undefined | null>(
|
||||
...classes: ClassType[]
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import type { SvelteComponent } from 'svelte';
|
||||
import type { SVGAttributes, SvelteHTMLElements } from 'svelte/elements';
|
||||
|
||||
export type Attrs = SVGAttributes<SVGSVGElement>;
|
||||
@@ -6,11 +5,13 @@ export type Attrs = SVGAttributes<SVGSVGElement>;
|
||||
export type IconNode = [elementName: keyof SvelteHTMLElements, attrs: Attrs][];
|
||||
|
||||
export interface IconProps extends Attrs {
|
||||
name?: string;
|
||||
color?: string;
|
||||
size?: number | string;
|
||||
strokeWidth?: number | string;
|
||||
absoluteStrokeWidth?: boolean;
|
||||
class?: string;
|
||||
iconNode?: IconNode;
|
||||
}
|
||||
|
||||
export type IconEvents = {
|
||||
@@ -20,5 +21,3 @@ export type IconEvents = {
|
||||
export type IconSlots = {
|
||||
default: {};
|
||||
};
|
||||
|
||||
export type Icon = SvelteComponent<IconProps, IconEvents, IconSlots>;
|
||||
|
||||
@@ -12,6 +12,8 @@ const iconMetaData = await getIconMetaData(path.resolve(scriptDir, '../icons'));
|
||||
const iconAliasesRedirectRoutes = Object.entries(iconMetaData)
|
||||
.filter(([, { aliases }]) => aliases?.length)
|
||||
.map(([iconName, { aliases }]) => {
|
||||
aliases = aliases.map((alias) => (typeof alias === 'object' ? alias.name : alias));
|
||||
|
||||
const aliasRouteMatches = aliases.join('|');
|
||||
|
||||
return {
|
||||
|
||||