### Import Svelte Component for Documentation Images

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/en/getting-started.mdx

This TypeScript snippet demonstrates how the `DocsImage` Svelte component is imported. This component is used internally by the documentation system to display images within the guide, enhancing visual explanations of the gpx.studio interface.

```TypeScript
import DocsImage from '$lib/components/docs/DocsImage.svelte';
```

--------------------------------

### Import DocsImage Component in Svelte

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/vi/getting-started.mdx

Imports the `DocsImage` Svelte component from the `$lib/components/docs` path. This component is used to display images within the documentation, providing a structured way to include visual aids.

```ts
import DocsImage from '$lib/components/docs/DocsImage.svelte';
```

--------------------------------

### Embedding Image with Svelte DocsImage Component

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/lv/getting-started.mdx

This example illustrates the usage of a custom `DocsImage` Svelte component to embed an image within a template. It shows how to pass properties like `src` for the image source and `alt` for accessible alternative text.

```svelte
<DocsImage src="getting-started/interface" alt="The gpx.studio interface." />
```

--------------------------------

### Display Interface Screenshot with DocsImage Component

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/vi/getting-started.mdx

Renders an image of the gpx.studio interface using the `DocsImage` Svelte component. It specifies the image source as 'getting-started/interface' and provides an alt text for accessibility, ensuring visual content is properly displayed in documentation.

```svelte
<DocsImage src="getting-started/interface" alt="The gpx.studio interface." />
```

--------------------------------

### Importing DocsImage Component in Svelte

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/ro/getting-started.mdx

This snippet demonstrates how to import the `DocsImage` Svelte component from the `$lib/components/docs` path within a Svelte script block. This component is typically used for displaying documentation-related images.

```ts
import DocsImage from '$lib/components/docs/DocsImage.svelte';
```

--------------------------------

### Import DocsImage Component in Svelte

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/fi/getting-started.mdx

This snippet demonstrates how to import the `DocsImage` Svelte component from a local library path. It's used within documentation pages to embed images, providing a structured way to display visual aids.

```TypeScript
import DocsImage from '$lib/components/docs/DocsImage.svelte';
```

--------------------------------

### Run SvelteKit Website Locally

Source: https://github.com/gpxstudio/gpx.studio/blob/main/README.md

This snippet outlines the steps to set up and run the gpx.studio website locally. It includes navigating to the 'website' directory, configuring a Mapbox access token in a .env file, installing Node.js dependencies, and starting the SvelteKit development server. A Mapbox token is essential for map functionality.

```bash
cd website
echo PUBLIC_MAPBOX_TOKEN={YOUR_MAPBOX_TOKEN} >> .env
npm install
npm run dev
```

--------------------------------

### Importing Svelte Component in TypeScript

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/lv/getting-started.mdx

This snippet demonstrates how to import a Svelte component, `DocsImage`, from a relative path within a TypeScript script block in a Svelte application. This pattern is common for integrating reusable UI components.

```typescript
import DocsImage from '$lib/components/docs/DocsImage.svelte';
```

--------------------------------

### Using DocsImage Svelte Component in Svelte Template

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/no/getting-started.mdx

This snippet illustrates the declarative usage of the DocsImage Svelte component within a Svelte template. It shows how to specify the image source path and an alternative text for the displayed image, commonly used for interface screenshots in documentation.

```Svelte
<DocsImage src="getting-started/interface" alt="The gpx.studio interface." />
```

--------------------------------

### Importing DocsImage Component in Svelte

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/no/getting-started.mdx

This snippet demonstrates how to import the DocsImage Svelte component from a relative path within a TypeScript script block in a Svelte file. This component is typically used for embedding images in documentation pages.

```TypeScript
import DocsImage from '$lib/components/docs/DocsImage.svelte';
```

--------------------------------

### Importing DocsImage Component in Svelte

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/be/getting-started.mdx

This TypeScript snippet demonstrates how to import the `DocsImage` Svelte component, which is used for embedding documentation-specific images within Svelte components. It's typically found in the script section of a Svelte file.

```typescript
import DocsImage from '$lib/components/docs/DocsImage.svelte';
```

--------------------------------

### Build GPX Library

Source: https://github.com/gpxstudio/gpx.studio/blob/main/README.md

This snippet provides the necessary bash commands to navigate into the 'gpx' directory, install its Node.js dependencies, and build the TypeScript GPX library.

```bash
cd gpx
npm install
npm run build
```

--------------------------------

### Svelte Component Import Example

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/lt/home/translation.mdx

This Svelte script block demonstrates how to import a component, specifically the 'Languages' icon from the 'lucide-svelte' library. This pattern is common in Svelte applications for making external components available within a .svelte file for use in the template.

```Svelte
<script>
    import { Languages } from 'lucide-svelte';
</script>
```

--------------------------------

### Initialize GPX Data Stores in Svelte

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/uk/files-and-stats.mdx

This Svelte script block initializes several writable stores using Svelte's `writable` function. These stores manage GPX file statistics, sliced data for specific sections, additional datasets like speed and temperature, and options for coloring the elevation profile. It imports necessary components and an example GPX file utility.

