docs: improve badges #2704

realguse · 2024-12-21T20:12:28Z

Originally in #2674

What is the purpose of this pull request?

Documentation update

Description

This PR aims to update the badges to a more modern style (flat-square and for-the-badge).

Before Submitting

I've read the Contribution Guidelines.
I've checked if there was an existing PR that solves the same issue.

* fix(icons): arcified paintbrush * Update icons/paintbrush.svg Co-authored-by: Jakob Guddas <github@jguddas.de> --------- Co-authored-by: Karsa <karsa@sztaki.hu> Co-authored-by: Jakob Guddas <github@jguddas.de> Co-authored-by: Eric Fennis <eric.fennis@gmail.com>

* Updated icons/tractor.svg * Updated icons/tractor.json * Updated icons/tractor.svg * Updated icons/tractor.svg --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com>

* Updated icons/sigma.svg * Update icons/sigma.svg Co-authored-by: Karsa <contact@karsa.org> --------- Co-authored-by: Karsa <contact@karsa.org>

* Updated icons/signpost.svg * Updated icons/signpost.svg * Updated icons/signpost.json

* feat(icons): add tv-minimal-play icon, rename tv-2 to tv-minimal * feat(icons/tv-minimal-play): add more tags * feat(icons): add deprecation reason to tv-2 alias --------- Co-authored-by: Karsa <karsa@sztaki.hu> Co-authored-by: Jakob Guddas <github@jguddas.de>

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

Co-authored-by: Karsa <karsa@sztaki.hu>

* feat(icons): added calendar-cog icon * feat(icons): cleanup calendar-cog icon * feat(icons): fix indentation of calendar-cog icon --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com>

Co-authored-by: Karsa <karsa@sztaki.hu>

* fix(scripts): fixes writeIconRelatedIcons.mjs * fix(scripts): fixes linting --------- Co-authored-by: Karsa <karsa@sztaki.hu>

Co-authored-by: Karsa <karsa@sztaki.hu>

…cide-icons#2186)

…de-icons#2184) * Updated icons/file-cog.svg * Updated icons/file-cog.json

Co-authored-by: Karsa <karsa@sztaki.hu>

) * Updated icons/file-archive.svg * Updated icons/file-archive.json

…n component (lucide-icons#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>

* Updated icons/quote.svg * Updated icons/quote.json * Updated icons/quote.svg * Update icons/quote.svg * Updated icons/quote.json

* Updated icons/guitar.svg * Updated icons/guitar.json * Updated icons/guitar.svg --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com>

…2126)

* Updated icons/mic-vocal.svg * Updated icons/mic-vocal.json

* 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>

…de-icons#2228)

* fix: Aliases redirect * Fix lint errors * Apply feedback

* feat(icons): add house-plus icon * feat(icons): update categories * feat(icons): add jguddas to house-plus as co-author

…#2610) Co-authored-by: Eric Fennis <eric.fennis@gmail.com>

realguse · 2024-12-21T21:05:06Z

@jguddas, based on you contrast "issue", i have not found any solution. There doesn't seem to be a option to change the foreground/textcolor, sorry

jguddas · 2024-12-21T21:24:08Z

I did some testing, the dynamic color switch logic seams to only trigger when using hex values like by for example adding &color=febcda to the end of the url, weird.

Maybe worth doing A bug report for this, needs more testing tho, can't right now, I'm only on the phone.

What I suggest we do is find the hex value of the current color and try if adding it to the url helps.

realguse · 2024-12-21T21:55:20Z

Yeah, look likes that's the problem. I'll only add the color param to the ones that actually switches color automatically to keep things simple

realguse · 2024-12-21T22:02:31Z

After testing the color param on the badges, none of them changed their foreground color. So that means the contrast is sufficient enough according to shields.io

jguddas · 2024-12-22T12:12:25Z

README.md

-  <a href="https://www.figma.com/community/plugin/939567362549682242/Lucide-Icons"><img src="https://img.shields.io/badge/Figma-F24E1E?logo=figma&logoColor=white" alt="figma installs"></a>
-  <a href="https://github.com/lucide-icons/lucide/actions/workflows/release.yml"><img src="https://github.com/lucide-icons/lucide/actions/workflows/release.yml/badge.svg" alt="build status"></a>
-  <a href="https://discord.gg/EH6nSts"><img src="https://img.shields.io/discord/723074157486800936?label=chat&logo=discord&logoColor=%23ffffff&colorB=%237289DA" alt="discord chat"></a>
+  <a href="https://github.com/lucide-icons/lucide/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/lucide?style=for-the-badge" alt="license"></a>


