feat: added pilcrow-right icon

[zaaakher]

What is the purpose of this pull request?

• New Icon (a sibling to pilcrow-left)
• Bug fix
• New Feature
• Documentation update
• Other:

Description

a pilcrow with left arrow underneath it. Creating the sibling to this icon went smoothly #1667 but with the pilcrow-right there's an awkward closeness between the two shapes (see image below)

And it's happening because I didn't want to move the pilcrow icon to the left so that it remains centered (based on my judgment).

Icon use case

To switch the direction to LTR
Mostly used in rich-text editors but can also be used to switch the viewing experience of a website to LTR

Alternative icon designs

This is an alternative to the pilcrow-left icon #1667

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:
• I've based them on the following design:

This icon is using an adjust versions of pilcrow-square and move-right.

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

Only working for:
lucide-react, lucide-react-native, lucide-preact, lucide-vue-next

const PilcrowRightIcon = createLucideIcon('PilcrowRight', [
  ["path",{"d":"M10 3v11"}],
  ["path",{"d":"M10 9H7a1 1 0 0 1 0-6h8"}],
  ["path",{"d":"M14 3v11"}],
  ["path",{"d":"m18 14 4 4H2"}],
  ["path",{"d":"m22 18-4 4"}]
])

[zaaakher]

The awkwardness of the spacing between the pilcrow and the arrow is actually 1px

Which does not meet the Lucide design principles so I move the pilcrow 1px to the left to make the spacing between the elements into 2px as per the design principles.

✅ Now the spacing between the elements is 2px all around

👇 The following is the updated SVG for pilcrow-right icon

<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 8.56H7.22a2.78 2.78 0 0 1 0-5.56h7.89M10 3v11M14 3v11M21 18H3M18 15l3 3-3 3" />
</svg>

[jguddas]

The visual center is to the right of the geometric center so moving it is okay IMO

[zaaakher]

@jguddas let me know if there's anything needed from my side.

[jguddas]

I feel like with the left shift, it's fine.
But shifting pilcrow-left to the left makes it feel quite left heavy.

Suggested change

	<path d="M11 8.56H8.22a2.78 2.78 0 0 1 0-5.56h7.89M11 3v11M15 3v11M21 18H3M18 15l3 3-3 3" />
	<path d="M10 9H7a1 1 0 0 1 0-6h8" />
	<path d="M10 3v11" />
	<path d="M14 3v11" />
	<path d="M21 18H3" />
	<path d="m18 15 3 3-3 3" />

[karsa-mistmere]

Nice work splitting up those paths, @jguddas
Also see #1667 (comment)

Unfortunately the pilcrow itself is off grid and hence appears pretty blurry:

[jguddas]

My suggestion:

• split the paths
• align it with the grid
• move it a bit to the left

Result:

[ericfennis]

@zaaakher Can you apply those changes from @jguddas?

[karsa-mistmere]

Not a super big fan of the small pilcrow we already have, I think it looks pretty disproportionate, how about some alternate designs for this use case, such as:

1. Adding chevrons next to the full size pilcrow indicating direction as opposed to arrows:
   

2. Using another generic letter instead of a pilcrow:
   

[jguddas]

For the use case of text direction, it has to be based on pilcrow to make sense.

[karsa-mistmere]

use case of text direction

Whaaaaaaaat. There text and there's direction:

What else is missing? 🤪😆

[jguddas]

use case of text direction

Whaaaaaaaat. There text and there's direction:

What else is missing? 🤪😆

It's just that A can mean any form of text element and pillcrow means a paragraph.
That's also why it's so commonly used in WYSIWYG editors, most notably Microsoft Word.

[ericfennis]

@karsa-mistmere @jguddas We should keep the pillcrow.
It should be an abstract symbol. Looking at the usecase described in #1667:

To switch the direction to RTL
Mostly used in rich-text editors but can also be used to switch the viewing experience of a website to RTL (similar to how mantine does in their website header.

Most Common RTL Languages:
(Arabic, Persian, Urdu, Kashmiri, Pashto, Uighur, Hebrew, Sorani Kurdish, and Sindhi)

Those languages don't use alphabetical characters. Also for RTL, this design is mostly used according to a quick search on Google.

[ericfennis]

How about increase the size of the arrow, to match move-richt icon.
Yess it not perfectly vertically centered, but the it's not visually centered in both versions.

Open lucide studio

Previous version.

Open lucide studio

100%

[jguddas]

How about increase the size of the arrow, to match move-richt icon. Yess it not perfectly vertically centered, but the it's not visually centered in both versions.

Open lucide studio

Previous version.

Open lucide studio

100%

I like the bigger arrow 👍