```typescript
import { ChartNoAxesColumn } from 'lucide-svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import ElevationProfile from '$lib/components/ElevationProfile.svelte';
    import GPXStatistics from '$lib/components/GPXStatistics.svelte';
    import { exampleGPXFile } from '$lib/assets/example';
    import { writable } from 'svelte/store';

    let gpxStatistics = writable(exampleGPXFile.getStatistics());
    let slicedGPXStatistics = writable(undefined);
    let additionalDatasets = writable(['speed', 'atemp']);
    let elevationFill = writable<'slope' | 'surface' | undefined>(undefined);
```

--------------------------------

### Svelte Toolbar Component Integration Example

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/da/toolbar.mdx

This HTML snippet demonstrates the integration of the `Toolbar` Svelte component within a web page. It applies standard Tailwind CSS utility classes for layout (`flex`, `justify-center`), text styling (`text-foreground`), and visual presentation (`border`, `rounded-md`, `shadow-lg`), showcasing how to embed and style the toolbar effectively.

```HTML
<div class="flex flex-row justify-center text-foreground">
    <div>
        <Toolbar class="border rounded-md shadow-lg" />
    </div>
</div>
```

--------------------------------

### Svelte Component Imports and UI Rendering

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/ro/toolbar/routing.mdx

This snippet demonstrates how Svelte components and icons are imported and used within the application's UI. It includes imports from `lucide-svelte` for icons and internal components like `DocsNote`, `Routing`, and `DocsImage`, along with an example of rendering the `Routing` component with specific properties.

```Svelte
<script>
    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
    import DocsImage from '$lib/components/docs/DocsImage.svelte';
</script>

<Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
```

--------------------------------

### Import Lucide Svelte Component

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/be/home/translation.mdx

This Svelte script block demonstrates how to import the 'Languages' icon component from the 'lucide-svelte' library. This import makes the component available for use within the Svelte component's template, typically for displaying icons.

```Svelte
<script>
    import { Languages } from 'lucide-svelte';
</script>
```

--------------------------------

### Svelte Component Imports and Store Initialization

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/pt/files-and-stats.mdx

This Svelte script block imports necessary components and utilities, then initializes several writable Svelte stores to manage GPX statistics, additional datasets for visualization, and elevation profile fill options. It sets up reactive data for the UI components.

```Svelte
<script lang="ts">
    import { ChartNoAxesColumn } from 'lucide-svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import ElevationProfile from '$lib/components/ElevationProfile.svelte';
    import GPXStatistics from '$lib/components/GPXStatistics.svelte';
    import { exampleGPXFile } from '$lib/assets/example';
    import { writable } from 'svelte/store';

    let gpxStatistics = writable(exampleGPXFile.getStatistics());
    let slicedGPXStatistics = writable(undefined);
    let additionalDatasets = writable(['speed', 'atemp']);
    let elevationFill = writable<'slope' | 'surface' | undefined>(undefined);
</script>
```

--------------------------------

### Svelte Component Usage Example

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/da/toolbar/time.mdx

This snippet illustrates the usage of the custom 'Time' Svelte component within an HTML structure, applying Tailwind CSS classes for styling and layout.

```Svelte
<div class="flex flex-row justify-center">
    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
</div>
```

--------------------------------

### Svelte Component Imports and Writable Stores Initialization

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/vi/files-and-stats.mdx

This Svelte script block imports necessary UI components and modules, then initializes several Svelte writable stores. These stores manage the application's state for GPX statistics, sliced data, additional datasets for visualization, and elevation fill options, enabling dynamic data flow to child components.

```Svelte
import { ChartNoAxesColumn } from 'lucide-svelte';
import DocsNote from '$lib/components/docs/DocsNote.svelte';
import ElevationProfile from '$lib/components/ElevationProfile.svelte';
import GPXStatistics from '$lib/components/GPXStatistics.svelte';
import { exampleGPXFile } from '$lib/assets/example';
import { writable } from 'svelte/store';

let gpxStatistics = writable(exampleGPXFile.getStatistics());
let slicedGPXStatistics = writable(undefined);
let additionalDatasets = writable(['speed', 'atemp']);
let elevationFill = writable<'slope' | 'surface' | undefined>(undefined);
```

--------------------------------

### Import Svelte components for UI icons and documentation notes

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/en/menu/view.mdx

Imports various Svelte components from the `lucide-svelte` library for use as UI icons (e.g., ChartArea, ListTree, Map) and a local `DocsNote` component for displaying documentation-specific notes within the Svelte application.

```Svelte
import { ChartArea, ListTree, Map, Layers2, Coins, Milestone, Box } from 'lucide-svelte';
import DocsNote from '$lib/components/docs/DocsNote.svelte';
```

--------------------------------

### Svelte Lucide Icon Component Usage

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/sr/toolbar/merge.mdx

An example of embedding the 'Group' icon component from 'lucide-svelte' directly into a Svelte template. It shows how to set properties like 'size' and apply CSS classes for inline styling.

```Svelte
<Group size="24" class="inline-block" style="margin-bottom: 5px" />
```

--------------------------------

### Svelte Scissors Component Usage Example

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/lv/toolbar/scissors.mdx

Demonstrates the usage of the `Scissors` Svelte component within a `div` element, applying Tailwind CSS classes for styling to center the component and give it a visual appearance.

```Svelte
<div class="flex flex-row justify-center">
    <Scissors class="text-foreground p-3 border rounded-md shadow-lg" />
</div>
```

