smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

More Arrowheads: dot, bar (#2486)

Browse source 
Co-authored-by: Jed Fox <git@jedfox.com>
Co-authored-by: Lipis <lipiridis@gmail.com>
This commit is contained in:
Steve Ruiz 2020-12-11 17:17:28 +00:00 • committed by GitHub
parent 7c7fb4903b
commit c742225f43
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 550 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

62
src/components/icons.tsx
View file

@ -725,7 +725,23 @@ export const EdgeRoundIcon = React.memo(
),
);
export const ArrowArrowheadIcon = React.memo(
export const ArrowheadNoneIcon = React.memo(
({ appearance }: { appearance: "light" | "dark" }) =>
createIcon(
<path
d="M6 10H34"
stroke={iconFillColor(appearance)}
strokeWidth={2}
fill="none"
/>,
{
width: 40,
height: 20,
},
),
);
export const ArrowheadArrowIcon = React.memo(
({
appearance,
flip = false,
@ -743,6 +759,48 @@ export const ArrowArrowheadIcon = React.memo(
<path d="M34 10H6M34 10L27 5M34 10L27 15" />
<path d="M27.5 5L34.5 10L27.5 15" />
</g>,
{ width: 40, height: 20, mirror: true },
{ width: 40, height: 20 },
),
);
export const ArrowheadDotIcon = React.memo(
({
appearance,
flip = false,
}: {
appearance: "light" | "dark";
flip?: boolean;
}) =>
createIcon(
<g
stroke={iconFillColor(appearance)}
fill={iconFillColor(appearance)}
transform={flip ? "translate(40, 0) scale(-1, 1)" : ""}
>
<path d="M32 10L6 10" strokeWidth={2} />
<circle r="4" transform="matrix(-1 0 0 1 30 10)" />
</g>,
{ width: 40, height: 20 },
),
);
export const ArrowheadBarIcon = React.memo(
({
appearance,
flip = false,
}: {
appearance: "light" | "dark";
flip?: boolean;
}) =>
createIcon(
<g transform={flip ? "translate(40, 0) scale(-1, 1)" : ""}>
<path
d="M34 10H5.99996M34 10L34 5M34 10L34 15"
stroke={iconFillColor(appearance)}
strokeWidth={2}
fill="none"
/>
</g>,
{ width: 40, height: 20 },
),
);