Swap Vertical

1K Views 42 Downloads - 8 API calls 35 Lines - 702 Bytes Apr 23, 2020 arrows interface

 .gg-swap-vertical {
 box-sizing: border-box;
 position: relative;
 display: block;
 transform: rotate(90deg) scale(var(--ggs,1));
 box-shadow:
 -2px 2px 0,
 2px -2px 0;
 width: 6px;
 height: 2px
}

.gg-swap-vertical::after,
.gg-swap-vertical::before {
 content: "";
 display: block;
 box-sizing: border-box;
 position: absolute;
 width: 0;
 height: 0;
 border-top: 3px solid transparent;
 border-bottom: 3px solid transparent
}

.gg-swap-vertical::before {
 border-left: 3px solid;
 top: -4px;
 right: -4px
}

.gg-swap-vertical::after {
 border-right: 3px solid;
 bottom: -4px;
 left: -4px
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 16H13.5L13.5 10H15.5L15.5 16H17L14.5 19L12 16Z" fill="currentColor" /><path d="M8 8H9.5L9.5 14H11.5L11.5 8H13L10.5 5L8 8Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledSwapVertical = styled.i` & { box-sizing: border-box; position: relative; display: block; transform: rotate(90deg) scale(var(--ggs, 1)); box-shadow: -2px 2px 0, 2px -2px 0; width: 6px; height: 2px; } &::after, &::before { content: ''; display: block; box-sizing: border-box; position: absolute; width: 0; height: 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent; } &::before { border-left: 3px solid; top: -4px; right: -4px; } &::after { border-right: 3px solid; bottom: -4px; left: -4px; }`export const SwapVertical = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledSwapVertical {...props} ref={ref} icon-role="swap-vertical" /></> ) },)

CSSSVGTSX

1	.gg-swap-vertical {
2	box-sizing: border-box;
3	position: relative;
4	display: block;
5	transform: rotate(90deg) scale(var(--ggs,1));
6	box-shadow:
7	-2px 2px 0,
8	2px -2px 0;
9	width: 6px;
10	height: 2px
11	}
12
13	.gg-swap-vertical::after,
14	.gg-swap-vertical::before {
15	content: "";
16	display: block;
17	box-sizing: border-box;
18	position: absolute;
19	width: 0;
20	height: 0;
21	border-top: 3px solid transparent;
22	border-bottom: 3px solid transparent
23	}
24
25	.gg-swap-vertical::before {
26	border-left: 3px solid;
27	top: -4px;
28	right: -4px
29	}
30
31	.gg-swap-vertical::after {
32	border-right: 3px solid;
33	bottom: -4px;
34	left: -4px
35	}

1	<svg
2	width="24"
3	height="24"
4	viewBox="0 0 24 24"
5	fill="none"
6	xmlns="http://www.w3.org/2000/svg"
7	>
8	<path d="M12 16H13.5L13.5 10H15.5L15.5 16H17L14.5 19L12 16Z" fill="currentColor" />
9	<path d="M8 8H9.5L9.5 14H11.5L11.5 8H13L10.5 5L8 8Z" fill="currentColor" />
10	</svg>

1	import React from 'react'
2	import styled from 'styled-components'
3
4	const StyledSwapVertical = styled.i`
5	& {
6	box-sizing: border-box;
7	position: relative;
8	display: block;
9	transform: rotate(90deg) scale(var(--ggs, 1));
10	box-shadow: -2px 2px 0, 2px -2px 0;
11	width: 6px;
12	height: 2px;
13	}
14	&::after,
15	&::before {
16	content: '';
17	display: block;
18	box-sizing: border-box;
19	position: absolute;
20	width: 0;
21	height: 0;
22	border-top: 3px solid transparent;
23	border-bottom: 3px solid transparent;
24	}
25	&::before {
26	border-left: 3px solid;
27	top: -4px;
28	right: -4px;
29	}
30	&::after {
31	border-right: 3px solid;
32	bottom: -4px;
33	left: -4px;
34	}
35	`
36
37	export const SwapVertical = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
38	(props, ref) => {
39	return (
40	<>
41	<StyledSwapVertical {...props} ref={ref} icon-role="swap-vertical" />
42	</>
43	)
44	},
45	)
46

HTMLCSSJSONXML

MarkupSVG Sprite

Swap Vertical turned into a magic pure CSS icon created by using features like: transform, box-shadow, width, height, border-top, border-bottom,
Fun to know, it has: 35 Lines of code at 702b & 510b minified. Actually stunning 🤩 .

Swap Vertical

Thank you!