Suggested change

<a href="https://github.com/lucide-icons/lucide/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/lucide?style=for-the-badge" alt="license"></a>

<a href="https://github.com/lucide-icons/lucide/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/lucide?style=for-the-badge&color=008c14" alt="license"></a>

I like @JoshuaKGoldberg s suggestion of changing the background colors to be a bit darker.
badges/shields#5497

What do you think?

Yeah, that feels more right. I'll do it now

I feel like #008c14 gets too dark, another option is to use brightgreen which looks like this:

Minimum contrast to get me to be happy is 4.5.

We can try other shades and colors tho.

Possible colors:

We could also make all the badges the lucide brand color, still pretty low tho.

Or should we even care about the contrast, there's a bunch of repos (and I mean a bunch) using brightgreen and white (fg) in their badges

If it's not necessary to be readable, it's not necessary and should be removed entirely, I'm pretty strongly opinionated on this one :)

Found some colors with high enough (very close at least) contrast ratio. I'm not updating the other ones until we've found the final colors

realguse · 2024-12-25T16:32:19Z

Im so sorry if i pinged all of you now, I do not know what happened

Quilljou and others added 30 commits June 5, 2024 23:22

Add copy component name (lucide-icons#2169)

91ac4f8

fix(icons): arcified tractor icon (lucide-icons#2112)

478e826

* Updated icons/tractor.svg * Updated icons/tractor.json * Updated icons/tractor.svg * Updated icons/tractor.svg --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com>

feat(icons): added biceps-flexed icon (lucide-icons#2127)

b862f7b

fix(icons): added rounding to sigma icon (lucide-icons#2149)

3b5764c

* Updated icons/sigma.svg * Update icons/sigma.svg Co-authored-by: Karsa <contact@karsa.org> --------- Co-authored-by: Karsa <contact@karsa.org>

fix(icons): added round corners to signpost icon (lucide-icons#2002)

075828c

* Updated icons/signpost.svg * Updated icons/signpost.svg * Updated icons/signpost.json

meta(icons): Added "liquid" tag to Droplet icon (lucide-icons#2152)

514dca4

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

fix(icons): fix mismatched lines in dna & dna-off (lucide-icons#2187)

4110e8e

Co-authored-by: Karsa <karsa@sztaki.hu>

fix(icons): fixes duplicate tv-2 alias (lucide-icons#2188)

767e970

Co-authored-by: Karsa <karsa@sztaki.hu>

feat(icons): added calendar-cog icon (lucide-icons#2176)

d4d8150

* feat(icons): added calendar-cog icon * feat(icons): cleanup calendar-cog icon * feat(icons): fix indentation of calendar-cog icon --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com>

fix(site): fixes open collective logo in light mode (lucide-icons#2189)

7c9dd88

Co-authored-by: Karsa <karsa@sztaki.hu>

fix(scripts): fixes writeIconRelatedIcons.mjs (lucide-icons#2190)

ff5f5d0

* fix(scripts): fixes writeIconRelatedIcons.mjs * fix(scripts): fixes linting --------- Co-authored-by: Karsa <karsa@sztaki.hu>

fix(icons): fixes/removes zero long path segments (lucide-icons#2205)

f43ea44

Co-authored-by: Karsa <karsa@sztaki.hu>

feat(icons): add pen-off pencil-off, update pen icons w/ rounding (lu…

6c38f81

…cide-icons#2186)

fix(icons): changed file-cog icon to match other -cog icons (luci…

ede8e64

…de-icons#2184) * Updated icons/file-cog.svg * Updated icons/file-cog.json

fix(icons): remove edit-2 alias from pen-off (lucide-icons#2209)

e008ff7

Co-authored-by: Karsa <karsa@sztaki.hu>

fix(icons): added round corner to file-archive icon (lucide-icons#2132

1377c04

) * Updated icons/file-archive.svg * Updated icons/file-archive.json

fix(icons): rebuild quote icon (lucide-icons#2212)

e653235

* Updated icons/quote.svg * Updated icons/quote.json * Updated icons/quote.svg * Update icons/quote.svg * Updated icons/quote.json

Updated icons/pin.svg (lucide-icons#2210)

9b7d07c

Updated icons/pin-off.svg (lucide-icons#2211)

cc58ebf

fix(icons): arcified guitar icon (lucide-icons#2133)

92a80b3

* Updated icons/guitar.svg * Updated icons/guitar.json * Updated icons/guitar.svg --------- Co-authored-by: Eric Fennis <eric.fennis@gmail.com>

feat: narrowed type for categories in icon.schema.json (lucide-icons#…

af3a236

…2126)

feat(icons): redesigned mic-vocal icon (lucide-icons#2198)

b4317bf

* Updated icons/mic-vocal.svg * Updated icons/mic-vocal.json

feat(icons): add additional rounding to sofa and armchair icons (luci…

ea81419

…de-icons#2228)

fix(site): Aliases redirect (lucide-icons#2235)

2b33489

* fix: Aliases redirect * Fix lint errors * Apply feedback

feat(ci): check uniqueness of aliases (lucide-icons#2223)

3737890

feat(icons): added house-plus icon (lucide-icons#2221)

6c62297

* feat(icons): add house-plus icon * feat(icons): update categories * feat(icons): add jguddas to house-plus as co-author

feat(icons): upgrade snowflake icons to match real life (lucide-icons…

e6b4ae2

…#2610) Co-authored-by: Eric Fennis <eric.fennis@gmail.com>

realguse mentioned this pull request Dec 21, 2024

docs(readme): improve packages table #2674

Closed

3 tasks

realguse force-pushed the improve-badges branch from bec8078 to 9e3b0da Compare December 21, 2024 20:46

realguse marked this pull request as ready for review December 21, 2024 20:50

jguddas reviewed Dec 22, 2024

View reviewed changes

realguse closed this Dec 22, 2024

realguse force-pushed the improve-badges branch from 431da51 to ea0ac2f Compare December 22, 2024 12:24

docs: improve badges

81ca634

vercel bot deployed to Preview December 22, 2024 12:39 View deployment

realguse reopened this Dec 22, 2024

realguse added 2 commits December 22, 2024 13:40

docs: make figma icon white

8487b1e

fix: spelling mistake

ce24811

realguse force-pushed the improve-badges branch from 6b02b1c to 238d484 Compare December 22, 2024 13:09

docs: improve contrast ratio

8120386

realguse closed this Dec 25, 2024

realguse force-pushed the improve-badges branch from cee4da2 to 8120386 Compare December 25, 2024 16:29

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: improve badges #2704

docs: improve badges #2704

realguse commented Dec 21, 2024

realguse commented Dec 21, 2024

jguddas commented Dec 21, 2024 •

edited

Loading

realguse commented Dec 21, 2024

realguse commented Dec 21, 2024

jguddas Dec 22, 2024

realguse Dec 22, 2024

realguse Dec 22, 2024

jguddas Dec 22, 2024 •

edited

Loading

realguse Dec 22, 2024

realguse Dec 22, 2024

jguddas Dec 22, 2024

realguse Dec 22, 2024 •

edited

Loading

jguddas Dec 22, 2024

realguse Dec 23, 2024

realguse commented Dec 25, 2024

	<a href="https://github.com/lucide-icons/lucide/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/lucide?style=for-the-badge" alt="license"></a>
	<a href="https://github.com/lucide-icons/lucide/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/lucide?style=for-the-badge&color=008c14" alt="license"></a>

docs: improve badges #2704

docs: improve badges #2704

Conversation

realguse commented Dec 21, 2024

What is the purpose of this pull request?

Description

Before Submitting

realguse commented Dec 21, 2024

jguddas commented Dec 21, 2024 • edited Loading

realguse commented Dec 21, 2024

realguse commented Dec 21, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jguddas Dec 22, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

realguse Dec 22, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

realguse commented Dec 25, 2024

jguddas commented Dec 21, 2024 •

edited

Loading

jguddas Dec 22, 2024 •

edited

Loading

realguse Dec 22, 2024 •

edited

Loading