feat(icons): added tray-horizontal icon & tray-vertical icon

[AndreasSas]

closes #1396

What is the purpose of this pull request?

• Other: Icon update

Description

Added new tray-horizontal icon.

Icon use case

Can be used to represent mealtrays, as well as a general icon for GUI layouts

Alternative icon designs

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 Meal tray #1396 by @AndreasSas
• I've based them on the following Lucide 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.

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.

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 TrayHorizontalIcon = createLucideIcon('TrayHorizontal', [
  ["path",{"d":"M12 10v8a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2"}],
  ["path",{"d":"M15 10V6a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2"}],
  ["path",{"d":"M15 6a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2"}],
  ["path",{"d":"M4 10a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v4"}]
])

const TrayVerticalIcon = createLucideIcon('TrayVertical', [
  ["path",{"d":"M10 12h10a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h6"}],
  ["path",{"d":"M10 18a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-1a2 2 0 0 1 2-2h6"}],
  ["path",{"d":"M20 12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2"}],
  ["path",{"d":"M4 9a2 2 0 0 0-2 2v2a2 2 0 0 0 2 2"}]
])

[jguddas]

There are gaps of less than 2px.

[AndreasSas]

There are gaps of less than 2px.

Do you mean the rounded internal edges, if so adding the entire inside of the tray as straight lines feels to change the rigidity to be too stiff in my opinion

Open lucide studio

If I combine the two then the shape stays consistent up until a line width of 0.75px witht the following shape:

Open lucide studio

In this case, wouldn't it then make more sense to use solid shapes inbetween the internal rounded edges so they always stay gap-less or am I overall on the wrong track with this the design?

[jguddas]

Do you mean the rounded internal edges

Yes, looking good until .75 stoke width is just not good enough.

We have that rule, so it looks good no matter how narrow the stroke is.
The max we support is 3px, but a min is not set, this is mostly there, so people can scale the icon to however ginormous sizes they want.

[AndreasSas]

Do you mean the rounded internal edges

Yes, looking good until .75 stoke width is just not good enough.

We have that rule, so it looks good no matter how narrow the stroke is. The max we support is 3px, but a min is not set, this is mostly there, so people can scale the icon to however ginormous sizes they want.

Thanks for correcting me.
I think I've now made a better approach to these trays:

Open lucide studio

Open lucide studio