svelte-polaris-icons

Shopify Polaris SVG icons as Svelte components.

This library builds icons from Shopify Polaris as Svelte components with zero dependencies.

Try it in the Svelte REPL.

Installation

# Yarn
yarn add -D svelte-polaris-icons

# NPM
npm i -D svelte-polaris-icons

# pnpm
pnpm i -D svelte-polaris-icons

Usage

Refer to ICON_INDEX.md for a list of available icons.

Base import

<script>
  import {
    AddMajor,
    ArrowUpMinor,
    MobilePlusMajor,
    StoreMinor,
  } from "svelte-polaris-icons";
</script>

<AddMajor width={20} />
<ArrowUpMinor width={20} />
<MobilePlusMajor width={20} />
<StoreMinor width={20} />

Direct import

The direct import method is recommended because it can lead to faster compile times.

<script>
  import ExportMinor from "svelte-polaris-icons/lib/ExportMinor.svelte";
</script>

Using svelte:component

<script>
  import * as Icons from "svelte-polaris-icons";
</script>

{#each Object.keys(Icons) as icon}
  <div>
    <svelte:component this={Icons[icon]} title={icon} width={20} />
    {icon}
  </div>
{/each}

TypeScript

Svelte version 3.31 or greater is required to use this library with TypeScript.

Changelog

Changelog

License

MIT