Getting Started - Svelte Remix v1

sponsor npm License npm

Requirements #

You need to use the following:

- Svelte 4 or 5 (without Runes)

Installation #

Install Svelte and Svelte Remix:

npm create svelte@latest my-project
cd my-project
pnpm i -D svelte-remix

Basic Usage #

In a svelte file:

  import { AdminLineUserFaces } from 'svelte-remix';

<AdminLineUserFaces />

aria-label #

Use ariaLabel props to edit the aria-label.

  ariaLabel="blue admin user svg icon with face"

IDE support #

If you are using an LSP-compatible editor, such as VSCode, Atom, Sublime Text, or Neovim, hovering over a component name will display a documentation link, features, props, events, etc.

Faster compiling #

If you need only a few icons from this library in your Svelte app, import them directly. This can optimize compilation speed and improve performance by reducing the amount of code processed during compilation.

  import AdminLineUserFaces from 'svelte-remix/AdminLineUserFaces.svelte';

<AdminLineUserFaces />

Passing down other attributes #

Since all icons have ...$$restProps, you can pass other attibutes as well.

<AdminLineUserFaces id="my-svg" transform="rotate(45)" />

Using svelte:component #

  import { AdminLineUserFaces } from 'svelte-remix';

<svelte:component this="{AdminLineUserFaces}" />

Using onMount #

  import { AdminLineUserFaces } from 'svelte-remix';
  import { onMount } from 'svelte';
  const props = {
    size: '50',
    color: '#ff0000'
  onMount(() => {
    const icon = new AdminLineUserFaces({ target: document.body, props });

Import all #

Use `import * as Icon from 'svelte-remix`.

  import * as Icon from 'svelte-remix';

<Icon.AdminLineUserFaces />
<Icon.AdminLineUserFaces size="30" />