--------------------------------

### Import Svelte UI Components

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/da/toolbar/scissors.mdx

Imports essential Svelte components from `lucide-svelte` and local `$lib` paths, including `ScissorsIcon`, `Scissors`, and `DocsImage`, to enable the application's user interface for trace manipulation features.

```Svelte
import { ScissorsIcon } from 'lucide-svelte';
import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
import DocsImage from '$lib/components/docs/DocsImage.svelte';
```

--------------------------------

### Import Lucide Svelte Languages Component

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/he/home/translation.mdx

Demonstrates how to import the 'Languages' component from the 'lucide-svelte' library within a Svelte script block. This component is typically used for displaying language-related icons or indicators in the UI.

```Svelte
import { Languages } from 'lucide-svelte';
```

--------------------------------

### Svelte GPXStatistics Component Usage

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/he/files-and-stats.mdx

This example shows the usage of the `GPXStatistics` Svelte component to display GPX track statistics. It passes `gpxStatistics` and `slicedGPXStatistics` stores, along with fixed `panelSize` and `orientation` props, to configure the display of statistical data.

```svelte
<GPXStatistics
            {gpxStatistics}
            {slicedGPXStatistics}
            panelSize={120}
            orientation={'horizontal'}
        />
```

--------------------------------

### Import Svelte Components for Settings Icons

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/ru/menu/settings.mdx

Imports various icon components from the `lucide-svelte` library and a custom `DocsNote` component. These components are used within the Svelte template to visually represent different settings categories and provide additional information.

```TypeScript
import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
import DocsNote from '$lib/components/docs/DocsNote.svelte';
```

--------------------------------

### Svelte Time Tool Component Display Example

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/be/toolbar/time.mdx

This HTML snippet demonstrates how the 'Time' Svelte component is embedded and styled within the documentation page. It's centered using flexbox and given a visual treatment with padding, border, rounded corners, and shadow.

```Svelte
<div class="flex flex-row justify-center">
    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
</div>
```

--------------------------------

### Importing Svelte Components and Icons

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/pt/toolbar/time.mdx

This snippet demonstrates how to import various Svelte components and icons from external libraries like 'lucide-svelte' and local project paths, preparing them for use within the Svelte component's template.

```Svelte
import { CalendarClock } from 'lucide-svelte';
import Time from '$lib/components/toolbar/tools/Time.svelte';
import DocsNote from '$lib/components/docs/DocsNote.svelte';
```

--------------------------------

### Import Svelte Components for UI

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/ko/toolbar/scissors.mdx

Imports necessary Svelte components from `lucide-svelte` and local `$lib` paths. These components, including `ScissorsIcon`, `Scissors`, and `DocsImage`, are used for building the user interface elements and embedding documentation images within the application.

```Svelte
<script>
    import { ScissorsIcon } from 'lucide-svelte';
    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
    import DocsImage from '$lib/components/docs/DocsImage.svelte';
</script>
```

--------------------------------

### Displaying a Map Pin Icon with Svelte Component

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/ko/toolbar/poi.mdx

This example shows how to embed the `MapPin` Svelte component from `lucide-svelte` directly into the template to display a map pin icon. It applies size, display, and margin styles using component props and HTML attributes.

```Svelte
<MapPin size="24" class="inline-block" style="margin-bottom: 5px" />
```

--------------------------------

### Import Lucide-Svelte Languages Component

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/en/home/translation.mdx

This Svelte code imports the `Languages` component from the `lucide-svelte` library. This component is typically used for displaying language-related icons or UI elements within a Svelte application, as indicated by its usage in the page's heading.

```Svelte
import { Languages } from 'lucide-svelte';
```

--------------------------------

### Import Lucide Svelte Icons and DocsNote Component

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/sr/menu/settings.mdx

This snippet imports necessary UI components and icons for the Svelte application. It includes various icons from 'lucide-svelte' for visual representation of settings categories and a custom 'DocsNote' component for displaying informational notes.

```TypeScript
import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
import DocsNote from '$lib/components/docs/DocsNote.svelte';
```

--------------------------------

### Import Svelte Components for UI Icons and Docs

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/lt/toolbar/routing.mdx

This Svelte script block imports necessary components for the user interface and documentation. It includes icon components from 'lucide-svelte' for visual elements and custom components like 'DocsNote', 'Routing', and 'DocsImage' from the application's internal library to structure content and provide core functionality.

```Svelte
<script>
    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
    import DocsImage from '$lib/components/docs/DocsImage.svelte';
</script>
```

--------------------------------

### Import Lucide-Svelte Languages Component

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/uk/home/translation.mdx

This Svelte script block imports the `Languages` component from the `lucide-svelte` library. This component is typically used to display an icon representing languages or translation, often seen in UI elements like navigation bars or settings.

```Svelte
<script>
    import { Languages } from 'lucide-svelte';
</script>
```

--------------------------------

### Initialize GPX Data Stores in Svelte

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/ro/files-and-stats.mdx

This Svelte script block imports necessary components and utilities, then initializes several writable Svelte stores. These stores hold GPX file statistics, sliced statistics, additional datasets like speed and temperature, and elevation fill options, preparing data for display components.

