feat: add box select, box select with pointer, bullhorn, document los…

[mishkaio]

Add box select, box select with pointer, bullhorn, document lost, document search, lasso, lasso with pointer, newspaper

[llaenowyd]

Suggested change

	<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:2px;}</style></defs><rect class="cls-1" x="2" y="2" width="4" height="4" rx="1"/><rect class="cls-1" x="18" y="2" width="4" height="4" rx="1"/><rect class="cls-1" x="2" y="18" width="4" height="4" rx="1"/><rect class="cls-1" x="18" y="18" width="4" height="4" rx="1"/><line class="cls-1" x1="4" y1="9" x2="4" y2="15"/><line class="cls-1" x1="20" y1="9" x2="20" y2="15"/><line class="cls-1" x1="15" y1="4" x2="9" y2="4"/><line class="cls-1" x1="15" y1="20" x2="9" y2="20"/></svg>
	<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"
	>
	<rect x="2" y="2" width="4" height="4" rx="1"/>
	<rect x="18" y="2" width="4" height="4" rx="1"/>
	<rect x="2" y="18" width="4" height="4" rx="1"/>
	<rect x="18" y="18" width="4" height="4" rx="1"/>
	<line x1="4" y1="10" x2="4" y2="14"/>
	<line x1="20" y1="10" x2="20" y2="14"/>
	<line x1="14" y1="4" x2="10" y2="4"/>
	<line x1="14" y1="20" x2="10" y2="20"/>
	</svg>

[llaenowyd]

🤔

Suggested change

	<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1,.cls-2{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:2px;}.cls-1{stroke-linecap:round;}</style></defs><rect class="cls-1" x="2" y="2" width="4" height="4" rx="1"/><rect class="cls-1" x="18" y="2" width="4" height="4" rx="1"/><rect class="cls-1" x="2" y="18" width="4" height="4" rx="1"/><line class="cls-1" x1="4" y1="9" x2="4" y2="15"/><line class="cls-1" x1="20" y1="9" x2="20" y2="11"/><line class="cls-1" x1="15" y1="4" x2="9" y2="4"/><line class="cls-1" x1="11" y1="20" x2="9" y2="20"/><path class="cls-2" d="M14.33,22h-.09a.35.35,0,0,1-.24-.32v-10a.34.34,0,0,1,.33-.34.32.32,0,0,1,.21.08l7.34,6a.33.33,0,0,1-.21.59H17.18l-2.57,3.85A.35.35,0,0,1,14.33,22Z"/></svg>
	<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"
	>
	<rect rx="1" height="4" width="4" y="2" x="2" />
	<rect rx="1" height="4" width="4" y="2" x="18" />
	<rect rx="1" height="4" width="4" y="18" x="2" />
	<line y2="14" x2="4" y1="10" x1="4" />
	<line y2="13" x2="20" y1="10" x1="20" />
	<line y2="4" x2="10" y1="4" x1="14" />
	<line y2="20" x2="10" y1="20" x1="11" />
	<path d="m 15,14 v 8 l 2.25,-3 H 20.8 Z" />
	</svg>

[llaenowyd]

using the same cursor from the suggested lasso+cursor

to get 2 pixels spacing the bottom line becomes a circle, looks wrong to me, but I'm not sure, so here's that for comparison

Suggested change

	<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1,.cls-2{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:2px;}.cls-1{stroke-linecap:round;}</style></defs><rect class="cls-1" x="2" y="2" width="4" height="4" rx="1"/><rect class="cls-1" x="18" y="2" width="4" height="4" rx="1"/><rect class="cls-1" x="2" y="18" width="4" height="4" rx="1"/><line class="cls-1" x1="4" y1="9" x2="4" y2="15"/><line class="cls-1" x1="20" y1="9" x2="20" y2="11"/><line class="cls-1" x1="15" y1="4" x2="9" y2="4"/><line class="cls-1" x1="11" y1="20" x2="9" y2="20"/><path class="cls-2" d="M14.33,22h-.09a.35.35,0,0,1-.24-.32v-10a.34.34,0,0,1,.33-.34.32.32,0,0,1,.21.08l7.34,6a.33.33,0,0,1-.21.59H17.18l-2.57,3.85A.35.35,0,0,1,14.33,22Z"/></svg>
	<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"
	>
	<rect rx="1" height="4" width="4" y="2" x="2" />
	<rect rx="1" height="4" width="4" y="2" x="18" />
	<rect rx="1" height="4" width="4" y="18" x="2" />
	<line y2="14" x2="4" y1="10" x1="4" />
	<line y2="12" x2="20" y1="10" x1="20" />
	<line y2="4" x2="10" y1="4" x1="14" />
	<line y2="20" x2="10" y1="20" x1="10" />
	<path d="M14.33 22h-.09a.35.35 0 01-.24-.32v-10a.34.34 0 01.33-.34c.08 0 .15.03.21.08l7.34 6a.33.33 0 01-.21.59h-4.49l-2.57 3.85a.35.35 0 01-.28.14v0z" />
	</svg>

[mishkaio]

Thanks for all of the info. Sorry for requiring all the hand holding. If I could make a suggestion here - I don't think the box select looks very good broken apart like that. I need to learn more about how to output clean svg code as clearly Illustrator doesn't handle it very well....but I would like to interject that since the box and anchor point corners are technically not separate elements AND it looks not so cohesive with 2px spacing that we change to something more like this:

[ericfennis]

Can you both post an 100% scale version of it, maybe that better to judge

[mishkaio]

[ericfennis]

Hmm I don't know. I don't think I will refer this to a "Select box". I think the one with the gaps look more like you can select something.

This icon can also present an square draw icon.

Btw we can also go more this way? Feel free to post more of your work in our discord channel!

[ericfennis]

@mishkaio Can you maybe open a seperate pull-request for the lasso tool, and document search and newspaper?
I think this thread is getting to messy if we reviewing those as well and beside that I think some of those Icons we can maybe merge.

[ericfennis]

Due to inactivity I merged only the lasso icons, if you want to contribute the other icons please open separated PR's for it.