Add offline icon back (#4127)

This icon went missing. I had a larger diff here that made the icon
types stricter to catch errors but I'll save it for another PR.

### Change type

- [x] `bugfix`
- [ ] `improvement`
- [ ] `feature`
- [ ] `api`
- [ ] `other`

### Test plan

1. Create a shape...
2.

- [ ] Unit tests
- [ ] End to end tests

### Release notes

- Fixed a bug with…

assets/icons/icon/status-offline.svg

@@ -0,0 +1,7 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M14.6244 8.08966C8.94273 8.1985 3.90961 10.7717 0.702285 14.7107C0.294265 15.2118 0.414792 15.9436 0.934176 16.3281C1.47602 16.7292 2.23929 16.5967 2.66573 16.0746C5.14674 13.0369 8.88662 10.9431 13.159 10.4712L14.6244 8.08966ZM10.7965 14.3104C8.56283 15.0878 6.64316 16.4668 5.26375 18.2363C4.90281 18.6993 5.02791 19.3584 5.49977 19.7077C6.03113 20.101 6.78259 19.9442 7.19459 19.4272C7.56508 18.9623 7.98214 18.5316 8.43933 18.1411L10.7965 14.3104ZM20.3686 17.2713L21.5218 15.3972C22.7717 16.1511 23.8623 17.1153 24.7361 18.2362C25.0971 18.6992 24.972 19.3583 24.5001 19.7076C23.9687 20.1009 23.2173 19.9442 22.8053 19.4272C22.1334 18.584 21.3083 17.8534 20.3686 17.2713ZM17.4758 21.9723L18.5681 20.1972C19.2363 20.6457 19.8037 21.2169 20.2325 21.8754C20.4881 22.268 20.3515 22.7786 19.9749 23.0573C19.4173 23.4701 18.5976 23.1841 18.1651 22.6416C17.9663 22.3924 17.7346 22.1674 17.4758 21.9723ZM23.2505 12.5879L24.4704 10.6054C26.3357 11.6891 27.9725 13.0833 29.2976 14.7106C29.7056 15.2117 29.585 15.9436 29.0657 16.3281C28.5238 16.7292 27.7605 16.5967 27.3341 16.0746C26.2091 14.6972 24.8254 13.5139 23.2505 12.5879Z"
+    fill="black" />
+  <rect x="23.376" y="0.169067" width="3" height="33.372" rx="1.5"
+    transform="rotate(31.6059 23.376 0.169067)" fill="black" />
+</svg>

packages/assets/imports.js

@@ -136,6 +136,7 @@ import iconsSplineCubic from './icons/icon/spline-cubic.svg'
 import iconsSplineLine from './icons/icon/spline-line.svg'
 import iconsStackHorizontal from './icons/icon/stack-horizontal.svg'
 import iconsStackVertical from './icons/icon/stack-vertical.svg'
+import iconsStatusOffline from './icons/icon/status-offline.svg'
 import iconsStretchHorizontal from './icons/icon/stretch-horizontal.svg'
 import iconsStretchVertical from './icons/icon/stretch-vertical.svg'
 import iconsTextAlignCenter from './icons/icon/text-align-center.svg'
@@ -329,6 +330,7 @@ export function getAssetUrlsByImport(opts) {
 			'spline-line': formatAssetUrl(iconsSplineLine, opts),
 			'stack-horizontal': formatAssetUrl(iconsStackHorizontal, opts),
 			'stack-vertical': formatAssetUrl(iconsStackVertical, opts),
+			'status-offline': formatAssetUrl(iconsStatusOffline, opts),
 			'stretch-horizontal': formatAssetUrl(iconsStretchHorizontal, opts),
 			'stretch-vertical': formatAssetUrl(iconsStretchVertical, opts),
 			'text-align-center': formatAssetUrl(iconsTextAlignCenter, opts),

packages/assets/imports.vite.js

@@ -136,6 +136,7 @@ import iconsSplineCubic from './icons/icon/spline-cubic.svg?url'
 import iconsSplineLine from './icons/icon/spline-line.svg?url'
 import iconsStackHorizontal from './icons/icon/stack-horizontal.svg?url'
 import iconsStackVertical from './icons/icon/stack-vertical.svg?url'
+import iconsStatusOffline from './icons/icon/status-offline.svg?url'
 import iconsStretchHorizontal from './icons/icon/stretch-horizontal.svg?url'
 import iconsStretchVertical from './icons/icon/stretch-vertical.svg?url'
 import iconsTextAlignCenter from './icons/icon/text-align-center.svg?url'
@@ -329,6 +330,7 @@ export function getAssetUrlsByImport(opts) {
 			'spline-line': formatAssetUrl(iconsSplineLine, opts),
 			'stack-horizontal': formatAssetUrl(iconsStackHorizontal, opts),
 			'stack-vertical': formatAssetUrl(iconsStackVertical, opts),
+			'status-offline': formatAssetUrl(iconsStatusOffline, opts),
 			'stretch-horizontal': formatAssetUrl(iconsStretchHorizontal, opts),
 			'stretch-vertical': formatAssetUrl(iconsStretchVertical, opts),
 			'text-align-center': formatAssetUrl(iconsTextAlignCenter, opts),

packages/assets/selfHosted.js

@@ -130,6 +130,7 @@ export function getAssetUrls(opts) {
 			'spline-line': formatAssetUrl('./icons/icon/spline-line.svg', opts),
 			'stack-horizontal': formatAssetUrl('./icons/icon/stack-horizontal.svg', opts),
 			'stack-vertical': formatAssetUrl('./icons/icon/stack-vertical.svg', opts),
+			'status-offline': formatAssetUrl('./icons/icon/status-offline.svg', opts),
 			'stretch-horizontal': formatAssetUrl('./icons/icon/stretch-horizontal.svg', opts),
 			'stretch-vertical': formatAssetUrl('./icons/icon/stretch-vertical.svg', opts),
 			'text-align-center': formatAssetUrl('./icons/icon/text-align-center.svg', opts),

packages/assets/types.d.ts

@@ -120,6 +120,7 @@ export type AssetUrls = {
 		'spline-line': string
 		'stack-horizontal': string
 		'stack-vertical': string
+		'status-offline': string
 		'stretch-horizontal': string
 		'stretch-vertical': string
 		'text-align-center': string

packages/assets/urls.js

@@ -391,6 +391,10 @@ export function getAssetUrlsByMetaUrl(opts) {
 				new URL('./icons/icon/stack-vertical.svg', import.meta.url).href,
 				opts
 			),
+			'status-offline': formatAssetUrl(
+				new URL('./icons/icon/status-offline.svg', import.meta.url).href,
+				opts
+			),
 			'stretch-horizontal': formatAssetUrl(
 				new URL('./icons/icon/stretch-horizontal.svg', import.meta.url).href,
 				opts

packages/tldraw/api-report.md

@@ -2381,7 +2381,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-fill' | '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-heart' | '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' | 'spline-cubic' | 'spline-line' | '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';
+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-fill' | '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-heart' | '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' | 'spline-cubic' | 'spline-line' | 'stack-horizontal' | 'stack-vertical' | 'status-offline' | '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

@@ -112,6 +112,7 @@ export type TLUiIconType =
 	| 'spline-line'
 	| 'stack-horizontal'
 	| 'stack-vertical'
+	| 'status-offline'
 	| 'stretch-horizontal'
 	| 'stretch-vertical'
 	| 'text-align-center'
@@ -255,6 +256,7 @@ export const iconTypes = [
 	'spline-line',
 	'stack-horizontal',
 	'stack-vertical',
+	'status-offline',
 	'stretch-horizontal',
 	'stretch-vertical',
 	'text-align-center',