```TypeScript
    import { ChartNoAxesColumn } from 'lucide-svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import ElevationProfile from '$lib/components/ElevationProfile.svelte';
    import GPXStatistics from '$lib/components/GPXStatistics.svelte';
    import { exampleGPXFile } from '$lib/assets/example';
    import { writable } from 'svelte/store';

    let gpxStatistics = writable(exampleGPXFile.getStatistics());
    let slicedGPXStatistics = writable(undefined);
    let additionalDatasets = writable(['speed', 'atemp']);
    let elevationFill = writable<'slope' | 'surface' | undefined>(undefined);
```

--------------------------------

### Render Routing Component with Custom Props

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/sr/toolbar/routing.mdx

This example demonstrates how to embed and render the `Routing` Svelte component within a `div` element. It passes `minimizable={false}` to disable minimization and applies custom CSS classes for styling, showcasing how to integrate interactive UI components.

```Svelte
<Routing minimizable={false} class="text-foreground p-3 border rounded-md shadow-lg" />
```

--------------------------------

### Initialize GPX Statistics and Profile Data in Svelte

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/pl/files-and-stats.mdx

This Svelte script initializes several writable stores for managing GPX file data, including overall statistics, sliced statistics for selections, additional datasets (like speed and temperature), and options for elevation profile filling (slope or surface). It imports necessary Svelte components and utilities, such as `exampleGPXFile` for initial data and `writable` for reactive state management.

```TypeScript
    import { ChartNoAxesColumn } from 'lucide-svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import ElevationProfile from '$lib/components/ElevationProfile.svelte';
    import GPXStatistics from '$lib/components/GPXStatistics.svelte';
    import { exampleGPXFile } from '$lib/assets/example';
    import { writable } from 'svelte/store';

    let gpxStatistics = writable(exampleGPXFile.getStatistics());
    let slicedGPXStatistics = writable(undefined);
    let additionalDatasets = writable(['speed', 'atemp']);
    let elevationFill = writable<'slope' | 'surface' | undefined>(undefined);
```

--------------------------------

### Svelte Time Component Display Example

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/ro/toolbar/time.mdx

This HTML snippet demonstrates how the 'Time' Svelte component is integrated and displayed within the page. It's wrapped in a flex container for centering and styled with Tailwind CSS classes to provide a visually appealing border, padding, rounded corners, and shadow.

```HTML/Svelte
<div class="flex flex-row justify-center">
    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
</div>
```

--------------------------------

### Import Svelte Components for Settings Icons and Notes

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/uk/menu/settings.mdx

This TypeScript code imports various Svelte components from `lucide-svelte` for displaying icons related to different settings categories (e.g., Ruler for distance, Zap for velocity) and a custom `DocsNote` component for displaying informational notes within the documentation.

```TypeScript
import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
import DocsNote from '$lib/components/docs/DocsNote.svelte';
```

--------------------------------

### Svelte Time Tool Component Integration Example

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/el/toolbar/time.mdx

This HTML snippet demonstrates how the `Time` Svelte component is integrated into the page's layout. It's wrapped in a flex container for centering and styled with Tailwind CSS classes to provide a visually distinct and interactive form for timestamp adjustments.

```Svelte
<div class="flex flex-row justify-center">
    <Time class="text-foreground p-3 border rounded-md shadow-lg" />
</div>
```

--------------------------------

### Import Lucide Svelte Icons and DocsNote Component

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/be/menu/settings.mdx

Imports various icon components from the `lucide-svelte` library and a custom `DocsNote` component for use within a Svelte component. These imports are essential for rendering visual elements and structured notes on the settings page.

```TypeScript
import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
import DocsNote from '$lib/components/docs/DocsNote.svelte';
```

--------------------------------

### Render Merge Tool Svelte Component in Template

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/uk/toolbar/merge.mdx

This example shows how to embed the `Merge` Svelte component within a Svelte template. It applies Tailwind CSS utility classes (`text-foreground`, `p-3`, `border`, `rounded-md`, `shadow-lg`) to style the rendered component, placing it centrally within a flex container.

```Svelte
<Merge class="text-foreground p-3 border rounded-md shadow-lg" />
```

--------------------------------

### Import Svelte Components for Elevation Tool

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/pl/toolbar/elevation.mdx

Imports necessary Svelte components such as `MountainSnow` for icons, `Elevation` for the main tool functionality, and `DocsNote` for displaying documentation-related notes within the page.

```svelte
<script>
    import { MountainSnow } from 'lucide-svelte';
    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
</script>
```

--------------------------------

### Import Svelte Components and Icons

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/ko/toolbar/clean.mdx

This Svelte script block imports necessary UI components and icons. It brings in `SquareDashedMousePointer` from `lucide-svelte` for visual representation and the `Clean` component, which encapsulates the tool's logic and UI, from a local library path.

```Svelte
import { SquareDashedMousePointer } from 'lucide-svelte';
    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
```

--------------------------------

### Svelte Template Usage for Waypoint Form and Icon Display

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/pl/toolbar/poi.mdx

This example demonstrates how to embed the `MapPin` icon and the `Waypoint` component directly into a Svelte template. The `Waypoint` component is styled and used to display the point of interest creation/editing form, while the `MapPin` icon provides a visual indicator for the section title.

```Svelte
<MapPin size="24" class="inline-block" style="margin-bottom: 5px" /> { title }

<div class="flex flex-row justify-center">
    <Waypoint class="text-foreground p-3 border rounded-md shadow-lg" />
</div>
```

