Scroll V

Views Downloads - API calls 35 Lines - 628 Bytes Apr 23, 2020 interface

 .gg-scroll-v,
.gg-scroll-v::after,
.gg-scroll-v::before {
 display: block;
 box-sizing: border-box;
 width: 6px;
 height: 6px
}

.gg-scroll-v {
 position: relative;
 transform: scale(var(--ggs,1));
 border: 2px solid;
 border-radius: 10px
}

.gg-scroll-v::after,
.gg-scroll-v::before {
 content: "";
 position: absolute;
 transform: rotate(-45deg);
 left: -2px
}

.gg-scroll-v::after {
 border-bottom: 2px solid;
 border-left: 2px solid;
 bottom: -8px
}

.gg-scroll-v::before {
 border-top: 2px solid;
 border-right: 2px solid;
 top: -8px
}

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.17154 16.8182L7.75732 18.2324L12 22.475L16.2426 18.2324L14.8284 16.8182L12 19.6466L9.17154 16.8182Z" fill="currentColor" /><path d="M14.8284 7.182L16.2426 5.76779L12 1.52515L7.75733 5.76779L9.17155 7.182L12 4.35357L14.8284 7.182Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M12 9.00018C13.6569 9.00018 15 10.3433 15 12.0002C15 13.657 13.6569 15.0002 12 15.0002C10.3431 15.0002 9 13.657 9 12.0002C9 10.3433 10.3431 9.00018 12 9.00018ZM12 11.0002C12.5523 11.0002 13 11.4479 13 12.0002C13 12.5525 12.5523 13.0002 12 13.0002C11.4477 13.0002 11 12.5525 11 12.0002C11 11.4479 11.4477 11.0002 12 11.0002Z" fill="currentColor" /></svg>

 import React from 'react'import styled from 'styled-components'const StyledScrollV = styled.i` &, &::after, &::before { display: block; box-sizing: border-box; width: 6px; height: 6px; } & { position: relative; transform: scale(var(--ggs, 1)); border: 2px solid; border-radius: 10px; } &::after, &::before { content: ''; position: absolute; transform: rotate(-45deg); left: -2px; } &::after { border-bottom: 2px solid; border-left: 2px solid; bottom: -8px; } &::before { border-top: 2px solid; border-right: 2px solid; top: -8px; }`export const ScrollV = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>( (props, ref) => { return ( <><StyledScrollV {...props} ref={ref} icon-role="scroll-v" /></> ) },)

CSSSVGTSX

1	.gg-scroll-v,
2	.gg-scroll-v::after,
3	.gg-scroll-v::before {
4	display: block;
5	box-sizing: border-box;
6	width: 6px;
7	height: 6px
8	}
9
10	.gg-scroll-v {
11	position: relative;
12	transform: scale(var(--ggs,1));
13	border: 2px solid;
14	border-radius: 10px
15	}
16
17	.gg-scroll-v::after,
18	.gg-scroll-v::before {
19	content: "";
20	position: absolute;
21	transform: rotate(-45deg);
22	left: -2px
23	}
24
25	.gg-scroll-v::after {
26	border-bottom: 2px solid;
27	border-left: 2px solid;
28	bottom: -8px
29	}
30
31	.gg-scroll-v::before {
32	border-top: 2px solid;
33	border-right: 2px solid;
34	top: -8px
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
9	d="M9.17154 16.8182L7.75732 18.2324L12 22.475L16.2426 18.2324L14.8284 16.8182L12 19.6466L9.17154 16.8182Z"
10	fill="currentColor"
11	/>
12	<path
13	d="M14.8284 7.182L16.2426 5.76779L12 1.52515L7.75733 5.76779L9.17155 7.182L12 4.35357L14.8284 7.182Z"
14	fill="currentColor"
15	/>
16	<path
17	fill-rule="evenodd"
18	clip-rule="evenodd"
19	d="M12 9.00018C13.6569 9.00018 15 10.3433 15 12.0002C15 13.657 13.6569 15.0002 12 15.0002C10.3431 15.0002 9 13.657 9 12.0002C9 10.3433 10.3431 9.00018 12 9.00018ZM12 11.0002C12.5523 11.0002 13 11.4479 13 12.0002C13 12.5525 12.5523 13.0002 12 13.0002C11.4477 13.0002 11 12.5525 11 12.0002C11 11.4479 11.4477 11.0002 12 11.0002Z"
20	fill="currentColor"
21	/>
22	</svg>

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

HTMLCSSJSONXML

MarkupSVG Sprite

Scroll V ended up a pure CSS icon created by using attributes such as: .gg-scroll-v, width, height, transform, border, border-radius, border-left, border-right,
Fun to know, it has: 35 Lines of code at 628b & 465b minified. Truly amazing 😲 don't you think ?.

Scroll V

Thank you!