tldraw/packages/assets/imports.vite.js
alex 719332d272
serve icons via a single merged .svg file (#4150)
We currently serve icons in the form of 141 separate svg files. This is
pretty inefficient: it results in 141 http requests each with its own
overheads and costs. Each one is generally less than 1kb of data.

This PR merges all of our icons into a single 44kb icon file. Each item
in the svg has an ID, and we use the ID in the asset url to target the
specific icon. This also fixes a lot of the icon preloading issues:
because the icon file is already loaded, there's no extra request needed
when panels open etc.

I was messing with this whilst killing time before a late meeting so
made a shitty overengineered code generator, dont at me

### Change type

- [x] `improvement`

### Release notes

- Serve icons more efficiently, and make sure they're still available if
tldraw goes offline.
2024-07-15 11:03:11 +00:00

289 lines
16 KiB
JavaScript

// This file is automatically generated by scripts/refresh-assets.ts.
// Do not edit manually. Or do, I'm a comment, not a cop.
// eslint-disable-next-line @typescript-eslint/triple-slash-reference
/// <reference path="./modules.d.ts" />
import { formatAssetUrl } from './utils.js'
import embedIconsCodepenPngUrl from './embed-icons/codepen.png?url'
import embedIconsCodesandboxPngUrl from './embed-icons/codesandbox.png?url'
import embedIconsDesmosPngUrl from './embed-icons/desmos.png?url'
import embedIconsExcalidrawPngUrl from './embed-icons/excalidraw.png?url'
import embedIconsFeltPngUrl from './embed-icons/felt.png?url'
import embedIconsFigmaPngUrl from './embed-icons/figma.png?url'
import embedIconsGithubGistPngUrl from './embed-icons/github_gist.png?url'
import embedIconsGoogleCalendarPngUrl from './embed-icons/google_calendar.png?url'
import embedIconsGoogleMapsPngUrl from './embed-icons/google_maps.png?url'
import embedIconsGoogleSlidesPngUrl from './embed-icons/google_slides.png?url'
import embedIconsObservablePngUrl from './embed-icons/observable.png?url'
import embedIconsReplitPngUrl from './embed-icons/replit.png?url'
import embedIconsScratchPngUrl from './embed-icons/scratch.png?url'
import embedIconsSpotifyPngUrl from './embed-icons/spotify.png?url'
import embedIconsTldrawPngUrl from './embed-icons/tldraw.png?url'
import embedIconsValTownPngUrl from './embed-icons/val_town.png?url'
import embedIconsVimeoPngUrl from './embed-icons/vimeo.png?url'
import embedIconsYoutubePngUrl from './embed-icons/youtube.png?url'
import fontsIBMPlexMonoMediumWoff2Url from './fonts/IBMPlexMono-Medium.woff2?url'
import fontsIBMPlexSansMediumWoff2Url from './fonts/IBMPlexSans-Medium.woff2?url'
import fontsIBMPlexSerifMediumWoff2Url from './fonts/IBMPlexSerif-Medium.woff2?url'
import fontsShantellSansTldrawishWoff2Url from './fonts/Shantell_Sans-Tldrawish.woff2?url'
import iconsIcon0MergedSvgUrl from './icons/icon/0_merged.svg?url'
import translationsArJsonUrl from './translations/ar.json?url'
import translationsCaJsonUrl from './translations/ca.json?url'
import translationsCsJsonUrl from './translations/cs.json?url'
import translationsDaJsonUrl from './translations/da.json?url'
import translationsDeJsonUrl from './translations/de.json?url'
import translationsEnJsonUrl from './translations/en.json?url'
import translationsEsJsonUrl from './translations/es.json?url'
import translationsFaJsonUrl from './translations/fa.json?url'
import translationsFiJsonUrl from './translations/fi.json?url'
import translationsFrJsonUrl from './translations/fr.json?url'
import translationsGlJsonUrl from './translations/gl.json?url'
import translationsHeJsonUrl from './translations/he.json?url'
import translationsHiInJsonUrl from './translations/hi-in.json?url'
import translationsHrJsonUrl from './translations/hr.json?url'
import translationsHuJsonUrl from './translations/hu.json?url'
import translationsIdJsonUrl from './translations/id.json?url'
import translationsItJsonUrl from './translations/it.json?url'
import translationsJaJsonUrl from './translations/ja.json?url'
import translationsKoKrJsonUrl from './translations/ko-kr.json?url'
import translationsKuJsonUrl from './translations/ku.json?url'
import translationsLanguagesJsonUrl from './translations/languages.json?url'
import translationsMainJsonUrl from './translations/main.json?url'
import translationsMyJsonUrl from './translations/my.json?url'
import translationsNeJsonUrl from './translations/ne.json?url'
import translationsNoJsonUrl from './translations/no.json?url'
import translationsPlJsonUrl from './translations/pl.json?url'
import translationsPtBrJsonUrl from './translations/pt-br.json?url'
import translationsPtPtJsonUrl from './translations/pt-pt.json?url'
import translationsRoJsonUrl from './translations/ro.json?url'
import translationsRuJsonUrl from './translations/ru.json?url'
import translationsSlJsonUrl from './translations/sl.json?url'
import translationsSvJsonUrl from './translations/sv.json?url'
import translationsTeJsonUrl from './translations/te.json?url'
import translationsThJsonUrl from './translations/th.json?url'
import translationsTrJsonUrl from './translations/tr.json?url'
import translationsUkJsonUrl from './translations/uk.json?url'
import translationsViJsonUrl from './translations/vi.json?url'
import translationsZhCnJsonUrl from './translations/zh-cn.json?url'
import translationsZhTwJsonUrl from './translations/zh-tw.json?url'
/**
* @param {AssetUrlOptions} [opts]
* @public
*/
export function getAssetUrlsByImport(opts) {
const iconsIcon0MergedSvg2 = formatAssetUrl(iconsIcon0MergedSvgUrl, opts)
return {
fonts: {
monospace: formatAssetUrl(fontsIBMPlexMonoMediumWoff2Url, opts),
sansSerif: formatAssetUrl(fontsIBMPlexSansMediumWoff2Url, opts),
serif: formatAssetUrl(fontsIBMPlexSerifMediumWoff2Url, opts),
draw: formatAssetUrl(fontsShantellSansTldrawishWoff2Url, opts),
},
icons: {
'align-bottom': iconsIcon0MergedSvg2 + '#align-bottom',
'align-center-horizontal': iconsIcon0MergedSvg2 + '#align-center-horizontal',
'align-center-vertical': iconsIcon0MergedSvg2 + '#align-center-vertical',
'align-left': iconsIcon0MergedSvg2 + '#align-left',
'align-right': iconsIcon0MergedSvg2 + '#align-right',
'align-top': iconsIcon0MergedSvg2 + '#align-top',
'arrow-left': iconsIcon0MergedSvg2 + '#arrow-left',
'arrowhead-arrow': iconsIcon0MergedSvg2 + '#arrowhead-arrow',
'arrowhead-bar': iconsIcon0MergedSvg2 + '#arrowhead-bar',
'arrowhead-diamond': iconsIcon0MergedSvg2 + '#arrowhead-diamond',
'arrowhead-dot': iconsIcon0MergedSvg2 + '#arrowhead-dot',
'arrowhead-none': iconsIcon0MergedSvg2 + '#arrowhead-none',
'arrowhead-square': iconsIcon0MergedSvg2 + '#arrowhead-square',
'arrowhead-triangle-inverted': iconsIcon0MergedSvg2 + '#arrowhead-triangle-inverted',
'arrowhead-triangle': iconsIcon0MergedSvg2 + '#arrowhead-triangle',
blob: iconsIcon0MergedSvg2 + '#blob',
'bring-forward': iconsIcon0MergedSvg2 + '#bring-forward',
'bring-to-front': iconsIcon0MergedSvg2 + '#bring-to-front',
broken: iconsIcon0MergedSvg2 + '#broken',
'check-circle': iconsIcon0MergedSvg2 + '#check-circle',
check: iconsIcon0MergedSvg2 + '#check',
'chevron-down': iconsIcon0MergedSvg2 + '#chevron-down',
'chevron-left': iconsIcon0MergedSvg2 + '#chevron-left',
'chevron-right': iconsIcon0MergedSvg2 + '#chevron-right',
'chevron-up': iconsIcon0MergedSvg2 + '#chevron-up',
'chevrons-ne': iconsIcon0MergedSvg2 + '#chevrons-ne',
'chevrons-sw': iconsIcon0MergedSvg2 + '#chevrons-sw',
'clipboard-copied': iconsIcon0MergedSvg2 + '#clipboard-copied',
'clipboard-copy': iconsIcon0MergedSvg2 + '#clipboard-copy',
color: iconsIcon0MergedSvg2 + '#color',
'cross-2': iconsIcon0MergedSvg2 + '#cross-2',
'cross-circle': iconsIcon0MergedSvg2 + '#cross-circle',
'dash-dashed': iconsIcon0MergedSvg2 + '#dash-dashed',
'dash-dotted': iconsIcon0MergedSvg2 + '#dash-dotted',
'dash-draw': iconsIcon0MergedSvg2 + '#dash-draw',
'dash-solid': iconsIcon0MergedSvg2 + '#dash-solid',
disconnected: iconsIcon0MergedSvg2 + '#disconnected',
discord: iconsIcon0MergedSvg2 + '#discord',
'distribute-horizontal': iconsIcon0MergedSvg2 + '#distribute-horizontal',
'distribute-vertical': iconsIcon0MergedSvg2 + '#distribute-vertical',
dot: iconsIcon0MergedSvg2 + '#dot',
'dots-horizontal': iconsIcon0MergedSvg2 + '#dots-horizontal',
'dots-vertical': iconsIcon0MergedSvg2 + '#dots-vertical',
'drag-handle-dots': iconsIcon0MergedSvg2 + '#drag-handle-dots',
duplicate: iconsIcon0MergedSvg2 + '#duplicate',
edit: iconsIcon0MergedSvg2 + '#edit',
'external-link': iconsIcon0MergedSvg2 + '#external-link',
'fill-fill': iconsIcon0MergedSvg2 + '#fill-fill',
'fill-none': iconsIcon0MergedSvg2 + '#fill-none',
'fill-pattern': iconsIcon0MergedSvg2 + '#fill-pattern',
'fill-semi': iconsIcon0MergedSvg2 + '#fill-semi',
'fill-solid': iconsIcon0MergedSvg2 + '#fill-solid',
follow: iconsIcon0MergedSvg2 + '#follow',
following: iconsIcon0MergedSvg2 + '#following',
'font-draw': iconsIcon0MergedSvg2 + '#font-draw',
'font-mono': iconsIcon0MergedSvg2 + '#font-mono',
'font-sans': iconsIcon0MergedSvg2 + '#font-sans',
'font-serif': iconsIcon0MergedSvg2 + '#font-serif',
'geo-arrow-down': iconsIcon0MergedSvg2 + '#geo-arrow-down',
'geo-arrow-left': iconsIcon0MergedSvg2 + '#geo-arrow-left',
'geo-arrow-right': iconsIcon0MergedSvg2 + '#geo-arrow-right',
'geo-arrow-up': iconsIcon0MergedSvg2 + '#geo-arrow-up',
'geo-check-box': iconsIcon0MergedSvg2 + '#geo-check-box',
'geo-cloud': iconsIcon0MergedSvg2 + '#geo-cloud',
'geo-diamond': iconsIcon0MergedSvg2 + '#geo-diamond',
'geo-ellipse': iconsIcon0MergedSvg2 + '#geo-ellipse',
'geo-heart': iconsIcon0MergedSvg2 + '#geo-heart',
'geo-hexagon': iconsIcon0MergedSvg2 + '#geo-hexagon',
'geo-octagon': iconsIcon0MergedSvg2 + '#geo-octagon',
'geo-oval': iconsIcon0MergedSvg2 + '#geo-oval',
'geo-pentagon': iconsIcon0MergedSvg2 + '#geo-pentagon',
'geo-rectangle': iconsIcon0MergedSvg2 + '#geo-rectangle',
'geo-rhombus-2': iconsIcon0MergedSvg2 + '#geo-rhombus-2',
'geo-rhombus': iconsIcon0MergedSvg2 + '#geo-rhombus',
'geo-star': iconsIcon0MergedSvg2 + '#geo-star',
'geo-trapezoid': iconsIcon0MergedSvg2 + '#geo-trapezoid',
'geo-triangle': iconsIcon0MergedSvg2 + '#geo-triangle',
'geo-x-box': iconsIcon0MergedSvg2 + '#geo-x-box',
github: iconsIcon0MergedSvg2 + '#github',
group: iconsIcon0MergedSvg2 + '#group',
'horizontal-align-end': iconsIcon0MergedSvg2 + '#horizontal-align-end',
'horizontal-align-middle': iconsIcon0MergedSvg2 + '#horizontal-align-middle',
'horizontal-align-start': iconsIcon0MergedSvg2 + '#horizontal-align-start',
'info-circle': iconsIcon0MergedSvg2 + '#info-circle',
leading: iconsIcon0MergedSvg2 + '#leading',
link: iconsIcon0MergedSvg2 + '#link',
lock: iconsIcon0MergedSvg2 + '#lock',
menu: iconsIcon0MergedSvg2 + '#menu',
minus: iconsIcon0MergedSvg2 + '#minus',
mixed: iconsIcon0MergedSvg2 + '#mixed',
pack: iconsIcon0MergedSvg2 + '#pack',
plus: iconsIcon0MergedSvg2 + '#plus',
'question-mark-circle': iconsIcon0MergedSvg2 + '#question-mark-circle',
'question-mark': iconsIcon0MergedSvg2 + '#question-mark',
redo: iconsIcon0MergedSvg2 + '#redo',
'reset-zoom': iconsIcon0MergedSvg2 + '#reset-zoom',
'rotate-ccw': iconsIcon0MergedSvg2 + '#rotate-ccw',
'rotate-cw': iconsIcon0MergedSvg2 + '#rotate-cw',
'send-backward': iconsIcon0MergedSvg2 + '#send-backward',
'send-to-back': iconsIcon0MergedSvg2 + '#send-to-back',
'share-1': iconsIcon0MergedSvg2 + '#share-1',
'size-extra-large': iconsIcon0MergedSvg2 + '#size-extra-large',
'size-large': iconsIcon0MergedSvg2 + '#size-large',
'size-medium': iconsIcon0MergedSvg2 + '#size-medium',
'size-small': iconsIcon0MergedSvg2 + '#size-small',
'spline-cubic': iconsIcon0MergedSvg2 + '#spline-cubic',
'spline-line': iconsIcon0MergedSvg2 + '#spline-line',
'stack-horizontal': iconsIcon0MergedSvg2 + '#stack-horizontal',
'stack-vertical': iconsIcon0MergedSvg2 + '#stack-vertical',
'status-offline': iconsIcon0MergedSvg2 + '#status-offline',
'stretch-horizontal': iconsIcon0MergedSvg2 + '#stretch-horizontal',
'stretch-vertical': iconsIcon0MergedSvg2 + '#stretch-vertical',
'text-align-center': iconsIcon0MergedSvg2 + '#text-align-center',
'text-align-left': iconsIcon0MergedSvg2 + '#text-align-left',
'text-align-right': iconsIcon0MergedSvg2 + '#text-align-right',
'toggle-off': iconsIcon0MergedSvg2 + '#toggle-off',
'toggle-on': iconsIcon0MergedSvg2 + '#toggle-on',
'tool-arrow': iconsIcon0MergedSvg2 + '#tool-arrow',
'tool-eraser': iconsIcon0MergedSvg2 + '#tool-eraser',
'tool-frame': iconsIcon0MergedSvg2 + '#tool-frame',
'tool-hand': iconsIcon0MergedSvg2 + '#tool-hand',
'tool-highlight': iconsIcon0MergedSvg2 + '#tool-highlight',
'tool-laser': iconsIcon0MergedSvg2 + '#tool-laser',
'tool-line': iconsIcon0MergedSvg2 + '#tool-line',
'tool-media': iconsIcon0MergedSvg2 + '#tool-media',
'tool-note': iconsIcon0MergedSvg2 + '#tool-note',
'tool-pencil': iconsIcon0MergedSvg2 + '#tool-pencil',
'tool-pointer': iconsIcon0MergedSvg2 + '#tool-pointer',
'tool-screenshot': iconsIcon0MergedSvg2 + '#tool-screenshot',
'tool-text': iconsIcon0MergedSvg2 + '#tool-text',
trash: iconsIcon0MergedSvg2 + '#trash',
twitter: iconsIcon0MergedSvg2 + '#twitter',
undo: iconsIcon0MergedSvg2 + '#undo',
ungroup: iconsIcon0MergedSvg2 + '#ungroup',
unlock: iconsIcon0MergedSvg2 + '#unlock',
'vertical-align-end': iconsIcon0MergedSvg2 + '#vertical-align-end',
'vertical-align-middle': iconsIcon0MergedSvg2 + '#vertical-align-middle',
'vertical-align-start': iconsIcon0MergedSvg2 + '#vertical-align-start',
'warning-triangle': iconsIcon0MergedSvg2 + '#warning-triangle',
'zoom-in': iconsIcon0MergedSvg2 + '#zoom-in',
'zoom-out': iconsIcon0MergedSvg2 + '#zoom-out',
},
translations: {
ar: formatAssetUrl(translationsArJsonUrl, opts),
ca: formatAssetUrl(translationsCaJsonUrl, opts),
cs: formatAssetUrl(translationsCsJsonUrl, opts),
da: formatAssetUrl(translationsDaJsonUrl, opts),
de: formatAssetUrl(translationsDeJsonUrl, opts),
en: formatAssetUrl(translationsEnJsonUrl, opts),
es: formatAssetUrl(translationsEsJsonUrl, opts),
fa: formatAssetUrl(translationsFaJsonUrl, opts),
fi: formatAssetUrl(translationsFiJsonUrl, opts),
fr: formatAssetUrl(translationsFrJsonUrl, opts),
gl: formatAssetUrl(translationsGlJsonUrl, opts),
he: formatAssetUrl(translationsHeJsonUrl, opts),
'hi-in': formatAssetUrl(translationsHiInJsonUrl, opts),
hr: formatAssetUrl(translationsHrJsonUrl, opts),
hu: formatAssetUrl(translationsHuJsonUrl, opts),
id: formatAssetUrl(translationsIdJsonUrl, opts),
it: formatAssetUrl(translationsItJsonUrl, opts),
ja: formatAssetUrl(translationsJaJsonUrl, opts),
'ko-kr': formatAssetUrl(translationsKoKrJsonUrl, opts),
ku: formatAssetUrl(translationsKuJsonUrl, opts),
languages: formatAssetUrl(translationsLanguagesJsonUrl, opts),
main: formatAssetUrl(translationsMainJsonUrl, opts),
my: formatAssetUrl(translationsMyJsonUrl, opts),
ne: formatAssetUrl(translationsNeJsonUrl, opts),
no: formatAssetUrl(translationsNoJsonUrl, opts),
pl: formatAssetUrl(translationsPlJsonUrl, opts),
'pt-br': formatAssetUrl(translationsPtBrJsonUrl, opts),
'pt-pt': formatAssetUrl(translationsPtPtJsonUrl, opts),
ro: formatAssetUrl(translationsRoJsonUrl, opts),
ru: formatAssetUrl(translationsRuJsonUrl, opts),
sl: formatAssetUrl(translationsSlJsonUrl, opts),
sv: formatAssetUrl(translationsSvJsonUrl, opts),
te: formatAssetUrl(translationsTeJsonUrl, opts),
th: formatAssetUrl(translationsThJsonUrl, opts),
tr: formatAssetUrl(translationsTrJsonUrl, opts),
uk: formatAssetUrl(translationsUkJsonUrl, opts),
vi: formatAssetUrl(translationsViJsonUrl, opts),
'zh-cn': formatAssetUrl(translationsZhCnJsonUrl, opts),
'zh-tw': formatAssetUrl(translationsZhTwJsonUrl, opts),
},
embedIcons: {
codepen: formatAssetUrl(embedIconsCodepenPngUrl, opts),
codesandbox: formatAssetUrl(embedIconsCodesandboxPngUrl, opts),
desmos: formatAssetUrl(embedIconsDesmosPngUrl, opts),
excalidraw: formatAssetUrl(embedIconsExcalidrawPngUrl, opts),
felt: formatAssetUrl(embedIconsFeltPngUrl, opts),
figma: formatAssetUrl(embedIconsFigmaPngUrl, opts),
github_gist: formatAssetUrl(embedIconsGithubGistPngUrl, opts),
google_calendar: formatAssetUrl(embedIconsGoogleCalendarPngUrl, opts),
google_maps: formatAssetUrl(embedIconsGoogleMapsPngUrl, opts),
google_slides: formatAssetUrl(embedIconsGoogleSlidesPngUrl, opts),
observable: formatAssetUrl(embedIconsObservablePngUrl, opts),
replit: formatAssetUrl(embedIconsReplitPngUrl, opts),
scratch: formatAssetUrl(embedIconsScratchPngUrl, opts),
spotify: formatAssetUrl(embedIconsSpotifyPngUrl, opts),
tldraw: formatAssetUrl(embedIconsTldrawPngUrl, opts),
val_town: formatAssetUrl(embedIconsValTownPngUrl, opts),
vimeo: formatAssetUrl(embedIconsVimeoPngUrl, opts),
youtube: formatAssetUrl(embedIconsYoutubePngUrl, opts),
},
}
}