--------------------------------

### Import Svelte components for Clean tool

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/sr/toolbar/clean.mdx

This snippet imports necessary Svelte components for the 'Clean' tool. It includes `SquareDashedMousePointer` from `lucide-svelte` for an icon and the main `Clean` component from the local library, making them available for use in the template.

```Svelte
import { SquareDashedMousePointer } from 'lucide-svelte';
    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
```

--------------------------------

### Initialize GPX Statistics and Data Stores (Svelte/TypeScript)

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/be/files-and-stats.mdx

Initializes Svelte writable stores for managing GPX statistics, sliced statistics for selections, additional datasets like speed and temperature, and elevation fill options. It imports necessary Svelte components and utility functions.

```TypeScript
import { ChartNoAxesColumn } from 'lucide-svelte';
import DocsNote from '$lib/components/docs/DocsNote.svelte';
import ElevationProfile from '$lib/components/ElevationProfile.svelte';
import GPXStatistics from '$lib/components/GPXStatistics.svelte';
import { exampleGPXFile } from '$lib/assets/example';
import { writable } from 'svelte/store';

let gpxStatistics = writable(exampleGPXFile.getStatistics());
let slicedGPXStatistics = writable(undefined);
let additionalDatasets = writable(['speed', 'atemp']);
let elevationFill = writable<'slope' | 'surface' | undefined>(undefined);
```

--------------------------------

### Svelte Component Import for Languages Icon

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/el/home/translation.mdx

This Svelte script block demonstrates how to import the `Languages` component from the `lucide-svelte` library. This component is typically used to display a language-related icon or indicator within the application's user interface, often found in navigation or settings related to internationalization.

```Svelte
import { Languages } from 'lucide-svelte';
```

--------------------------------

### Import Svelte Components for Map Controls UI

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/hu/map-controls.mdx

This Svelte script block imports various icon components from the `lucide-svelte` library, which are used to visually represent different map control actions (e.g., zoom, compass, search). It also imports custom documentation components (`DocsNote`, `DocsLayers`) used within the page to provide additional information and interactive examples.

```Svelte
import { Plus, Minus, Diff, Compass, Search, LocateFixed, PersonStanding, Layers } from 'lucide-svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import DocsLayers from '$lib/components/docs/DocsLayers.svelte';
```

--------------------------------

### Initialize GPX Data Stores in Svelte

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/el/files-and-stats.mdx

This Svelte script block imports necessary components and utilities, then initializes several writable stores for managing GPX file statistics, sliced statistics, additional datasets (speed, temperature), and elevation fill options. These stores are used to drive the interactive UI components like `ElevationProfile` and `GPXStatistics`.

```TypeScript
import { ChartNoAxesColumn } from 'lucide-svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import ElevationProfile from '$lib/components/ElevationProfile.svelte';
    import GPXStatistics from '$lib/components/GPXStatistics.svelte';
    import { exampleGPXFile } from '$lib/assets/example';
    import { writable } from 'svelte/store';

    let gpxStatistics = writable(exampleGPXFile.getStatistics());
    let slicedGPXStatistics = writable(undefined);
    let additionalDatasets = writable(['speed', 'atemp']);
    let elevationFill = writable<'slope' | 'surface' | undefined>(undefined);
```

--------------------------------

### Import Svelte Components for UI Icons and Utilities

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/en/toolbar/routing.mdx

Imports various Svelte components from `lucide-svelte` for UI icons and custom components like `DocsNote`, `Routing`, and `DocsImage` used within the documentation page.

```Svelte
import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
    import DocsImage from '$lib/components/docs/DocsImage.svelte';
```

--------------------------------

### Import Svelte Components for UI Icons and Docs

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/pl/toolbar/routing.mdx

Imports various Svelte components, including Lucide icons for UI elements and custom documentation components like `DocsNote`, `Routing`, and `DocsImage`. These imports make the components available for use within the Svelte template.

```Svelte
import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
import DocsNote from '$lib/components/docs/DocsNote.svelte';
import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
import DocsImage from '$lib/components/docs/DocsImage.svelte';
```

--------------------------------

### Import Svelte Components for Clean Tool

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/en/toolbar/clean.mdx

This snippet demonstrates how to import necessary Svelte components and icons for the 'Clean' tool's functionality. It includes importing the `SquareDashedMousePointer` icon from the `lucide-svelte` library and the `Clean` component from a local library path, which is likely the main component for the tool's UI and logic.

```Svelte
import { SquareDashedMousePointer } from 'lucide-svelte';
import Clean from '$lib/components/toolbar/tools/Clean.svelte';
```

--------------------------------

### Import Lucide Svelte Icons and DocsNote Component

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/da/menu/settings.mdx

This TypeScript script, part of a Svelte component, imports various icon components from `lucide-svelte` for visual elements and a custom `DocsNote` component for displaying special notes within the documentation. These imports prepare the components for use in the Svelte template.

```TypeScript
import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
```

--------------------------------

### Import Svelte Components for Settings Page

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/no/menu/settings.mdx

This TypeScript code snippet imports various icon components from `lucide-svelte` and a custom `DocsNote` component. These components are used to enhance the user interface of the settings page by providing visual cues and structured notes.

