kopia lustrzana https://github.com/Tldraw/Tldraw
69 wiersze
2.6 KiB
Markdown
69 wiersze
2.6 KiB
Markdown
---
|
|
title: Assets
|
|
status: published
|
|
author: steveruizok
|
|
date: 6/9/2023
|
|
order: 9
|
|
---
|
|
|
|
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](https://unpkg.com/browse/@tldraw/assets@2.0.0-alpha.12/), 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:
|
|
|
|
```javascript
|
|
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](https://github.com/tldraw/tldraw/tree/main/assets) 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.
|
|
```javascript
|
|
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:
|
|
|
|
```javascript
|
|
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:
|
|
```javascript
|
|
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). |