feat(icons): added corner-join-miter, corner-join-round and corner-join-bevel icons

[rrod497]

Description

Added new icons: corner-join-miter, corner-join-round and corner-join-bevel.

Icon use case

I am currently working on a vector graphics app and needed those to indicate the different options of stroke-linejoin.

Plenty of drawing/design tools (including figma, affinity, corel...) have a set of icons for this use case, so decided to contribute with these designs.

Alternative icon designs

Maybe an alternative could be making it more abstract, by not showing a stroke with a width, but instead focus on the shape of the corner only.

Details

Open lucide studio

Open lucide studio

Open lucide studio

Icon Design Checklist

Concept

• I have provided valid use cases for each icon.
• I have not added any brand or logo icon.
• I have not used any hate symbols.
• I have not included any religious, war/violence related 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:

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]

🤖 ChatGPT Tags suggestions ✨

I've asked ChatGPT for some suggestions for tags.

[github-actions]

Suggestions for the corner-join-bevel icon.
Try asking it your self if you want more suggestions. Open ChatGPT
Here are the suggestions:

Suggested change

	"tags": [
	"tags": [
	"corner",
	"join",
	"bevel",
	"sharp",
	"cut",
	"border",

[github-actions]

Suggestions for the corner-join-miter icon.
Try asking it your self if you want more suggestions. Open ChatGPT
Here are the suggestions:

Suggested change

	"tags": [
	"tags": [
	"corner",
	"join",
	"miter",
	"connect",
	"border",
	"transition",
	"cut",
	"junction",

[github-actions]

Suggestions for the corner-join-round icon.
Try asking it your self if you want more suggestions. Open ChatGPT
Here are the suggestions:

Suggested change

	"tags": [
	"tags": [
	"corner",
	"join",
	"round",
	"connection",
	"curve",
	"transition",
	"connector",

[jguddas]

Suggested change

	<path d="M12 3a9 9 0 0 1 9 9v7a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-7a1 1 0 0 0-1-1H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" />
	<path d="M12 3a9 9 0 0 1 9 9v7a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-6a2 2 0 0 0-2-2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" />

Open lucide studio

[karsa-mistmere]

If we increase the inner radius, I think we should also increase the outer one to keep a constant width:

Open lucide studio

Suggested change

	<path d="M12 3a9 9 0 0 1 9 9v7a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-7a1 1 0 0 0-1-1H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" />
	<path d="M21 19a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-6a2 2 0 0 0-2-2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6a10 10 0 0 1 10 10z" />

[rrod497]

The only thing is that, the more we change the shape of the inner side of the corner, the more it departs from the "line-joining modes" concept, and approaches a generic "corner shapes". And, for that case, I think the alternative designs I mentioned in the PR are more fit for.

[jguddas]

If we increase the inner radius, I think we should also increase the outer one to keep a constant width:

Open lucide studio

I intentionally kept the radius slightly offset, felt more visually balanced.

[jguddas]

Suggested change

	<path d="M12 3a2 2 0 0 1 1.414.586l7 7A2 2 0 0 1 21 12v7a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-7a1 1 0 0 0-1-1H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z" />
	<path d="M5 11a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7a2 2 0 0 1 1.414.586l7 7A2 2 0 0 1 21 12v7a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4.172a2 2 0 0 0-.586-1.414l-1.828-1.828A2 2 0 0 0 9.172 11z" />

Open lucide studio

[github-actions]

Added or changed icons

Preview cohesion

Preview stroke widths

DPI Preview

16px (shadcn/ui)

24px (default)

32px (shadcn/ui + retina)

48px (default + retina)

Icon X-rays

Icon Diffs

Icon Symmetry

Flip Horizontal

Flip Vertical

Flip Diagonal

Rotate 180°

Icons as code

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

const CornerJoinBevelIcon = createLucideIcon('CornerJoinBevel', [
  ["path",{"d":"M12 3a2 2 0 0 1 1.414.586l7 7A2 2 0 0 1 21 12v7a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-7a1 1 0 0 0-1-1H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"}]
])

const CornerJoinMiterIcon = createLucideIcon('CornerJoinMiter', [
  ["path",{"d":"M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-7a1 1 0 0 0-1-1H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"}]
])

const CornerJoinRoundIcon = createLucideIcon('CornerJoinRound', [
  ["path",{"d":"M12 3a9 9 0 0 1 9 9v7a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-7a1 1 0 0 0-1-1H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"}]
])