```TypeScript
import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
```

--------------------------------

### Initialize GPX Data Stores in Svelte

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/ko/files-and-stats.mdx

This Svelte script block initializes several writable stores to manage GPX file statistics, sliced statistics for selections, additional datasets (like speed and temperature), and options for elevation profile filling. It imports necessary Svelte components and utility functions for data handling and display.

```typescript
import { ChartNoAxesColumn } from 'lucide-svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import ElevationProfile from '$lib/components/ElevationProfile.svelte';
    import GPXStatistics from '$lib/components/GPXStatistics.svelte';
    import { exampleGPXFile } from '$lib/assets/example';
    import { writable } from 'svelte/store';

    let gpxStatistics = writable(exampleGPXFile.getStatistics());
    let slicedGPXStatistics = writable(undefined);
    let additionalDatasets = writable(['speed', 'atemp']);
    let elevationFill = writable<'slope' | 'surface' | undefined>(undefined);
```

--------------------------------

### Import Svelte Components for Time Tool

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/en/toolbar/time.mdx

Imports necessary Svelte components for the 'Time' tool page. This includes `CalendarClock` for icons from `lucide-svelte`, the main `Time` component from the application's library, and `DocsNote` for displaying documentation-specific notes.

```Svelte
import { CalendarClock } from 'lucide-svelte';
    import Time from '$lib/components/toolbar/tools/Time.svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
```

--------------------------------

### Import Svelte Components for UI

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/no/toolbar/scissors.mdx

Imports necessary Svelte components and icons for the 'Crop and Split' functionality, including `ScissorsIcon` for visual representation, `Scissors` for the main tool component, and `DocsImage` for documentation images.

```Svelte
import { ScissorsIcon } from 'lucide-svelte';
import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
import DocsImage from '$lib/components/docs/DocsImage.svelte';
```

--------------------------------

### Import Svelte Components and Icons

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/ru/toolbar/clean.mdx

This Svelte script block imports necessary components and icons for the 'Clean' tool. It includes `SquareDashedMousePointer` from `lucide-svelte` for visual representation and the `Clean` component from the local library, which likely contains the core logic for the tool.

```Svelte
import { SquareDashedMousePointer } from 'lucide-svelte';
    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
```

--------------------------------

### Import Svelte Components for Elevation Tool

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/sr/toolbar/elevation.mdx

Imports necessary Svelte components from `lucide-svelte` and local `lib` directory. `MountainSnow` is used for the icon, `Elevation` for the tool's functionality, and `DocsNote` for documentation-specific notes within the page.

```Svelte
import { MountainSnow } from 'lucide-svelte';
import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
import DocsNote from '$lib/components/docs/DocsNote.svelte';
```

--------------------------------

### Import Svelte components and icons for Clean tool

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/lt/toolbar/clean.mdx

This script block imports necessary Svelte components and icons. It brings in `SquareDashedMousePointer` from `lucide-svelte` for UI icons and the `Clean` component from the local `$lib/components/toolbar/tools/Clean.svelte` path, which likely encapsulates the core logic of the clean tool.

```Svelte
import { SquareDashedMousePointer } from 'lucide-svelte';
    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
```

--------------------------------

### Import Svelte UI Components

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/he/toolbar/scissors.mdx

Imports essential Svelte components from `lucide-svelte` for icons and local `lib` for custom tools and documentation images. These imports enable the rendering of interactive UI elements within the Svelte application's templates.

```Svelte
import { ScissorsIcon } from 'lucide-svelte';
import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
import DocsImage from '$lib/components/docs/DocsImage.svelte';
```

--------------------------------

### Import Svelte components for Clean tool

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/pt/toolbar/clean.mdx

This snippet imports necessary Svelte components for the Clean tool. It includes `SquareDashedMousePointer` from `lucide-svelte` for an icon and the `Clean` component from the local `$lib/components/toolbar/tools/Clean.svelte` path, making them available for use in the Svelte template.

```Svelte
<script>
    import { SquareDashedMousePointer } from 'lucide-svelte';
    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
</script>
```

--------------------------------

### Svelte Component Imports for Minify Tool

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/be/toolbar/minify.mdx

Imports necessary Svelte components and icons from `lucide-svelte` and local library paths (`$lib`) to construct the user interface for the Minify tool.

```Svelte
import { Filter } from 'lucide-svelte';
import Reduce from '$lib/components/toolbar/tools/Reduce.svelte';
import DocsNote from '$lib/components/docs/DocsNote.svelte';
```

--------------------------------

### Import Svelte Components for UI Icons and Docs

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/sr/toolbar/routing.mdx

This snippet imports various Svelte components, including Lucide Svelte icons for UI elements and internal application components like `DocsNote`, `Routing`, and `DocsImage` for documentation and core functionality.

```Svelte
import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
import DocsNote from '$lib/components/docs/DocsNote.svelte';
import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
import DocsImage from '$lib/components/docs/DocsImage.svelte';
```

--------------------------------

### Import Svelte Components for UI

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/lt/toolbar/scissors.mdx

Imports necessary Svelte components from `lucide-svelte` and local `$lib` paths. These components are used for displaying icons, interactive tools (Scissors), and documentation images within the application's user interface.

```Svelte
<script>
    import { ScissorsIcon } from 'lucide-svelte';
    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
    import DocsImage from '$lib/components/docs/DocsImage.svelte';
</script>
```

