Skip to content

Commit abb842c

Browse files
Sync kit docs (sveltejs#1213)
sync kit docs Co-authored-by: svelte-docs-bot[bot] <196124396+svelte-docs-bot[bot]@users.noreply.github.com>
1 parent cf20346 commit abb842c

File tree

3 files changed

+14
-8
lines changed

3 files changed

+14
-8
lines changed
Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
NOTE: do not edit this file, it is generated in apps/svelte.dev/scripts/sync-docs/index.ts
3+
title: Icons
4+
---
5+
6+
## CSS
7+
8+
A great way to use icons is to define them purely via CSS. Iconify offers support for [many popular icon sets](https://icon-sets.iconify.design/) that [can be included via CSS](https://iconify.design/docs/usage/css/). This method can also be used with popular CSS frameworks by leveraging the Iconify [Tailwind CSS plugin](https://iconify.design/docs/usage/css/tailwind/) or [UnoCSS plugin](https://iconify.design/docs/usage/css/unocss/). As opposed to libraries based on Svelte components, it doesn't require each icon to be imported into your `.svelte` file.
9+
10+
## Svelte
11+
12+
There are many [icon libraries for Svelte](https://www.sveltesociety.dev/packages?category=icons). When choosing an icon library, it is recommended to avoid those that provide a `.svelte` file per icon as these libraries can have thousands of `.svelte` files which really slow down [Vite's dependency optimization](https://vite.dev/guide/dep-pre-bundling.html). This can become especially pathological if the icons are imported both via an umbrella import and subpath import [as described in the `vite-plugin-svelte` FAQ](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#what-is-going-on-with-vite-and-pre-bundling-dependencies).

apps/svelte.dev/content/docs/kit/40-best-practices/07-images.md

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -153,12 +153,6 @@ Using a content delivery network (CDN) can allow you to optimize these images dy
153153

154154
CDNs can generally be used without any need for a library. However, there are a number of libraries with Svelte support that make it easier. [`@unpic/svelte`](https://unpic.pics/img/svelte/) is a CDN-agnostic library with support for a large number of providers. You may also find that specific CDNs like [Cloudinary](https://svelte.cloudinary.dev/) have Svelte support. Finally, some content management systems (CMS) which support Svelte (such as [Contentful](https://www.contentful.com/sveltekit-starter-guide/), [Storyblok](https://github.com/storyblok/storyblok-svelte), and [Contentstack](https://www.contentstack.com/docs/developers/sample-apps/build-a-starter-website-with-sveltekit-and-contentstack)) have built-in support for image handling.
155155

156-
## Icons
157-
158-
A great way to use icons is to define them purely in CSS. Iconify offers a huge set of icons [available via CSS](https://iconify.design/docs/usage/css/).
159-
160-
For icons defined in `.svelte` files, it is recommended to avoid libraries that provide a `.svelte` file per icon. These libraries can have thousands of `.svelte` files which really slow down Vite's dependency optimization. This can become especially pathological if the icons are imported both via an umbrella import and subpath import [as described in the `vite-plugin-svelte` FAQ](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#what-is-going-on-with-vite-and-pre-bundling-dependencies).
161-
162156
## Best practices
163157

164158
- For each image type, use the appropriate solution from those discussed above. You can mix and match all three solutions in one project. For example, you may use Vite's built-in handling to provide images for `<meta>` tags, display images on your homepage with `@sveltejs/enhanced-img`, and display user-submitted content with a dynamic approach.

apps/svelte.dev/content/docs/kit/98-reference/[email protected]

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -497,7 +497,7 @@ type: Exclude<NavigationType, 'leave'>;
497497
<div class="ts-block-property-details">
498498

499499
The type of navigation:
500-
- `enter`: The app has hydrated
500+
- `enter`: The app has hydrated/started
501501
- `form`: The user submitted a `<form>`
502502
- `link`: Navigation was triggered by a link click
503503
- `goto`: Navigation was triggered by a `goto(...)` call or a redirect
@@ -1650,7 +1650,7 @@ The URL that is navigated to
16501650

16511651
## NavigationType
16521652

1653-
- `enter`: The app has hydrated
1653+
- `enter`: The app has hydrated/started
16541654
- `form`: The user submitted a `<form>` with a GET method
16551655
- `leave`: The user is leaving the app by closing the tab or using the back/forward buttons to go to a different document
16561656
- `link`: Navigation was triggered by a link click

0 commit comments

Comments
 (0)