How to Import Components in Svelte

Learn the process of importing components in Svelte to enhance your development workflow.

Svelte simplifies component management by utilizing single file components. Each component is defined within a .svelte file, allowing you to include HTML markup, CSS styles, and JavaScript code as needed.

Let’s start with a basic example of a Svelte component residing in a file named Button.svelte:

<button>A button</button>

While you can incorporate CSS and JS within this component, the provided HTML markup already represents the component. There is no requirement to enclose it in additional tags or special wrappers.

To make this component available for use in other Svelte components, you simply need to import it using the following syntax:

<script>
import Button from './Button.svelte';
</script>

After importing the component, you can utilize it in your markup similar to an HTML tag:

<Button />

Using this approach, you can effectively import and integrate various components into your Svelte application.