--------------------------------

### Import Svelte Components for UI Icons and Docs

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/be/toolbar/routing.mdx

This Svelte script block imports various icon components from 'lucide-svelte' and custom documentation components like 'DocsNote', 'Routing', and 'DocsImage' for use within the Svelte page. These imports provide the necessary UI elements and documentation utilities.

```Svelte
import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
import DocsNote from '$lib/components/docs/DocsNote.svelte';
import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
import DocsImage from '$lib/components/docs/DocsImage.svelte';
```

--------------------------------

### Import Svelte Components for Clean Tool

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/uk/toolbar/clean.mdx

Imports necessary Svelte components: `SquareDashedMousePointer` for an icon and `Clean` for the main tool functionality, from their respective paths.

```Svelte
import { SquareDashedMousePointer } from 'lucide-svelte';
import Clean from '$lib/components/toolbar/tools/Clean.svelte';
```

--------------------------------

### Svelte Component Imports for Page

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/pt/toolbar/scissors.mdx

This Svelte script block imports necessary UI components and icons from the `lucide-svelte` library and local `$lib` directory for use within the page's structure.

```Svelte
<script>
    import { ScissorsIcon } from 'lucide-svelte';
    import Scissors from '$lib/components/toolbar/tools/scissors/Scissors.svelte';
    import DocsImage from '$lib/components/docs/DocsImage.svelte';
</script>
```

--------------------------------

### Svelte Component Imports for Extract Tool Page

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/ko/toolbar/extract.mdx

Imports essential Svelte components and a Lucide icon for the 'Extract' tool's documentation page, enabling the display of the tool's interactive component and structured notes.

```Svelte
import { Ungroup } from 'lucide-svelte';
import Extract from '$lib/components/toolbar/tools/Extract.svelte';
import DocsNote from '$lib/components/docs/DocsNote.svelte';
```

--------------------------------

### Svelte Component Imports and Writable Store Initialization

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/he/files-and-stats.mdx

This TypeScript script block within a Svelte component imports necessary modules and components, then initializes several Svelte writable stores. These stores are used to manage the application's state, including GPX statistics, sliced statistics, additional datasets to display, and the fill type for the elevation profile.

```ts
import { ChartNoAxesColumn } from 'lucide-svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import ElevationProfile from '$lib/components/ElevationProfile.svelte';
    import GPXStatistics from '$lib/components/GPXStatistics.svelte';
    import { exampleGPXFile } from '$lib/assets/example';
    import { writable } from 'svelte/store';

    let gpxStatistics = writable(exampleGPXFile.getStatistics());
    let slicedGPXStatistics = writable(undefined);
    let additionalDatasets = writable(['speed', 'atemp']);
    let elevationFill = writable<'slope' | 'surface' | undefined>(undefined);
```

--------------------------------

### Import Svelte Components for Settings Icons and Notes

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/fi/menu/settings.mdx

This TypeScript snippet, part of a Svelte component, imports various icon components from the 'lucide-svelte' library and a custom 'DocsNote' component. These imports are essential for rendering the visual elements and structured notes used throughout the settings documentation page.

```TypeScript
import { Ruler, Zap, Thermometer, Languages, Sun, PersonStanding, Layers } from 'lucide-svelte';
import DocsNote from '$lib/components/docs/DocsNote.svelte';
```

--------------------------------

### Svelte Template for Clean Tool UI Integration

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/ro/toolbar/clean.mdx

Demonstrates the integration of the `SquareDashedMousePointer` icon and the `Clean` Svelte component within the application's UI, showcasing how the tool's title and interactive elements are rendered.

```Svelte
<SquareDashedMousePointer size="24" class="inline-block" style="margin-bottom: 5px" /> { title }
<div class="flex flex-row justify-center">
    <Clean class="text-foreground p-3 border rounded-md shadow-lg" />
</div>
```

--------------------------------

### Svelte Component Data Initialization and Usage for GPX Statistics

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/no/files-and-stats.mdx

This Svelte component snippet demonstrates how to import necessary modules and initialize reactive Svelte stores for managing GPX file statistics and visualization options. It then shows the usage of `ElevationProfile` and `GPXStatistics` components, passing the initialized store values as props to render interactive data visualizations.

```typescript
import { ChartNoAxesColumn } from 'lucide-svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import ElevationProfile from '$lib/components/ElevationProfile.svelte';
    import GPXStatistics from '$lib/components/GPXStatistics.svelte';
    import { exampleGPXFile } from '$lib/assets/example';
    import { writable } from 'svelte/store';

    let gpxStatistics = writable(exampleGPXFile.getStatistics());
    let slicedGPXStatistics = writable(undefined);
    let additionalDatasets = writable(['speed', 'atemp']);
    let elevationFill = writable<'slope' | 'surface' | undefined>(undefined);
```

```svelte
<div class="h-48 w-full">
    <ElevationProfile
        {gpxStatistics}
        {slicedGPXStatistics}
        additionalDatasets={$additionalDatasets}
        elevationFill={$elevationFill}
    />
</div>
<div class="flex flex-col items-center -mt-6">
    <div class="h-10 w-fit">
        <GPXStatistics
            {gpxStatistics}
            {slicedGPXStatistics}
            panelSize={120}
            orientation={'horizontal'}
        />
    </div>
</div>
```

