Compare commits

..
17 Commits
Author SHA1 Message Date
Jakob GuddasandKarsa f4d451de80 fix(icons): redesigned house icon (#2116)
* Updated icons/home.svg

* Updated icons/home.json

* Updated icons/home.svg

* Updated icons/home.svg

* Updated icons/home.json

* Updated icons/home.svg

* Updated icons/home.json

* Updated icons/home.json

* fix(icons): renamed home to house

* feat(icons): update tags

---------

Co-authored-by: Karsa <contact@karsa.org>
2024-06-21 12:52:28 +02:00
1e887bc30f feat(icons): added house-plug icon (#2123)
* Added icons/home-plug.svg

* Added icons/home-plug.json

* Update icons/home-plug.json

Co-authored-by: Karsa <contact@karsa.org>

* Updated icons/home-plug.json

* fix(icons): renamed home-plug to house-plug

* fix(icons): remove alias

* feat(icons): update tags

---------

Co-authored-by: Karsa <contact@karsa.org>
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
2024-06-21 12:51:55 +02:00
Karsa 1442b9a35b feat(icons): added house-plus icon (#2221)
* feat(icons): add house-plus icon

* feat(icons): update categories

* feat(icons): add jguddas to house-plus as co-author
2024-06-21 12:50:20 +02:00
Jakob Guddas 41fd856578 feat(ci): check uniqueness of aliases (#2223) 2024-06-21 12:30:05 +02:00
Eric Fennis 621b60b19d fix(site): Aliases redirect (#2235)
* fix: Aliases redirect

* Fix lint errors

* Apply feedback
2024-06-20 16:13:38 +02:00
Karsa b77e372f3e feat(icons): add additional rounding to sofa and armchair icons (#2228) 2024-06-20 09:51:49 +02:00
d4891a7307 feat(docs): added accessibility guide (#2122)
* feat(docs): added a11y guide

* feat(docs): add further resources

* feat(docs): add more resources & note on aria label usage

* feat(docs): update illustration button labels

* feat(docs): fix misaligned overlay in icon button alttext illustration

* fix(docs): deprecate the use of aria label on illustrations and elaborate on not using it.

* feat(docs/a11y): added code examples & rephrased aria-label resource

* feat(docs/a11y): fix typos

* Update docs/guide/advanced/accessibility.md

Co-authored-by: Karsa <contact@karsa.org>

* Apply suggestions from code review

Reformat headers, add RadixUI example.

Co-authored-by: Jakob Guddas <github@jguddas.de>

---------

Co-authored-by: Karsa <karsa@sztaki.hu>
Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
Co-authored-by: Jakob Guddas <github@jguddas.de>
2024-06-17 16:12:24 +02:00
Jakob Guddas 199987276b feat(icons): redesigned mic-vocal icon (#2198)
* Updated icons/mic-vocal.svg

* Updated icons/mic-vocal.json
2024-06-14 12:48:41 +02:00
Jakob Guddas 5647b34594 feat: narrowed type for categories in icon.schema.json (#2126) 2024-06-14 12:47:46 +02:00
Jakob GuddasandEric Fennis 439e463430 fix(icons): arcified guitar icon (#2133)
* Updated icons/guitar.svg

* Updated icons/guitar.json

* Updated icons/guitar.svg

---------

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
2024-06-14 12:24:51 +02:00
Jakob Guddas 22921304a7 Updated icons/pin-off.svg (#2211) 2024-06-14 12:16:06 +02:00
Jakob Guddas 220abb1510 Updated icons/pin.svg (#2210) 2024-06-14 12:15:29 +02:00
Jakob Guddas 91ce9221e8 fix(icons): rebuild quote icon (#2212)
* Updated icons/quote.svg

* Updated icons/quote.json

* Updated icons/quote.svg

* Update icons/quote.svg

* Updated icons/quote.json
2024-06-14 12:12:17 +02:00
Garrett PaulsandEric Fennis 904d74fe4a fix(lucide-svelte): update IconProps to include all properties of Icon component (#2182)
* fix(lucide-svelte): update IconProps to include all properties of Icon component

* fix(lucide-svelte): removed custom Icon type that conflicted with Icon component type

---------

Co-authored-by: Eric Fennis <eric.fennis@gmail.com>
2024-06-12 10:49:21 +02:00
Jakob Guddas f507644488 fix(icons): added round corner to file-archive icon (#2132)
* Updated icons/file-archive.svg

* Updated icons/file-archive.json
2024-06-10 16:25:08 +02:00
KarsaandKarsa 501b65a7a1 fix(icons): remove edit-2 alias from pen-off (#2209)
Co-authored-by: Karsa <karsa@sztaki.hu>
2024-06-10 16:14:36 +02:00
Jakob Guddas 14862fb0dc fix(icons): changed file-cog icon to match other -cog icons (#2184)
* Updated icons/file-cog.svg

* Updated icons/file-cog.json
2024-06-10 16:07:33 +02:00
40 changed files with 869 additions and 72 deletions
+10
View File
@@ -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:
+4 -4
View File
@@ -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',
+213 -2
View File
@@ -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.
![In short: Don’t rely on communicating the function of elements by icons alone. Do also provide a written description of the your interactive elements. For example: write out "On this page" on your on-page navigation element.](../../images/a11y/visible-labels.svg?raw=true)
## 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).
![In short: use a contrast ratio of at least 4.5:1](../../images/a11y/contrast.svg?raw=true)
## 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.
![For example: Don’t mark state with color, mark it with distinct visuals.](../../images/a11y/use-of-color.svg?raw=true)
## Interactivity
Ensure that interactive icons are accessible via keyboard navigation and provide clear feedback when
activated.
![](../../images/a11y/interactivity.svg?raw=true)
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.
![](../../images/a11y/target-size.svg?raw=true)
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.
![For example: Use universally understandable symbols and don't base your choice of icon on puns.](../../images/a11y/meaningfulness.svg?raw=true)
## Consistency
Maintain consistency in icon design and usage across your interface to help users learn and
understand their meanings more easily.
![For example: Don’t use the same icon for multiple distinct purposes or meanings. Don’t use different icons for the same purpose or function.](../../images/a11y/consistency.svg?raw=true)
## 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 short: provide accessible label for semantic icons, but not for decorative icons.](../../images/a11y/alttext-standalone.svg?raw=true)
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.
![](../../images/a11y/alttext-buttons.svg?raw=true)
::: 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.
![](../../images/a11y/alttext-iconbuttons.svg?raw=true)
::: 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/)
+6
View File
@@ -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).
File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 112 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 101 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 244 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 209 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 50 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 118 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 239 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 76 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 142 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 108 KiB

+49 -1
View File
@@ -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
},
+1 -1
View File
@@ -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 -1
View File
@@ -2,7 +2,8 @@
"$schema": "../icon.schema.json",
"contributors": [
"karsa-mistmere",
"danielbayley"
"danielbayley",
"jguddas"
],
"tags": [
"zip",
+4 -4
View File
@@ -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 -1
View File
@@ -2,7 +2,8 @@
"$schema": "../icon.schema.json",
"contributors": [
"karsa-mistmere",
"danielbayley"
"danielbayley",
"jguddas"
],
"tags": [
"executable",
+9 -9
View File
@@ -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

+2 -1
View File
@@ -1,7 +1,8 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"danielbayley"
"danielbayley",
"jguddas"
],
"tags": [
"acoustic",
+4 -4
View File
@@ -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

-15
View File
@@ -1,15 +0,0 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"colebemis",
"csandman",
"ericfennis"
],
"tags": [
"house",
"living"
],
"categories": [
"account"
]
}
+21
View File
@@ -0,0 +1,21 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"jguddas",
"karsa-mistmere"
],
"tags": [
"home",
"living",
"building",
"residence",
"architecture",
"autarky",
"energy"
],
"categories": [
"buildings",
"home",
"sustainability"
]
}
+16
View File
@@ -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

+22
View File
@@ -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"
]
}
+16
View File
@@ -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

+22
View File
@@ -0,0 +1,22 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"jguddas",
"karsa-mistmere"
],
"tags": [
"home",
"living",
"building",
"residence",
"architecture"
],
"categories": [
"account",
"buildings",
"home"
],
"aliases": [
"home"
]
}
+2 -2
View File
@@ -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 -3
View File
@@ -1,9 +1,7 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"it-is-not",
"danielbayley",
"karsa-mistmere"
"jguddas"
],
"tags": [
"lyrics",
+3 -2
View File
@@ -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

-8
View File
@@ -33,13 +33,5 @@
"text",
"design",
"tools"
],
"aliases": [
{
"name": "edit-2",
"deprecated": true,
"deprecationReason": "alias.name",
"toBeRemovedInVersion": "v1.0"
}
]
}
+4 -4
View File
@@ -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

+2 -2
View File
@@ -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

+3 -1
View File
@@ -1,7 +1,9 @@
{
"$schema": "../icon.schema.json",
"contributors": [
"Billiam"
"Billiam",
"jguddas",
"karsa-mistmere"
],
"tags": [
"quotation"
+2 -2
View File
@@ -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

+1 -1
View File
@@ -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

+1 -1
View File
@@ -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[]
+2 -3
View File
@@ -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>;
+2
View File
@@ -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 {