Assets

In order to use the <Tldraw/> component, the app must be able to find certain assets. These are contained in the embed-icons, fonts, icons, and translations folders. We offer a few different ways of making these assets available to your app.

1. Using a public CDN

By default we serve these assets from a public CDN called unpkg, so everything should work out of the box and is a good way to get started.

If you would like to customize some of the assets you can pass the customizations to our <Tldraw /> component. For example, to use a custom icon for the hand tool you can do the following:

const assetUrls = {
    icons: {
        'tool-hand': './custom-tool-hand.svg',
    },
}

<Tldraw assetUrls={assetUrls} />

This will use the custom icon for the hand tool and the default assets for everything else.

2. Hosting the assets yourself

If you want more flexibility you can also host these assets yourself:

1. Download the embed-icons, fonts, icons, and translations folders from the assets folder of the tldraw repository.
2. Place the folders in your project's public path.
3. Pass assetUrls prop to our <Tldraw/> component to let the component know where the assets live.

You can use our getAssetUrls helper function from the @tldraw/assets package to generate these urls for you.

import { getAssetUrls } from '@tldraw/assets/selfHosted'

const assetUrls = getAssetUrls()

<Tldraw assetUrls={assetUrls} />

While these files must be available, you can overwrite the individual files: for example, by placing different icons under the same name or modifying / adding translations.

If you use a CDN for hosting these files you can specify the base url of your assets. To recreate the above option of serving the assets from unpkg you would do the following:

const assetUrls = getAssetUrls({
    baseUrl: 'https://unpkg.com/@tldraw/assets@2.0.0-alpha.12/',
})

3. Using a bundler

If you're using a bundler like webpack or rollup, you can import the assets directly from the @tldraw/assets package. Here you can use getAssetUrlsByMetaUrl helper function:

import { getAssetUrlsByMetaUrl } from '@tldraw/assets/urls'

const assetUrls = getAssetUrlsByMetaUrl()

<Tldraw assetUrls={assetUrls} />

Adding custom assets

We have plans to offer more rich asset customizations in the future (e.g. custom cursors, custom fonts, translations for other languages etc).