Fix missing icons (#3654)

Fix more missing icons.

### Change Type

- [x] `sdk` — Changes the tldraw SDK
- [x] `bugfix` — Bug fix

assets/icons/icon/lock.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 14.0215C5 13.4692 5.44772 13.0215 6 13.0215H24C24.5523 13.0215 25 13.4692 25 14.0215V26.0215C25 26.5738 24.5523 27.0215 24 27.0215H6C5.44772 27.0215 5 26.5738 5 26.0215V14.0215Z" stroke="black" stroke-width="2" stroke-linejoin="round"/>
+<path d="M21 13.0219V9.28841C21 5.42747 18.8637 2.97851 15.0028 2.97851V2.97851V2.97851C11.1423 2.97851 9 5.43346 9 9.29393V13.0219" stroke="black" stroke-width="2"/>
+</svg>

assets/icons/icon/share-1.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 15C11 17.2091 9.20914 19 7 19C4.79086 19 3 17.2091 3 15C3 12.7909 4.79086 11 7 11C9.20914 11 11 12.7909 11 15ZM27 7C27 9.20914 25.2091 11 23 11C20.7909 11 19 9.20914 19 7C19 4.79086 20.7909 3 23 3C25.2091 3 27 4.79086 27 7ZM27 23C27 25.2091 25.2091 27 23 27C20.7909 27 19 25.2091 19 23C19 20.7909 20.7909 19 23 19C25.2091 19 27 20.7909 27 23Z" stroke="black" stroke-width="2"/>
+<path d="M19 21L11 16M19 9L11 14" stroke="black" stroke-width="2"/>
+</svg>

assets/icons/icon/unlock.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 15C5 14.4477 5.44772 14 6 14H24C24.5523 14 25 14.4477 25 15V27C25 27.5523 24.5523 28 24 28H6C5.44772 28 5 27.5523 5 27V15Z" stroke="black" stroke-width="2" stroke-linejoin="round"/>
+<path d="M21 14V8.27203C21 4.41155 18.8577 2 14.9972 2C12.8772 2 11.2772 2.69495 10.2653 3.99997C9.43436 5.07167 9 6.52554 9 8.2665" stroke="black" stroke-width="2"/>
+</svg>

packages/assets/imports.js

@@ -111,6 +111,7 @@ import iconsHorizontalAlignStart from './icons/icon/horizontal-align-start.svg'
 import iconsInfoCircle from './icons/icon/info-circle.svg'
 import iconsLeading from './icons/icon/leading.svg'
 import iconsLink from './icons/icon/link.svg'
+import iconsLock from './icons/icon/lock.svg'
 import iconsMenu from './icons/icon/menu.svg'
 import iconsMinus from './icons/icon/minus.svg'
 import iconsMixed from './icons/icon/mixed.svg'
@@ -124,6 +125,7 @@ import iconsRotateCcw from './icons/icon/rotate-ccw.svg'
 import iconsRotateCw from './icons/icon/rotate-cw.svg'
 import iconsSendBackward from './icons/icon/send-backward.svg'
 import iconsSendToBack from './icons/icon/send-to-back.svg'
+import iconsShare1 from './icons/icon/share-1.svg'
 import iconsSizeExtraLarge from './icons/icon/size-extra-large.svg'
 import iconsSizeLarge from './icons/icon/size-large.svg'
 import iconsSizeMedium from './icons/icon/size-medium.svg'
@@ -154,6 +156,7 @@ import iconsTrash from './icons/icon/trash.svg'
 import iconsTwitter from './icons/icon/twitter.svg'
 import iconsUndo from './icons/icon/undo.svg'
 import iconsUngroup from './icons/icon/ungroup.svg'
+import iconsUnlock from './icons/icon/unlock.svg'
 import iconsVerticalAlignEnd from './icons/icon/vertical-align-end.svg'
 import iconsVerticalAlignMiddle from './icons/icon/vertical-align-middle.svg'
 import iconsVerticalAlignStart from './icons/icon/vertical-align-start.svg'
@@ -297,6 +300,7 @@ export function getAssetUrlsByImport(opts) {
 			'info-circle': formatAssetUrl(iconsInfoCircle, opts),
 			leading: formatAssetUrl(iconsLeading, opts),
 			link: formatAssetUrl(iconsLink, opts),
+			lock: formatAssetUrl(iconsLock, opts),
 			menu: formatAssetUrl(iconsMenu, opts),
 			minus: formatAssetUrl(iconsMinus, opts),
 			mixed: formatAssetUrl(iconsMixed, opts),
@@ -310,6 +314,7 @@ export function getAssetUrlsByImport(opts) {
 			'rotate-cw': formatAssetUrl(iconsRotateCw, opts),
 			'send-backward': formatAssetUrl(iconsSendBackward, opts),
 			'send-to-back': formatAssetUrl(iconsSendToBack, opts),
+			'share-1': formatAssetUrl(iconsShare1, opts),
 			'size-extra-large': formatAssetUrl(iconsSizeExtraLarge, opts),
 			'size-large': formatAssetUrl(iconsSizeLarge, opts),
 			'size-medium': formatAssetUrl(iconsSizeMedium, opts),
@@ -340,6 +345,7 @@ export function getAssetUrlsByImport(opts) {
 			twitter: formatAssetUrl(iconsTwitter, opts),
 			undo: formatAssetUrl(iconsUndo, opts),
 			ungroup: formatAssetUrl(iconsUngroup, opts),
+			unlock: formatAssetUrl(iconsUnlock, opts),
 			'vertical-align-end': formatAssetUrl(iconsVerticalAlignEnd, opts),
 			'vertical-align-middle': formatAssetUrl(iconsVerticalAlignMiddle, opts),
 			'vertical-align-start': formatAssetUrl(iconsVerticalAlignStart, opts),

packages/assets/imports.vite.js

@@ -111,6 +111,7 @@ import iconsHorizontalAlignStart from './icons/icon/horizontal-align-start.svg?u
 import iconsInfoCircle from './icons/icon/info-circle.svg?url'
 import iconsLeading from './icons/icon/leading.svg?url'
 import iconsLink from './icons/icon/link.svg?url'
+import iconsLock from './icons/icon/lock.svg?url'
 import iconsMenu from './icons/icon/menu.svg?url'
 import iconsMinus from './icons/icon/minus.svg?url'
 import iconsMixed from './icons/icon/mixed.svg?url'
@@ -124,6 +125,7 @@ import iconsRotateCcw from './icons/icon/rotate-ccw.svg?url'
 import iconsRotateCw from './icons/icon/rotate-cw.svg?url'
 import iconsSendBackward from './icons/icon/send-backward.svg?url'
 import iconsSendToBack from './icons/icon/send-to-back.svg?url'
+import iconsShare1 from './icons/icon/share-1.svg?url'
 import iconsSizeExtraLarge from './icons/icon/size-extra-large.svg?url'
 import iconsSizeLarge from './icons/icon/size-large.svg?url'
 import iconsSizeMedium from './icons/icon/size-medium.svg?url'
@@ -154,6 +156,7 @@ import iconsTrash from './icons/icon/trash.svg?url'
 import iconsTwitter from './icons/icon/twitter.svg?url'
 import iconsUndo from './icons/icon/undo.svg?url'
 import iconsUngroup from './icons/icon/ungroup.svg?url'
+import iconsUnlock from './icons/icon/unlock.svg?url'
 import iconsVerticalAlignEnd from './icons/icon/vertical-align-end.svg?url'
 import iconsVerticalAlignMiddle from './icons/icon/vertical-align-middle.svg?url'
 import iconsVerticalAlignStart from './icons/icon/vertical-align-start.svg?url'
@@ -297,6 +300,7 @@ export function getAssetUrlsByImport(opts) {
 			'info-circle': formatAssetUrl(iconsInfoCircle, opts),
 			leading: formatAssetUrl(iconsLeading, opts),
 			link: formatAssetUrl(iconsLink, opts),
+			lock: formatAssetUrl(iconsLock, opts),
 			menu: formatAssetUrl(iconsMenu, opts),
 			minus: formatAssetUrl(iconsMinus, opts),
 			mixed: formatAssetUrl(iconsMixed, opts),
@@ -310,6 +314,7 @@ export function getAssetUrlsByImport(opts) {
 			'rotate-cw': formatAssetUrl(iconsRotateCw, opts),
 			'send-backward': formatAssetUrl(iconsSendBackward, opts),
 			'send-to-back': formatAssetUrl(iconsSendToBack, opts),
+			'share-1': formatAssetUrl(iconsShare1, opts),
 			'size-extra-large': formatAssetUrl(iconsSizeExtraLarge, opts),
 			'size-large': formatAssetUrl(iconsSizeLarge, opts),
 			'size-medium': formatAssetUrl(iconsSizeMedium, opts),
@@ -340,6 +345,7 @@ export function getAssetUrlsByImport(opts) {
 			twitter: formatAssetUrl(iconsTwitter, opts),
 			undo: formatAssetUrl(iconsUndo, opts),
 			ungroup: formatAssetUrl(iconsUngroup, opts),
+			unlock: formatAssetUrl(iconsUnlock, opts),
 			'vertical-align-end': formatAssetUrl(iconsVerticalAlignEnd, opts),
 			'vertical-align-middle': formatAssetUrl(iconsVerticalAlignMiddle, opts),
 			'vertical-align-start': formatAssetUrl(iconsVerticalAlignStart, opts),

packages/assets/selfHosted.js

@@ -105,6 +105,7 @@ export function getAssetUrls(opts) {
 			'info-circle': formatAssetUrl('./icons/icon/info-circle.svg', opts),
 			leading: formatAssetUrl('./icons/icon/leading.svg', opts),
 			link: formatAssetUrl('./icons/icon/link.svg', opts),
+			lock: formatAssetUrl('./icons/icon/lock.svg', opts),
 			menu: formatAssetUrl('./icons/icon/menu.svg', opts),
 			minus: formatAssetUrl('./icons/icon/minus.svg', opts),
 			mixed: formatAssetUrl('./icons/icon/mixed.svg', opts),
@@ -118,6 +119,7 @@ export function getAssetUrls(opts) {
 			'rotate-cw': formatAssetUrl('./icons/icon/rotate-cw.svg', opts),
 			'send-backward': formatAssetUrl('./icons/icon/send-backward.svg', opts),
 			'send-to-back': formatAssetUrl('./icons/icon/send-to-back.svg', opts),
+			'share-1': formatAssetUrl('./icons/icon/share-1.svg', opts),
 			'size-extra-large': formatAssetUrl('./icons/icon/size-extra-large.svg', opts),
 			'size-large': formatAssetUrl('./icons/icon/size-large.svg', opts),
 			'size-medium': formatAssetUrl('./icons/icon/size-medium.svg', opts),
@@ -148,6 +150,7 @@ export function getAssetUrls(opts) {
 			twitter: formatAssetUrl('./icons/icon/twitter.svg', opts),
 			undo: formatAssetUrl('./icons/icon/undo.svg', opts),
 			ungroup: formatAssetUrl('./icons/icon/ungroup.svg', opts),
+			unlock: formatAssetUrl('./icons/icon/unlock.svg', opts),
 			'vertical-align-end': formatAssetUrl('./icons/icon/vertical-align-end.svg', opts),
 			'vertical-align-middle': formatAssetUrl('./icons/icon/vertical-align-middle.svg', opts),
 			'vertical-align-start': formatAssetUrl('./icons/icon/vertical-align-start.svg', opts),

packages/assets/types.d.ts

@@ -95,6 +95,7 @@ export type AssetUrls = {
 		'info-circle': string
 		leading: string
 		link: string
+		lock: string
 		menu: string
 		minus: string
 		mixed: string
@@ -108,6 +109,7 @@ export type AssetUrls = {
 		'rotate-cw': string
 		'send-backward': string
 		'send-to-back': string
+		'share-1': string
 		'size-extra-large': string
 		'size-large': string
 		'size-medium': string
@@ -138,6 +140,7 @@ export type AssetUrls = {
 		twitter: string
 		undo: string
 		ungroup: string
+		unlock: string
 		'vertical-align-end': string
 		'vertical-align-middle': string
 		'vertical-align-start': string

packages/assets/urls.js

@@ -315,6 +315,7 @@ export function getAssetUrlsByMetaUrl(opts) {
 			),
 			leading: formatAssetUrl(new URL('./icons/icon/leading.svg', import.meta.url).href, opts),
 			link: formatAssetUrl(new URL('./icons/icon/link.svg', import.meta.url).href, opts),
+			lock: formatAssetUrl(new URL('./icons/icon/lock.svg', import.meta.url).href, opts),
 			menu: formatAssetUrl(new URL('./icons/icon/menu.svg', import.meta.url).href, opts),
 			minus: formatAssetUrl(new URL('./icons/icon/minus.svg', import.meta.url).href, opts),
 			mixed: formatAssetUrl(new URL('./icons/icon/mixed.svg', import.meta.url).href, opts),
@@ -349,6 +350,7 @@ export function getAssetUrlsByMetaUrl(opts) {
 				new URL('./icons/icon/send-to-back.svg', import.meta.url).href,
 				opts
 			),
+			'share-1': formatAssetUrl(new URL('./icons/icon/share-1.svg', import.meta.url).href, opts),
 			'size-extra-large': formatAssetUrl(
 				new URL('./icons/icon/size-extra-large.svg', import.meta.url).href,
 				opts
@@ -457,6 +459,7 @@ export function getAssetUrlsByMetaUrl(opts) {
 			twitter: formatAssetUrl(new URL('./icons/icon/twitter.svg', import.meta.url).href, opts),
 			undo: formatAssetUrl(new URL('./icons/icon/undo.svg', import.meta.url).href, opts),
 			ungroup: formatAssetUrl(new URL('./icons/icon/ungroup.svg', import.meta.url).href, opts),
+			unlock: formatAssetUrl(new URL('./icons/icon/unlock.svg', import.meta.url).href, opts),
 			'vertical-align-end': formatAssetUrl(
 				new URL('./icons/icon/vertical-align-end.svg', import.meta.url).href,
 				opts

packages/tldraw/api-report.md

@@ -2177,7 +2177,7 @@ export interface TLUiIconProps extends React.HTMLProps<HTMLDivElement> {
 }
 
 // @public (undocumented)
-export type TLUiIconType = 'align-bottom' | 'align-center-horizontal' | 'align-center-vertical' | 'align-left' | 'align-right' | 'align-top' | 'arrow-left' | 'arrowhead-arrow' | 'arrowhead-bar' | 'arrowhead-diamond' | 'arrowhead-dot' | 'arrowhead-none' | 'arrowhead-square' | 'arrowhead-triangle-inverted' | 'arrowhead-triangle' | 'blob' | 'bring-forward' | 'bring-to-front' | 'broken' | 'check-circle' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'chevrons-ne' | 'chevrons-sw' | 'clipboard-copied' | 'clipboard-copy' | 'color' | 'cross-2' | 'cross-circle' | 'dash-dashed' | 'dash-dotted' | 'dash-draw' | 'dash-solid' | 'disconnected' | 'discord' | 'distribute-horizontal' | 'distribute-vertical' | 'dot' | 'dots-horizontal' | 'dots-vertical' | 'drag-handle-dots' | 'duplicate' | 'edit' | 'external-link' | 'fill-none' | 'fill-pattern' | 'fill-semi' | 'fill-solid' | 'follow' | 'following' | 'font-draw' | 'font-mono' | 'font-sans' | 'font-serif' | 'geo-arrow-down' | 'geo-arrow-left' | 'geo-arrow-right' | 'geo-arrow-up' | 'geo-check-box' | 'geo-cloud' | 'geo-diamond' | 'geo-ellipse' | 'geo-hexagon' | 'geo-octagon' | 'geo-oval' | 'geo-pentagon' | 'geo-rectangle' | 'geo-rhombus-2' | 'geo-rhombus' | 'geo-star' | 'geo-trapezoid' | 'geo-triangle' | 'geo-x-box' | 'github' | 'group' | 'horizontal-align-end' | 'horizontal-align-middle' | 'horizontal-align-start' | 'info-circle' | 'leading' | 'link' | 'menu' | 'minus' | 'mixed' | 'pack' | 'plus' | 'question-mark-circle' | 'question-mark' | 'redo' | 'reset-zoom' | 'rotate-ccw' | 'rotate-cw' | 'send-backward' | 'send-to-back' | 'size-extra-large' | 'size-large' | 'size-medium' | 'size-small' | 'stack-horizontal' | 'stack-vertical' | 'stretch-horizontal' | 'stretch-vertical' | 'text-align-center' | 'text-align-left' | 'text-align-right' | 'toggle-off' | 'toggle-on' | 'tool-arrow' | 'tool-eraser' | 'tool-frame' | 'tool-hand' | 'tool-highlight' | 'tool-laser' | 'tool-line' | 'tool-media' | 'tool-note' | 'tool-pencil' | 'tool-pointer' | 'tool-screenshot' | 'tool-text' | 'trash' | 'twitter' | 'undo' | 'ungroup' | 'vertical-align-end' | 'vertical-align-middle' | 'vertical-align-start' | 'warning-triangle' | 'zoom-in' | 'zoom-out';
+export type TLUiIconType = 'align-bottom' | 'align-center-horizontal' | 'align-center-vertical' | 'align-left' | 'align-right' | 'align-top' | 'arrow-left' | 'arrowhead-arrow' | 'arrowhead-bar' | 'arrowhead-diamond' | 'arrowhead-dot' | 'arrowhead-none' | 'arrowhead-square' | 'arrowhead-triangle-inverted' | 'arrowhead-triangle' | 'blob' | 'bring-forward' | 'bring-to-front' | 'broken' | 'check-circle' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'chevrons-ne' | 'chevrons-sw' | 'clipboard-copied' | 'clipboard-copy' | 'color' | 'cross-2' | 'cross-circle' | 'dash-dashed' | 'dash-dotted' | 'dash-draw' | 'dash-solid' | 'disconnected' | 'discord' | 'distribute-horizontal' | 'distribute-vertical' | 'dot' | 'dots-horizontal' | 'dots-vertical' | 'drag-handle-dots' | 'duplicate' | 'edit' | 'external-link' | 'fill-none' | 'fill-pattern' | 'fill-semi' | 'fill-solid' | 'follow' | 'following' | 'font-draw' | 'font-mono' | 'font-sans' | 'font-serif' | 'geo-arrow-down' | 'geo-arrow-left' | 'geo-arrow-right' | 'geo-arrow-up' | 'geo-check-box' | 'geo-cloud' | 'geo-diamond' | 'geo-ellipse' | 'geo-hexagon' | 'geo-octagon' | 'geo-oval' | 'geo-pentagon' | 'geo-rectangle' | 'geo-rhombus-2' | 'geo-rhombus' | 'geo-star' | 'geo-trapezoid' | 'geo-triangle' | 'geo-x-box' | 'github' | 'group' | 'horizontal-align-end' | 'horizontal-align-middle' | 'horizontal-align-start' | 'info-circle' | 'leading' | 'link' | 'lock' | 'menu' | 'minus' | 'mixed' | 'pack' | 'plus' | 'question-mark-circle' | 'question-mark' | 'redo' | 'reset-zoom' | 'rotate-ccw' | 'rotate-cw' | 'send-backward' | 'send-to-back' | 'share-1' | 'size-extra-large' | 'size-large' | 'size-medium' | 'size-small' | 'stack-horizontal' | 'stack-vertical' | 'stretch-horizontal' | 'stretch-vertical' | 'text-align-center' | 'text-align-left' | 'text-align-right' | 'toggle-off' | 'toggle-on' | 'tool-arrow' | 'tool-eraser' | 'tool-frame' | 'tool-hand' | 'tool-highlight' | 'tool-laser' | 'tool-line' | 'tool-media' | 'tool-note' | 'tool-pencil' | 'tool-pointer' | 'tool-screenshot' | 'tool-text' | 'trash' | 'twitter' | 'undo' | 'ungroup' | 'unlock' | 'vertical-align-end' | 'vertical-align-middle' | 'vertical-align-start' | 'warning-triangle' | 'zoom-in' | 'zoom-out';
 
 // @public (undocumented)
 export interface TLUiInputProps {

packages/tldraw/src/lib/ui/icon-types.ts

@@ -87,6 +87,7 @@ export type TLUiIconType =
 	| 'info-circle'
 	| 'leading'
 	| 'link'
+	| 'lock'
 	| 'menu'
 	| 'minus'
 	| 'mixed'
@@ -100,6 +101,7 @@ export type TLUiIconType =
 	| 'rotate-cw'
 	| 'send-backward'
 	| 'send-to-back'
+	| 'share-1'
 	| 'size-extra-large'
 	| 'size-large'
 	| 'size-medium'
@@ -130,6 +132,7 @@ export type TLUiIconType =
 	| 'twitter'
 	| 'undo'
 	| 'ungroup'
+	| 'unlock'
 	| 'vertical-align-end'
 	| 'vertical-align-middle'
 	| 'vertical-align-start'
@@ -223,6 +226,7 @@ export const iconTypes = [
 	'info-circle',
 	'leading',
 	'link',
+	'lock',
 	'menu',
 	'minus',
 	'mixed',
@@ -236,6 +240,7 @@ export const iconTypes = [
 	'rotate-cw',
 	'send-backward',
 	'send-to-back',
+	'share-1',
 	'size-extra-large',
 	'size-large',
 	'size-medium',
@@ -266,6 +271,7 @@ export const iconTypes = [
 	'twitter',
 	'undo',
 	'ungroup',
+	'unlock',
 	'vertical-align-end',
 	'vertical-align-middle',
 	'vertical-align-start',