feat(icons): add wifi strength icons

[VirtCode]

What is the purpose of this pull request?

• New Icon
• Bug fix
• New Feature
• Documentation update
• Other:

Description

Adds a wifi-zero, wifi-low and wifi-high icon, which are all a variant of the wifi icon in lucide with a few bars removed. They are similar to the wifi strength indicators used in almost all operating systems, e.g. Android, iOS, Windows, etc.

Icon use case

These icons can be used to indicate specifically wifi signal strength in an operating systems UI / desktop environment. The signal-* icons often cannot be used for that, as they are usually associated with cellular signal and not wifi.

Alternative icon designs

There are no alternative designs as the icons should be "parts" of the original and complete wifi icon.

Icon Design Checklist

Concept

• I have provided valid use cases for each icon.
• I have not added any a brand or logo icon.
• I have not used any hate symbols.
• I have not included any religious or political imagery.

Author, credits & license

• The icons are solely my own creation.
• The icons were originally created in # by @
• I've based them on the following Lucide icons: wifi, inspired by the signal-* icons
• I've based them on the following design:

Naming

• I've read and followed the naming conventions
• I've named icons by what they are rather than their use case.
• I've provided meta JSON files in icons/[iconName].json.

I tried to keep the naming similar to the signal-* icons, so I used the zero, low and high suffixes.

Design

• I've read and followed the icon design guidelines
• I've made sure that the icons look sharp on low DPI displays.
• I've made sure that the icons look consistent with the icon set in size, optical volume and density.
• I've made sure that the icons are visually centered.
• I've correctly optimized all icons to three points of precision.

I just copied the wifi icon and removed the paths that were not needed for the respective icons. Visual center is not relevant in this case.

Before Submitting

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

[github-actions]

Added or changed icons

Preview cohesion

Preview stroke widths

DPI Preview (24px)

Icon X-rays

Icons as code

Works for: lucide-react, lucide-react-native, lucide-preact, lucide-vue-next

const WifiHighIcon = createLucideIcon('WifiHigh', [
  ["path",{"d":"M12 20h.01"}],
  ["path",{"d":"M5 12.859a10 10 0 0 1 14 0"}],
  ["path",{"d":"M8.5 16.429a5 5 0 0 1 7 0"}]
])

const WifiLowIcon = createLucideIcon('WifiLow', [
  ["path",{"d":"M12 20h.01"}],
  ["path",{"d":"M8.5 16.429a5 5 0 0 1 7 0"}]
])

const WifiZeroIcon = createLucideIcon('WifiZero', [
  ["path",{"d":"M12 20h.01"}]
])

[ericfennis]

LGTM!

[karsa-mistmere]

Should this not be wifi-medium with wifi geting the wifi-high tag?

[VirtCode]

I was trying to keep the naming similar to the signal icons, where there is signal and signal-high. But then they also have one variant more (5, not 4).

But I don't mind changing wifi to wifi-high etc. let me know whether I should do that.

[karsa-mistmere]

No, let's definitely keep wifi as wifi, high should only ever be a tag. But good points, let's first investigate how signal icons are named and tagged.

[VirtCode]

If we want to keep the naming consistent between these two, I would also use the -zero tag for the lowest icon (the dot), as is with signal-zero. As discussed, we also keep wifi as wifi.

So we have three options on how we want to name the two intermediate icons (we have three tags left over to work with from the signal-* icons):

• wifi-low and wifi-high (as it currently is)
• wifi-low and wifi-medium
• wifi-medium and wifi-high

Let me know which option you think is best in this case.