Adding stretchable alignment icons

[MarwanFr]

What is the purpose of this pull request?

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

Description

Adding Stretchable Alignment Icons (Vertical and Horizontal)

Icon use case

• Align Horizontal Stretch: This icon could be used to represent horizontal alignment with stretching. For example, it could be used to indicate that an element should stretch horizontally to fill its container.
• Align Vertical Stretch: This icon could be used to represent vertical alignment with stretching. For example, it could be used to indicate that an element should stretch vertically to fill its container.

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 # by @

• I've based them on the following Lucide icons:

• move-horizontal

• align-horizontal-space-around

• 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

Icon Diffs

Icons as code

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

const AlignHorizontalStretchIcon = createLucideIcon('AlignHorizontalStretch', [
  ["path",{"d":"M10 9L7 12L10 15"}],
  ["path",{"d":"M14 9L17 12L14 15"}],
  ["path",{"d":"M21 22V2"}],
  ["path",{"d":"M3 22V2"}],
  ["path",{"d":"M7 12L17 12"}]
])

const AlignVerticalStretchIcon = createLucideIcon('AlignVerticalStretch', [
  ["path",{"d":"M12 17V7"}],
  ["path",{"d":"M22 21H2"}],
  ["path",{"d":"M22 3H2"}],
  ["path",{"d":"M9 10L12 7L15 10"}],
  ["path",{"d":"M9 14L12 17L15 14"}]
])

[jguddas]

Use https://lucide-studio.vercel.app to optimize the icon code.

[MarwanFr]

✅

[jguddas]

The icons are a bit big, maybe someone has an idea to get them to be smaller?

[MarwanFr]

The icons are a bit big, maybe someone has an idea to get them to be smaller?

The icons seem a bit large at the ends of the arrows?

[jguddas]

The icons are a bit big, maybe someone has an idea to get them to be smaller?

The icons seem a bit large at the ends of the arrows?

The bounding box is pretty huge, you can also see it here in the Preview cohesion.

[MarwanFr]

The icons are a bit big, maybe someone has an idea to get them to be smaller?

The icons seem a bit large at the ends of the arrows?

The bounding box is pretty huge, you can also see it here in the Preview cohesion.

So I should tighten the arrow? Because the line size is the same as the other alignment icons.

[jguddas]

The icons are a bit big, maybe someone has an idea to get them to be smaller?

The icons seem a bit large at the ends of the arrows?

The bounding box is pretty huge, you can also see it here in the Preview cohesion.

So I should tighten the arrow? Because the line size is the same as the other alignment icons.

It's 2px wider than https://lucide.dev/icons/align-horizontal-space-between.

The rule for sizing is to keep it similarly sized to square and circle.

[MarwanFr]

Okay, I understand the problem now. Is this okay?

The icons are a bit big, maybe someone has an idea to get them to be smaller?

The icons seem a bit large at the ends of the arrows?

The bounding box is pretty huge, you can also see it here in the Preview cohesion.

So I should tighten the arrow? Because the line size is the same as the other alignment icons.

It's 2px wider than https://lucide.dev/icons/align-horizontal-space-between.

The rule for sizing is to keep it similarly sized to square and circle.

Ok, I see the problem. Is it good now?

[MarwanFr]

I believe there might be an issue with the verification.

[MarwanFr]

It's good, I have fixed the indentation.

[jguddas]

I think it's to dense.

[jguddas]

Also naming wise we might need to rethink the alignment icons.