Phosphor Icons Svelte

Phosphor Icons Svelte is a collection of components designed to integrate Phosphor Icons into the Svelte framework.

• 1,512 icons per weight, and 9,072 icons in total.
• 6 weights: Bold, Duotone, Fill, Light, Regular, Thin.

[!NOTE] The latest release is based on @phosphor-icons/[email protected]. If the versions don't match, feel free to open an issue.

Installation

pnpm add -D phosphor-icons-svelte

[!IMPORTANT] This package targets newer versions of Svelte and no longer supports Svelte 4 or earlier. If you're using an older version, install 1.1.2 instead.

pnpm add -D [email protected]

Usage

<script>
    import IconHeartRegular from "phosphor-icons-svelte/IconHeartRegular.svelte"
    import IconHeartBreakBold from "phosphor-icons-svelte/IconHeartBreakBold.svelte"
</script>

<IconHeartRegular />
<IconHeartBreakBold />

Props

Only the class prop is available for styling.

class

<IconHeartRegular class="icon-heart-regular" />

Default Styles

Here are the default attributes applied to all SVG elements.

width="1em"
height="1em"
fill="currentColor"
pointer-events="none"
display="inline-block"

width="1em" and height="1em"

The em unit in CSS is relative to the element's font-size (e.g., 2em is twice the size of the current font size).

fill="currentColor"

Setting the fill property to currentColor inherits its value from the color property.

pointer-events="none"

Since icons are purely visual, there's no need to make them interactive. The pointer-events: none property prevents any pointer interactions.

display="inline-block"

This helps in various styling scenarios.

Default Attributes

Here are the default attributes applied to all SVG elements.

data-phosphor-icon="icon-name"

This attribute is used to flip/mirror icons when their default orientation isn't suitable for RTL languages.

[dir="rtl"] [data-phosphor-icon="heart"] {
    transform: scaleX(-1);
}

aria-hidden="true"

Icons are visual elements, so they don't need to be visible to screen readers.

FAQ

Why was this built?

• TypeScript support.
• Accessibility considerations.
• Improved performance and developer experience.

Why is the syntax considered ugly?

Consider the following two syntaxes:

Pretty syntax (invalid):

<script>
    import { Heart, HeartBreak } from "phosphor-icons-svelte"
</script>

<Heart />
<HeartBreak weight="bold" />

Ugly syntax:

<script>
    import IconHeartRegular from "phosphor-icons-svelte/IconHeartRegular.svelte"
    import IconHeartBreakBold from "phosphor-icons-svelte/IconHeartBreakBold.svelte"
</script>

<IconHeartRegular />
<IconHeartBreakBold />

The first syntax may seem appealing, but it causes issues! Phosphor Icons includes a total of 9,072 icons; importing just one icon (using the first syntax) results in all icons being imported. This can significantly slow down your site's performance and loading time during development. To address this, this library restricts you to importing icons individually.

What about combining all weights into a single component? This can cause a similar issue, affecting both development and production environments! Sometimes, tooling can remove unnecessary parts at build time, but this is not always guaranteed.

What about the Icon prefix? The Icon prefix helps avoid naming collisions with other components.

CHANGELOG

/kit/CHANGELOG.md.