--------------------------------

### Svelte Component Imports and Store Initialization

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/sv/files-and-stats.mdx

This TypeScript snippet within a Svelte script block imports necessary UI components and utility functions. It initializes several writable Svelte stores to manage GPX statistics, sliced data, additional datasets for visualization, and elevation fill options, preparing the application state for display components.

```TypeScript
import { ChartNoAxesColumn } from 'lucide-svelte';
import DocsNote from '$lib/components/docs/DocsNote.svelte';
import ElevationProfile from '$lib/components/ElevationProfile.svelte';
import GPXStatistics from '$lib/components/GPXStatistics.svelte';
import { exampleGPXFile } from '$lib/assets/example';
import { writable } from 'svelte/store';

let gpxStatistics = writable(exampleGPXFile.getStatistics());
let slicedGPXStatistics = writable(undefined);
let additionalDatasets = writable(['speed', 'atemp']);
let elevationFill = writable<'slope' | 'surface' | undefined>(undefined);
```

--------------------------------

### Import Svelte Components for Clean Tool

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/vi/toolbar/clean.mdx

This Svelte script block imports necessary components for the 'Clean' tool's UI and functionality. It includes `SquareDashedMousePointer` from `lucide-svelte` for an icon and the `Clean` component from the local `$lib/components/toolbar/tools/Clean.svelte` path, which likely encapsulates the core logic and UI of the tool.

```Svelte
import { SquareDashedMousePointer } from 'lucide-svelte';
import Clean from '$lib/components/toolbar/tools/Clean.svelte';
```

--------------------------------

### Import Svelte Components and Lucide Icons

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/da/toolbar/routing.mdx

This Svelte script block imports various UI components and icons used throughout the documentation page. It includes components like `DocsNote`, `Routing`, `DocsImage`, and several icons from `lucide-svelte` for visual representation of features.

```Svelte
import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
    import DocsImage from '$lib/components/docs/DocsImage.svelte';
```

--------------------------------

### Import Svelte Components and Icons

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/lv/toolbar/routing.mdx

This snippet imports various Svelte components, including UI icons from `lucide-svelte` and custom documentation components like `DocsNote`, `Routing`, and `DocsImage` from the application's library. These imports are essential for rendering the user interface and documentation elements on the page.

```Svelte
import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
    import DocsImage from '$lib/components/docs/DocsImage.svelte';
```

--------------------------------

### Import Svelte Components for Elevation Tool

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/be/toolbar/elevation.mdx

Imports necessary Svelte components like `MountainSnow` from `lucide-svelte`, `Elevation` from `$lib/components/toolbar/tools/Elevation.svelte`, and `DocsNote` from `$lib/components/docs/DocsNote.svelte` for use in the Elevation page.

```Svelte
<script>
    import { MountainSnow } from 'lucide-svelte';
    import Elevation from '$lib/components/toolbar/tools/Elevation.svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
</script>
```

--------------------------------

### Import Svelte Components for UI Elements

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/ko/toolbar/routing.mdx

This snippet demonstrates how various Svelte components, including Lucide icons and internal utility components like DocsNote, Routing, and DocsImage, are imported for use within the Svelte page template. These imports are essential for rendering the user interface elements described in the documentation.

```Svelte
<script>
    import { Pencil, Route, Bike, TriangleAlert, ArrowRightLeft, Home, Repeat, Trash2, CirclePlay, SquareArrowUpLeft } from 'lucide-svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import Routing from '$lib/components/toolbar/tools/routing/Routing.svelte';
    import DocsImage from '$lib/components/docs/DocsImage.svelte';
</script>
```

--------------------------------

### Import Svelte Components for Clean Tool

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/fi/toolbar/clean.mdx

Imports necessary Svelte components, `SquareDashedMousePointer` from `lucide-svelte` for icons and `Clean` from a local library, to be used within the GPX Studio application's Clean tool interface.

```svelte
import { SquareDashedMousePointer } from 'lucide-svelte';
    import Clean from '$lib/components/toolbar/tools/Clean.svelte';
```

--------------------------------

### Initialize Reactive GPX Data Stores (Svelte/TypeScript)

Source: https://github.com/gpxstudio/gpx.studio/blob/main/website/src/lib/docs/da/files-and-stats.mdx

This Svelte script block initializes several writable stores using Svelte's reactivity system. These stores hold GPX file statistics, a potentially sliced version of those statistics, an array of additional datasets to visualize (e.g., speed, temperature), and the current elevation fill option. They are crucial for managing the dynamic data displayed by the UI components.

```TypeScript
import { ChartNoAxesColumn } from 'lucide-svelte';
    import DocsNote from '$lib/components/docs/DocsNote.svelte';
    import ElevationProfile from '$lib/components/ElevationProfile.svelte';
    import GPXStatistics from '$lib/components/GPXStatistics.svelte';
    import { exampleGPXFile } from '$lib/assets/example';
    import { writable } from 'svelte/store';

    let gpxStatistics = writable(exampleGPXFile.getStatistics());
    let slicedGPXStatistics = writable(undefined);
    let additionalDatasets = writable(['speed', 'atemp']);
    let elevationFill = writable<'slope' | 'surface' | undefined>(undefined);
```